消毒剂VS危险地设置内部HTML [英] Sanitizers VS dangerouslySetInnerHtml

问题描述

根据一些反应文档:

不当使用 innerHTML 可能会使您跨站点访问脚本(XSS)攻击.清理显示的用户输入是臭名昭著的容易出错，并且无法正确消毒是以下原因之一互联网上网络漏洞的主要原因.

Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet.

似乎不正确使用消毒剂和 innerHTML 可能会暴露站点XSS(跨站点脚本)攻击.

It seems that improper usage of the sanitizers and the innerHTML can expose the site XSS (Cross-Site Scripting) attacks.

另一方面，根据其他文档(例如消毒剂本身)，建议您:

On the other hand, according to other documentation (such as Gatsby or sanitizers itself), they are recommended:

防止XSS攻击的最直接方法是清理危险地设置它之前的innerHTML字符串.幸运的是是可以完成此任务的npm软件包；诸如 sanitize-html 之类的软件包和 DOMPurify .

最好的和最安全的方法是避免在React中使应用程序遭受XSS攻击，同时又避免不正确地使用消毒剂?

What's the best and safest approach to avoid exposing an application to XSS attacks in React while also avoiding improper usage of sanitizers?

推荐答案

我认为这是最好，最安全和最佳的方法，正如通过评论所说(尤其是 markdown-to-jsx 扩展了 dangerouslySetInnerHtml (呈现HTML)的好处，而不会使Web遭受XSS攻击.

I think the best, safest, and optimal approach, as it has been said through comments (especially by Corey Ward) is to avoid the usage of the dangerouslySetInnerHtml as long as it is possible (so sanitizers too). There are some amazing libraries such as markdown-to-jsx that extends the benefits of dangerouslySetInnerHtml (rendering HTML) without exposing the web to XSS attacks.

如果用例的唯一解决方案是使用 dangerouslySetInnerHtml ，则解决方案必须使用消毒剂，请记住，应将其配置为保留样式，类和其他所需的行为，以避免丢失更改.

If the only solution for the use-case is to usedangerouslySetInnerHtml, then the solution must be using sanitizers, keeping in mind that it should be configured to keep styles, classes, and other desired behavior to avoid losing changes.

这篇关于消毒剂VS危险地设置内部HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！