ReactJS和XML

Question

我正在嘗試使用React製作RSS閱讀器。我遇到一些RSS源（http://www.economist.com/sections/economics/rss.xml）的元素包含在CDATA部分幷包含HTML標記。什麼是「反應」方式來處理這個問題？

我的理解是，通常情況下，如果使用常規的JavaScript/jQuery來解析XML文檔，你將剛纔得到的數據，並將其直接寫HTML文檔，像

document.getElementById('target').innerHTML 
=xmlDoc.getElementsByTagName('description')[0].childNodes[0].data 

但由於React使用虛擬DOM，你不能這樣做。如果你嘗試做

import React from 'react' 

const Component = (props) => { 
    return (
    <div>{xmlDoc.getElementsByTagName('description')[0].childNodes.data}</div> 
) 
} 

export default Component 

將顯示部分作爲一個完整的HTML標籤的字符串。

我想知道是否有正確或首選的方式來處理這個問題。我知道危險地設置了IntentHTML，但是如果可能的話，寧願避免這種情況，因爲React似乎不鼓勵人們使用它。現在我正在亂搞DomParser，並試圖從CDATA字符串中提取特定的標籤，我不得不懷疑是否有更好的方法，我無法通過Google找到並閱讀文檔。

Answer 1

dangerouslySetInnerHTML在這裏使用是正確的。這個名字實際上意味着提醒人們小心謹慎，而不是使用它的威懾力。隨着陣營文檔說（https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml）：

一般來說，從代碼中設置HTML是有風險的，因爲它很容易給你的用戶在不經意間暴露在跨站點腳本（XSS）攻擊。因此，您可以直接從React中設置HTML，但必須輸入危險的SetInnerHTML並使用__html鍵傳遞對象，以提醒自己危險。

因此，您確實需要小心並防範XSS攻擊。這涉及清理任何傳遞給dangerouslySetInnerHtml的html。這對你的用例特別重要，因爲你不能控制你正在使用的html。 DOMPurify是一個圖書館，可以幫助你：https://github.com/cure53/DOMPurify。