反应: dangerouslySetInnerHTML

Question

我问过关于dangerouslySetInnerHTML的问题，当html来自我的api或者没有区别的时候使用它是危险的吗？谢谢

Answer 1

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

这在医生们中有介绍。

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

本质上，问题是，如果您的服务器没有正确地清理用户输入，您打开您的网站，直到攻击反应，以保护您免受默认。例如，假设您允许用户在您的网站上编写评论，而您的API以HTML的形式发回这些评论。如果一个用户写了一个注释，比如。

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

然后，当其他人查看该注释时，可能会执行JavaScript代码，除非您在处理注释时记住要防止这种情况发生。

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

Answer 2

DangerouslySetInnerHTML

是的，这有潜在的问题。尽管如此，您将获得一些额外的性能，因为react没有将dangerouslySetInnerHTML字段与Virtual进行比较。

它有多危险？

如果用户将一些恶意代码添加到注释/其他输入中，并且通过API在dangerouslySetInnerHTML字段上呈现此数据，则应用程序将处理XSS攻击(https://owasp.org/www-community/attacks/xss/).。

如何防止潜在的XSS？

根据最佳实践，最好使用一些外部模块(如: dangerouslySetInnerHTML ( DOMPurify，https://github.com/cure53/DOMPurify))对DOMPurify元素进行净化。它将从HTML中删除/过滤潜在的恶意代码，并防止XSS。