在React中使用html-react-parser和dangerouslySetInnerHtml等HTML解析包有何优缺点

Question

我们有一个包含 HTML 代码的数据库，我们使用 React 将其显示在网页上，但需要对其进行解析。

我最初使用html-react-parser，但在代码审查后被要求使用危险的SetInnerHtml，因为它没有任何依赖项。

除了不使用危险的SetInnerHtml之外，我无法阐明使用 html-react-parser 的任何优点，但这是一个优点吗？如果是的话为什么？它是否以某种方式避免了危险，或者它们只是被隐藏起来了？

非常感谢，

凯蒂

Answer 1

我最近一直在为我正在从事的 Headless CMS 项目研究这个问题。据我了解：

dangerouslySetInnerHtml在方法之外创建 DOM 元素ReactDOM.Render()，因此 React 库不会动态维护它。这基本上违背了使用 React 的初衷（显示和维护虚拟 DOM）。

但更令人担忧的是，它很容易受到跨站脚本 (XSS) 攻击，这也是它得名的原因。这些是网络上非常常见的攻击形式。您可以在这里阅读：https ://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

如果您希望应用程序不易受到攻击，则必须使用类似DOMPurifyfor的清理库dangerouslySetInnerHtml，因此无论哪种方式您都可能有另一个依赖项。一旦您编译了用于生产的应用程序 ( npm build)，最小化过程会使代码库变得非常紧凑，您可以使用代码分割等技术预先进行一些优化，这使得页面的每个部分仅在请求时加载，而不是一次性加载：https://reactjs.org/docs/code-splitting.html

就我个人而言，我不会太担心一些依赖关系 - 它们是现代网络上的一个事实。我一直倾向于使用html-react-parser，但我警告说我还没有调查它是否可以减少 XSS 漏洞。然而，即使两者都容易受到 XSS 攻击，至少html-react-parser引入了这些元素ReactDOM.render()，这样它们就不会让 DOM 变得混乱不堪——这听起来像是未来灾难的根源。