替代危险的SetInnerHTML

Posted 2023-02-22

【中文标题】替代危险的SetInnerHTML

【英文标题】：Alternative to dangerouslySetInnerHTML

【发布时间】：2019-04-26 06:19:11

【问题描述】：

我使用 React 构建了一个存储文档的 Web 应用程序。这些是用 html 创建的，然后存储在数据库中。为了在应用程序中显示它们，我通过使用 dangerouslySetInnerHTML 将 HTML 加载到 div 中。

<div dangerouslySetInnerHTML=__html: this.props.page.content />

即使这样工作得很好，dangerouslySetInnerHTML 这个名字也建议对这种情况给予更多的关注，但我想知道究竟可以做些什么来保持足够的灵活性来加载 HTML 并使其出现在 Web 应用程序中。我相信 dangerous 这个词解决了跨站点脚本的危险，这意味着可以注入脚本，执行有害代码。

作为对策，我想在将 HTML 代码解析为div 之前对其进行清理。一个解决这个问题的图书馆是DOMPurify。另一种方法是使用 html-react-parser 将数据库中的 HTML 代码直接转换为 React Elements。

这是正确的方法吗？或者有没有dangerouslySetInnerHTML 的替代品？

【问题讨论】：

dangerouslySetInnerHTML 被调用以确保您知道自己在做什么。除非您信任数据库中的代码，否则如果不清理 HTML 代码，就没有安全的方法来实现这一点。

看起来像重复的：***.com/questions/29044518/…

Safe alternative to dangerouslySetInnerHTML的可能重复

【参考方案1】：

也许这些解析器可以满足你的需要

html-to-react

html-react-parser