在 React 中使用像 html-react-parser 和 dangerouslySetInnerHtml 这样的 HTML 解析包的优缺点是什么
What are the pros and cons of using an HTML parsing package like html-react-parser vs dangerouslySetInnerHtml in React
我们有一个包含 HTML 代码的数据库，我们正在使用 React 将其显示在网页上，但需要对其进行解析。
我最初使用 html-react-parser but after a code review was asked to use dangerouslySetInnerHtml 代替，因为它没有任何依赖关系。
除了不使用危险的 SetInnerHtml 之外，我无法阐明使用 html-react-parser 的任何优势，但这是优势吗？如果是，为什么？它是否以某种方式避免了危险，或者它们只是被隐藏了？
非常感谢，
凯蒂
我最近一直在为我正在处理的 Headless 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 全部 catty-wompus - 这听起来像是一个食谱灾难即将来临。
我们有一个包含 HTML 代码的数据库，我们正在使用 React 将其显示在网页上，但需要对其进行解析。
我最初使用 html-react-parser but after a code review was asked to use dangerouslySetInnerHtml 代替，因为它没有任何依赖关系。
除了不使用危险的 SetInnerHtml 之外，我无法阐明使用 html-react-parser 的任何优势，但这是优势吗？如果是，为什么？它是否以某种方式避免了危险，或者它们只是被隐藏了？
非常感谢，
凯蒂
我最近一直在为我正在处理的 Headless 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 全部 catty-wompus - 这听起来像是一个食谱灾难即将来临。