鍍金池/ 教程/ HTML/ Dangerously Set innerHTML
顯示數(shù)據(jù)
組件的引用
Controlled Input 值為 null 的情況
Reconciliation
子 props 的類型
組件的詳細(xì)說明和生命周期
傳遞 Props
特殊的非 DOM 屬性
組件 API
PureRenderMixin
雙向綁定輔助工具
瀏覽器中的工作原理
深入 JSX
表單組件
Dangerously Set innerHTML
入門
JSX 中的 If-Else
克隆組件
教程
更多的關(guān)于Refs
JSX 的 false 處理
高級(jí)性能
Mounting 后 componentWillReceiveProps 未被觸發(fā)
簡介
測試工具集
JSX 陷阱
工具集成(ToolingIntegration)
公開組件功能
通過 AJAX 加載初始數(shù)據(jù)
事件系統(tǒng)
可復(fù)用組件
this.props.children undefined
不可變數(shù)據(jù)的輔助工具(Immutability Helpers)
動(dòng)態(tài)交互式用戶界面
組件的 DOM 事件監(jiān)聽
復(fù)合組件
動(dòng)畫
插件
JSX 展開屬性
行內(nèi)樣式
性能分析工具
類名操作
與其他類庫并行使用 React
鍵控的片段
標(biāo)簽和屬性支持
組件間的通信
React (虛擬)DOM 術(shù)語
JSX 根節(jié)點(diǎn)的最大數(shù)量
在樣式props中快速制定像素值
頂層 API
深入理解 React
自閉合標(biāo)簽
為什么使用 React?
getInitialState 里的 Props 是一個(gè)反模式
與 DOM 的差異

Dangerously Set innerHTML

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

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

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

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

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

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