我如何安全地從 React 組件渲染 Markdown？

Question

我想在我的 ReactJS 應用程序中顯示降價，但它的安全完成很重要。 我將顯示的降價文件是不受信任的公共內容。

我見過各種解決方案，它們都使用危險的SetInnerHTML。

我不禁想到這可能很危險。

任何人有任何想法？

謝謝

Answer 1

他們非常刻意地給dangerouslySetInnerHTML的SetInnerHTML起了一個可怕的名字，以確保人們會非常仔細地考慮他們是否需要使用它/他們是否正確使用它。 看到你問這個問題，顯然它做得很好！ 但 Markdown 渲染實際上是一種必要的情況。

基本上，它歸結為：只有當您事先沒有確保放入其中的內容是安全的時， dangerouslySetInnerHTML才是危險的。 要小心，但不要被它嚇跑！

編輯：正如 Waylan 在評論中提到的，我給出的例子非常幼稚，沒有考慮到XSS 攻擊可以通過 Markdown 實現的其他方式。 您很可能希望通過 sanitizer 而不是/以及輸入來運行輸出，否則很可能會生成惡意 HTML，而無需執行像嵌入script標簽那樣簡單的操作。 不過，我的回答的要點保持不變； dangerouslySetInnerHTML只和你放入的東西一樣危險。 做你的研究，確保輸入是安全的，你會沒事的。

Answer 2

如果輸入不受信任（並且您對此無能為力），則庫應在顯示之前正確清理輸入。

我發現了兩個似乎這樣做的庫：

• 反應降價

  只需確保escapeHtml選項設置為true 。 要進行測試，請在演示頁面上將“HTML 模式”設置為“Escape”。

• 了不起

  沒有對其進行測試，並且安全性不是“該項目明確規定的目標”。 該信息來自 2014 年，因此可能已更改（自述文件中沒有信息）。 天啊。