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 的对象,并且对象的值是净化后的数据。

~~

未经允许不得转载:朱邦邦的博客 » React中dangerouslySetInnerHTML的说明

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址