【发布时间】：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 代码，就没有安全的方法来实现这一点。
标签： html reactjs jsx code-injection tsx