在React中使用像html-react-parser这样的超文本标记语言解析包与使用dangerouslySetInnerHtml有什么优缺点？

Question

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

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

除了不使用dangerouslySetInnerHtml之外，我不能说出使用html-react-parser的任何优点，但是这是一个优点吗?如果是，为什么？它是以某种方式避免了危险，还是它们只是隐藏了起来？

非常感谢，

凯蒂

Answer 1

我最近一直在为我正在进行的一个无头CMS项目研究这个问题。据我所知：

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

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

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

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