Dangerously Set innerHTML

不合時(shí)宜的使用 innerHTML 可能會(huì)導(dǎo)致 cross-site scripting (XSS) 攻擊。 凈化用戶(hù)的輸入來(lái)顯示的時(shí)候，經(jīng)常會(huì)出現(xiàn)錯(cuò)誤，不合適的凈化也是導(dǎo)致網(wǎng)頁(yè)攻擊 的原因之一。

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

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

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

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

這個(gè)功能主要被用來(lái)與 DOM 字符串操作類(lèi)庫(kù)一起使用，所以提供的 HTML 必須要格式清晰（例如：傳遞 XML 校驗(yàn) ）