是危险的SetInnerHTML从React中的API呈现HTML的唯一方法？

Question

我正在用React制作电视指南。我从这个api拉取显示信息：http://api.tvmaze.com/episodes/333

正如你可以看到summary包含html。如果我渲染字段，那么HTML将被解释为一个字符串，这意味着您可以在页面上看到<p>标签等。

我知道这是出于安全原因，我可以使用dangerouslySetInnerHTML，但它的气馁，所以最好的做法是什么？从API获取格式化文本并且需要呈现它是相当普遍的。林惊讶没有一个过滤器，这将允许<p><h1>等，但不是脚本标签。

Answer 1

是危险的SetInnerHTML从React中的API呈现HTML的唯一方法？

从技术上讲，没有。如果您愿意，您可以使用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攻击。例如，如果您要从数据库中提取未经过清理的输入数据，并在代码中将其反映为原始标记。这将允许恶意用户向数据库提交代码，当向其他用户提交代码时，该代码将被有效执行，从而使用户能够操纵您的页面。

我很惊讶没有一个过滤器，允许<p>,<h1>等，但不是脚本标记。

那么，这将是某种消毒。有关于如何实现自己的代码片段，例如here ...