如何解决在 React 中使用 HTML 解析包如 html-react-parser 与危险的SetInnerHtml的优缺点是什么
我们有一个包含 HTML 代码的数据库，我们正在使用 React 在网页上显示它，但需要对其进行解析。
我最初使用 html-react-parser，但在代码审查后被要求使用 dangerouslySetInnerHtml，因为它没有任何依赖项。
除了不使用危险的SetInnerHtml之外，我无法阐明使用html-react-parser的任何优势，但这是一个优势，如果是这样，为什么？它是否以某种方式避免了危险，还是只是隐藏了危险？
非常感谢，
凯蒂
解决方法
我最近一直在为我正在处理的 Headless CMS 项目研究这个问题。据我了解：
dangerouslySetInnerHtml 在 ReactDOM.Render() 方法之外创建 DOM 元素，因此它不是由 React 库动态维护的。这基本上违背了使用 React 的初衷（显示和维护虚拟 DOM）。
不过，更令人担忧的是，它容易受到跨站点脚本 (XSS) 攻击，这就是它得名的地方。这些是网络上非常常见的攻击形式。你可以在这里阅读：https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
如果您希望应用程序不易受到攻击，则必须对 DOMPurify 使用类似 dangerouslySetInnerHtml 的清理库，因此无论哪种方式，您都可能有另一个依赖项。一旦您为生产编译应用程序 (npm build)，最小化过程会使代码库非常紧凑，您可以使用代码拆分等技术预先进行一些优化，这使得页面的每个部分仅在请求时加载，而不是一次性：https://reactjs.org/docs/code-splitting.html
我个人不会太担心一些依赖项 - 它们是现代网络上的一个现实。我一直倾向于使用 html-react-parser，但我警告说我没有调查它是否减少了 XSS 漏洞。但是，即使两者都容易受到 XSS 攻击，至少 html-react-parser 会通过 ReactDOM.render() 引入元素，因此它们不会使 DOM 变得一团糟——这听起来像是灾难的秘诀.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
