reactjs-安全地替代危險地設置內部HTML

我想在我的網站(使用React)上創建一個動態博客。 最初,我打算將原始HTML中的帖子存儲在數據庫中,并使用危險地設置內部HTML生成內容。 但是,我對安全隱患感到關注。 盡管我的應用程序沒有任何敏感數據,但我對XSS并不十分熟悉,無法知道我可能會打開應用程序的所有危險。

我很好奇是否存在一種在我的應用程序中動態加載博客頁面的高效,安全的方法。 在這種情況下,使用[https://github.com/odysseyscience/react-router-proxy-loader]有用嗎? 有一個與我的應用程序其余部分分開的博客文章JSX文件夾,并使用此文件夾加載(誠然,我不確定react-router-proxy-loader的工作方式)。

我愿意提出建議。

謝謝,

凱文

asked 2020-02-21T15:50:38Z
5個解決方案
35 votes

如果您最關心XSS,則可以使用dangerouslySetInnerHTML清理HTML,然后再通過dangerouslySetInnerHTML將其插入DOM。這樣就可以節省10K了。 它也可以在Node中工作。

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的某些內容可能會成為問題。 (注意:因為我像你一樣新,所以我還沒有使用過它。)

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。

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

我遇到了同樣的問題,并以更好的解決方案告終。 如果您的輸入如下,解決方案將使用lodash為您工作

<em>paragraph text example:</em>

我的解決方案:

import _ from 'lodash';
const createMarkup = encodedHtml => ({
  __html: _.unescape(encodedHtml),
});
const Notes = ({ label }) => (
  <div>
    <div dangerouslySetInnerHTML={createMarkup(label)} />
  </div>
);
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)}} />;
answered 2020-02-21T15:53:05Z
translate from