reactjs – 危险的SetInnerHTML是从React中的API渲染HTML的唯一

Is dangerouslySetInnerHTML the only way to render HTML from an API in React?

从技术上讲,没有.如果您愿意,可以使用Babel变换器做一些魔法,但这种方法不再“安全”或推荐.这只是一种更灵活的选择.有关详细信息,请参阅here.

也就是说,dangerouslySetInnerHTML仍然是将原始标记插入组件的推荐方法.毫无疑问,这个名字很可怕只是为了提醒开发人员潜在的XSS风险.您使用它的事实不会自动呈现您的代码“臭”或“坏”.

换句话说,如果您确定您获取的代码不是恶意的,那么这是一个非常安全的选择.如果你信任API,你几乎不用担心.例如,这是非常安全的：

return <div dangerouslySetInnerHTML={{__html: "<p>foo bar</p>"}} />;

这是这样的：

let markup = SomeApiCallToTrustedProvider(); //"<p>foo bar</p>"
return <div dangerouslySetInnerHTML={{__html: markup}} />;

我不是这个领域的专家,但我的理解是,如果用户无法影响其他用户的网站演示,那么您就可以免受传统的XSS攻击.例如,如果您要从数据库中提取未经过清理的输入数据,并将其反映为代码中的原始标记.这将允许恶意用户向数据库提交代码,该代码在呈现给其他用户时将被有效地执行,从而使用户能够操纵您的页面.

I’m surprised there isn’t a filter which would allow <p>,<h1> etc but not script tags.

那么,这将是某种消毒.有一些片段,你可以如何实现自己的,例如here ……