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

Question

我正在用React制作电视指南。我正在从此API中获取表演信息：http :
//api.tvmaze.com/episodes/333

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

我知道我可以使用，dangerouslySetInnerHTML但出于安全原因不建议使用。最佳做法是什么？从API获取格式化的文本并需要呈现它必须非常普遍。我很惊讶，没有一个过滤器，这将允许<p>，<h1>等等，但不script标签。

Answer 1

危险地设置内部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>但没有脚本标记。