我想在我的网站上有一个动态博客（使用 React）。最初，我打算将原始 HTML 中的帖子存储在我的数据库中，并使用危险的 SetInnerHTML 生成内容。然而，我担心安全隐患。虽然我的应用程序没有任何敏感数据，但我对 XSS 不够精通，无法了解我打开应用程序会遇到的所有危险。
我很好奇是否有一种高性能、安全的方式在我的应用程序中动态加载博客页面。在这种情况下，使用https://github.com/odysseyscience/react-router-proxy-loader会有用吗？将博客文章 JSX 的文件夹与我的应用程序的其余部分分开并使用它加载它（诚然，我不确定 react-router-proxy-loader 是如何工作的）。
我愿意接受建议。
如果 XSS 是您的主要关注点，您可以DOMPurify在通过dangerouslySetInnerHTML. 它只是缩小了 10K。它也适用于 Node。
文章How to prevent XSS Attack when using risklySetInnerHTML in React建议使用 jam3/no-sanitizer-with-danger eslint 规则来检查传递给 risklySetInnerHTML 的内容是否包含在此 sanitizer 函数中
有效代码的示例是
const sanitizer = dompurify.sanitize;
return <div dangerouslySetInnerHTML={{__html: sanitizer(title)}} />; // Good
https://facebook.github.io/react/tips/dangerously-set-inner-html.html
“props名称危险地SetInnerHTML 是故意选择来吓人的。......”
“在充分了解安全后果并正确清理数据之后……”
我想，如果你信任你自己的 CMS/服务器（而不是从第三方接收），它已经清理了数据（这一步也完成了），那么你可以使用dangerouslySetInnerHTML.
正如 Morhaus 所说，也许使用DOMPurify因为它（奖金）可能会处理这个不幸的一点：“所以提供的 HTML 必须是格式良好的（即，通过 XML 验证）。” 我怀疑使用非 XML 版本的 HTML5 的某些内容可能会出现问题。（注意：我自己还没有使用过它，因为我和你一样是新手。）
如果您确定输入的 HTML 是安全的（没有 XSS 风险）但可能格式不正确（例如<文本中包含随机内容），并且您想防止您的应用因意外 DOM 更改而失败，那么您可以尝试以下操作：
function sanitize(html) {
var doc = document.createElement('div');
doc.innerHTML = html;
return doc.innerHTML;
}
（基于https://stackoverflow.com/a/14216406/115493）
但是，如果您对您的 HTML 可能不是 XSS 安全有丝毫怀疑，请使用上面提到的 DOMPurify。
正如其他答案中所述，许多库（dompurify、xss等）可以解析您提供给浏览器的 HTML，删除任何恶意部分并安全地显示它。
问题是：如何强制使用这些库。
为此，您可以安装RisXSS，它是一个 ESLint 插件，dangerouslySetInnerHTML 如果您之前没有对其进行清理，它会警告使用情况（从某种意义上说，这是react/no-dangerESLint 规则的改进版本）。
为此，请安装dompurify和eslint-plugin-risxss：
npm install dompurify eslint-plugin-risxss
添加risxss到您的 ESLint 插件，然后使用 DOMPurify：
import { sanitize } from 'dompurify';
export const MyArticle = ({ post }) => (
<>
<div dangerouslySetInnerHTML={{ post.content }} /> {/* You will receive a warning */}
<div dangerouslySetInnerHTML={{ __html: sanitize(post.content) }} /> {/* All good here */}
</>
);
免责声明：我是 RisXSS 插件的贡献者。