危险的SetInnerHTML的安全替代品

Question

我想在我的网站上使用动态博客(使用React).最初,我打算将帖子存储在我的数据库中的原始HTML中,并使用dangerouslySetInnerHTML生成内容.然而,我担心安全问题.虽然我的应用程序没有任何敏感数据,但我不熟悉XSS,知道我打开应用程序的所有危险.

我很好奇是否有一种高效,安全的方式在我的应用程序中动态加载博客页面.在这种情况下使用https://github.com/odysseyscience/react-router-proxy-loader会有用吗？有一个博客文件夹JSX与我的应用程序的其余部分分开并使用它加载它(诚然,我不知道react-router-proxy-loader如何工作).

我愿意接受建议.

谢谢,

凯文

Answer 1

如果XSS是您主要关心的问题,您可以使用它DOMPurify来清理HTML,然后再将其插入DOM中dangerouslySetInnerHTML.它只有10K缩小.它也适用于Node.

Answer 2

文章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

它还介绍了3个消毒库：
DOMPurify
XSS。
xss 过滤器。

Answer 3

正如其他答案中所述，许多库（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 插件的贡献者。

Answer 4

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

"故意命名为dangerouslySetInnerHTML的故意被选为令人恐惧的......"

"在充分了解安全后果并正确消毒数据之后......"

我想,如果您信任自己的CMS /服务器(而不是从第三方接收),它已经清理了数据(此步骤也已完成),那么您可以使用插入dangerouslySetInnerHTML.

正如Morhaus所说,也许使用DOMPurify,因为它(奖励)可能处理这个不幸的位:"因此提供的HTML必须是格式良好的(即,通过XML验证)." 我怀疑使用HTML5的非XML版本的某些内容可能会成为一个问题.(注意:我还没有用过它,因为我像你一样新.)

Answer 5

如果您确定输入的 HTML 是安全的（没有 XSS 风险）但可能格式错误（例如文本中存在随机内容<），并且您希望防止应用程序因意外 DOM 更改而失败，那么您可以尝试以下操作：

function sanitize(html) {
  var doc = document.createElement('div');
  doc.innerHTML = html;
  return doc.innerHTML;
}

^{（基于/sf/answers/995148451/）}

但是，如果您对您的 HTML 可能不安全 XSS 有丝毫怀疑，请使用上面提到的 DOMPurify。