本文目录

React dangerouslySetInnerHTML 说明

🌙
手机阅读
本文目录结构

问题相关:React 在保护你免受 XSS 攻击,所以用 dangerouslySetInnerHTML

在渲染 React 内容的时候;

因为需要借助 markdown 格式的数据,代码如下

const Comment=React.createClass({
    rawMarkup:function () {
        const md=new Remarkable();
        const rawMarkup=md.render(this.props.children.toString());
        return {__html:rawMarkup}
    },
    render:function () {
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                </h2>
                <span dangerouslySetInnerHTML={this.rawMarkup()} />
            </div>
        )
    }
});

文章用到了 dangerouslySetInnerHTML 这个属性,

这是一个危险使用 innerHtml 的属性;

这是一个特殊的 API,故意让插入原始的 HTML 变得困难,

但是对于 remarkable 我们将利用这个后门。

注意:使用这个功能,你需要保证 remarkable 是安全的。

在彻底的理解安全问题后果并正确地净化数据之后,生成只包含唯一 key __html 的对象,并且对象的值是净化后的数据。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了