危险地设置内部HTML是从React中的API渲染HTML的唯一方法吗？

危险地设置内部HTML是从React中的API渲染HTML的唯一方法吗？

从技术上讲，没有。如果愿意，您可以使用Babel变压器做一些魔术，但是这种方法不再“安全”或推荐使用。这只是一个更灵活的选择。有关更多信息，请参见此处。

也就是说，dangerouslySetInnerHTML仍然是将原始标记插入组件的推荐方法。没错，这个名称令人恐惧，只是提醒开发人员潜在的XSS风险。使用它的事实不会自动使代码“臭”或“坏”。

换句话说，如果您确定所获取的代码不是恶意的，那是很安全的选择。如果您信任该API，则无需担心。例如，这是非常安全的：

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

这是这样的：

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

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

我很惊讶没有一个允许使用的过滤器<p>，<h1>但没有脚本标记。

好吧，这将是某种消毒。还有，你如何实现你自己的，片段在那里这里例如...