reactjs - angerlySetInnerHTML 是从 React 中的 API 渲染 HTML 的唯一方法吗？

Question

我正在使用 React 制作电视指南。我正在从此 API 中提取显示信息:http://api.tvmaze.com/episodes/333

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

我知道我可以使用 dangerouslySetInnerHTML但出于安全原因，不鼓励这样做。对此的最佳实践是什么？从 API 获取格式化文本并需要渲染它一定是相当常见的。我很惊讶没有一个过滤器允许 <p> , <h1>等，但不是脚本标签。

Answer 1

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 攻击。一个例子是，如果您要从数据库中获取未经清理的输入数据并将其反射(reflect)为代码中的原始标记。这将允许恶意用户向数据库提交代码，当该代码呈现给其他用户时，该代码将被有效执行，从而使用户能够操纵您的页面。

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

嗯，这将是某种 sanitizer 。有一些片段可以告诉您如何实现自己的，here例如...