不合時宜的使用 innerHTML 可能會導致 cross-site scripting (XSS) 攻擊。 凈化用戶的輸入來顯示的時候，經(jīng)常會出現(xiàn)錯誤，不合適的凈化也是導致網(wǎng)頁攻擊 的原因之一。

我們的設計哲學是讓確保安全應該是簡單的，開發(fā)者在執(zhí)行“不安全”的操作的時候應該清楚地知道他們自己的意圖。dangerouslySetInnerHTML 這個 prop 的命名是故意這么設計的，以此來警告，它的 prop 值（ 一個對象而不是字符串 ）應該被用來表明凈化后的數(shù)據(jù)。

在徹底的理解安全問題后果并正確地凈化數(shù)據(jù)之后，生成只包含唯一 key __html 的對象，并且對象的值是凈化后的數(shù)據(jù)。下面是一個使用 JSX 語法的栗子：

    function createMarkup() { return {__html: 'First  · Second'}; };    <div dangerouslySetInnerHTML={createMarkup()} />

這么做的意義在于，當你不是有意地使用 <div dangerouslySetInnerHTML={getUsername()} /> 時候，它并不會被渲染，因為 getUsername() 返回的格式是 字符串 而不是一個 {__html: ''} 對象。{__html:...} 背后的目的是表明它會被當成 "type/taint" 類型處理。 這種包裹對象，可以通過方法調(diào)用返回凈化后的數(shù)據(jù)，隨后這種標記過的數(shù)據(jù)可以被傳遞給 dangerouslySetInnerHTML。 基于這種原因，我們不推薦寫這種形式的代碼：<div dangerouslySetInnerHTML={{'{{'}}__html: getMarkup()}} />.

這個功能主要被用來與 DOM 字符串操作類庫一起使用，所以提供的 HTML 必須要格式清晰（例如：傳遞 XML 校驗 ）