反应：危险地SetInnerHTML

Question

我对 dangerouslySetInnerHTML 有疑问，当 html 来自我的 api 或者没有区别并且可能无论如何都可能受到攻击时，使用它是否危险？ 谢谢

Answer 1

当 HTML 来自任何API 时，使用dangerouslySetInnerHTML是最危险的。

文档中对此进行了介绍：

通常，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。

本质上，问题在于，如果你的服务器没有正确清理用户输入，你就会打开你的网站，让 React 默认保护你免受攻击。 例如，假设您允许用户在您的网站上写评论，并且您的 API 将这些评论发回 HTML 中。 如果用户写了一个评论，例如

my comment <img src="./404" onerror="alert('test')" />

然后例如 JavaScript 代码可能会在其他人查看该评论时执行，除非您记得在处理评论时防止这种情况发生。

---

我建议以不同的格式（例如 JSON）从 API 返回您的数据，然后在前端将其处理为 React 元素。

Answer 2

DangerouslySetInnerHTML

是的，有潜在的担忧。 虽然，您将获得一些额外的性能，因为 react 不会将 dangerouslySetInnerHTML 字段与虚拟 DOM 进行比较。

到底有多危险？

如果用户在评论/其他输入中添加了一些恶意代码，并且此数据通过 API 呈现在 dangerouslySetInnerHTML 字段上，则您的应用程序将处理 XSS 攻击（[https://owasp.org/www-community/attacks/xss/][1 ]）。

如何预防潜在的 XSS？

根据最佳实践，最好使用一些外部模块清理危险的SetInnerHTML 元素，例如：DOMPurify (https://github.com/cure53/DOMPurify)。 它将从 HTML 中删除/过滤掉潜在的恶意代码并防止 XSS。