reactjs-安全地替代危险地设置内部HTML

我想在我的网站(使用React)上创建一个动态博客。 最初,我打算将原始HTML中的帖子存储在数据库中,并使用危险地设置内部HTML生成内容。 但是,我对安全隐患感到关注。 尽管我的应用程序没有任何敏感数据,但我对XSS并不十分熟悉,无法知道我可能会打开应用程序的所有危险。

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

我愿意提出建议。

谢谢,

凯文

Kevin asked 2020-02-21T15:50:38Z
5个解决方案
35 votes

如果您最关心XSS,则可以使用dangerouslySetInnerHTML清理HTML,然后再通过dangerouslySetInnerHTML将其插入DOM。这样就可以节省10K了。 它也可以在Node中工作。

Alexandre Kirszenberg answered 2020-02-21T15:50:52Z
7 votes

[HTTPS://Facebook.GitHub.IO/react/tips/dangerously-set-inner-HTML.HTML]

“特意选择了危险的道具名称危险SetInnerHTML。……”

“在充分了解安全后果并适当清理数据之后……”

我认为,如果您信任自己的CMS / Server(并且未从第三方接收),它已经清理了数据(此步骤也已完成),则可以使用dangerouslySetInnerHTML进行插入。

正如Morhaus所说,也许可以使用DOMPurify(奖金)来处理这一不幸的事情:“因此,提供的HTML必须格式正确(即,通过XML验证)。” 我怀疑使用非XML版本的HTML5的某些内容可能会成为问题。 (注意:因为我像你一样新,所以我还没有使用过它。)

WraithKenny answered 2020-02-21T15:51:30Z
1 votes

如果您确定输入的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。

mik01aj answered 2020-02-21T15:51:59Z
1 votes

我遇到了同样的问题,并以更好的解决方案告终。 如果您的输入如下,解决方案将使用lodash为您工作

&lt;em&gt;paragraph text example:&lt;/em&gt;

我的解决方案:

import _ from 'lodash';

const createMarkup = encodedHtml => ({
  __html: _.unescape(encodedHtml),
});

/* eslint-disable react/no-danger */
const Notes = ({ label }) => (
  <div>
    <div dangerouslySetInnerHTML={createMarkup(label)} />
  </div>
);
Venkat.R answered 2020-02-21T15:52:24Z
0 votes

文章如何在React中使用危险地使用SetInnerHTML时防止XSS攻击建议使用jam3 / no-sanitizer-with-danger eslint规则来检查传递给危险的内容SetInnerHTML是否包装在此消毒器函数中

有效代码示例为

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

它还描述了3个消毒剂库:
净化
Xss。
xss过滤器。

Michael Freidgeim answered 2020-02-21T15:53:05Z
translate from https://stackoverflow.com:/questions/29044518/safe-alternative-to-dangerouslysetinnerhtml