安全替代危险的溶西汀

Question

我想在我的网站上有一个动态博客（使用React）。最初，我打算在数据库中以原始HTML存储帖子，并使用危险的HTML生成内容。然而，我对安全问题感到关切。虽然我的应用程序没有任何敏感数据，但我对XSS还不够精通，不知道打开我的应用程序会遇到哪些危险。

我很好奇，是否有一种高效、安全的方式在我的应用程序中动态加载博客页面。会使用https://github.com/odysseyscience/react-router-proxy-loader在这种情况下有用吗？将blog post JSX文件夹与我的应用程序的其余部分分开，并使用此文件夹加载它（无可否认，我不确定react路由器代理加载程序是如何工作的）。

我愿意接受建议。

Answer 1

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

"道具名称危险的SetInnerHTML被故意选择为可怕的。..."

"在充分了解安全后果并对数据进行适当消毒后..."

我想，如果您信任您自己的CMS/服务器（而不是从第三方接收），该服务器已对数据进行了消毒（此步骤也已完成），那么您可以使用危险的SytinenerHTML插入。

正如Morhaus所说，也许使用DOMPurify，因为它（奖励）可能会处理这个不幸的部分：“所以提供的超文本标记语言必须格式良好（即。，通过XML验证）。”我怀疑使用非XML版本的HTML5的某些内容可能是一个问题。（注：我自己还没有用过，因为我像你一样是新来的。）

Answer 2

在React中使用DangerouslySetinerHTML时如何防止XSS攻击这篇文章建议使用带有danger eslint规则的jam3/no sanitizer来检查传递给DangerouslySetinerHTML的内容是否包装在此sanitizer函数中

有效代码的示例是

const sanitizer = dompurify.sanitize;
return <div dangerouslySetInnerHTML={{__html: sanitizer(title)}} />; // Good

它还描述了3个消毒剂库：
domprify
Xss
xss过滤器。

Answer 3

如果XSS是您主要关心的问题，那么您可以使用domprify在通过dangerlysetinerhtml将HTML插入DOM之前对其进行清理。它只是缩小了10公里。它也在Node中工作。