爲什麼React.js的API警告不要插入原始HTML？

Question

來自tutorial

但是有一個問題！我們在 瀏覽器中呈現的評論如下所示：「<p>This is <em>another</em> comment</p>」。我們希望那些標籤 實際上呈現爲HTML。

這是React保護您免受XSS攻擊。有一個辦法讓周圍 但框架警告您不要使用它：

...

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

這是一個特殊的API，故意讓人難以插入原始的HTML，但對於攤牌，我們將利用這個後門。

請記住：通過使用此功能，您將依靠攤牌來保證安全。

因此，存在一個用於插入原始HTML的API，但方法名稱和文檔都對此發出警告。使用這個安全嗎？例如，我有一個聊天應用程序，它將Markdown註釋轉換爲HTML字符串。 HTML代碼片段由Markdown轉換器在服務器上生成。我相信轉換器，但我不確定是否有任何方法讓用戶精心製作Markdown來利用XSS。還有什麼我應該做的，以確保這是安全的？

Answer 1

大多數減價處理器（我相信也是攤牌）允許編寫者使用內聯HTML。例如用戶可以輸入：

This is _markdown_ with a <marquee>ghost from the past</marquee>. Or even **worse**: 
<script> 
    alert("spam"); 
</script> 

因此，你應該有標籤的白名單，並從降價轉換爲HTML後去除所有其他的標籤。然後才使用恰當的名稱dangerouslySetInnerHTML。

請注意，這也是Stackoverflow所做的。上述降價呈現如下（沒有你讓你的臉泛起警報）：

這是降價從過去的鬼。或者 甚至糟糕：

警報（ 「垃圾郵件」）;

Answer 2

有三個原因，最好避免HTML：

1. 安全隱患（XSS等）
2. 性能
3. 事件偵聽器

的安全風險主要緩解通過降價，但你仍然必須決定你認爲有效的，並確保它不被允許（例如，你可能不允許圖像）。

只有當標記中的內容發生變化時，性能問題纔有用。例如，如果你用這個生成html："Time: <b>" + new Date() + "</b>"。React通常會決定只更新<b/>元素的textContent，但取而代之，瀏覽器必須重新解析html。在更大的html塊中，這是更大的問題。

如果您確實想知道某人何時點擊了結果中的鏈接，您已經失去了簡單操作的能力。您需要將onClick偵聽器添加到最近的響應節點，並找出哪個元素被點擊，然後從那裏委派動作。

如果您想在React中使用Markdown，我推薦使用純反應渲染器，例如vjeux/markdown-react。