大家好，我卡頌。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了維西免費(fèi)建站歡迎大家使用！

業(yè)務(wù)中經(jīng)常遇到需要處理「有風(fēng)險(xiǎn)的DOM」的場景，比如：

• 各種工具的文本粘貼功能
• 需要渲染服務(wù)端返回HTML的場景

為了阻止?jié)撛诘腦SS攻擊，有兩個(gè)選擇：

• escape(轉(zhuǎn)義)
• sanitize(消毒)

本文會(huì)介紹這兩者的區(qū)別以及為DOM消毒的API —— Sanitizer。

本文內(nèi)容來自Safe DOM manipulation with the Sanitizer API[1]

轉(zhuǎn)義與消毒

假設(shè)，我們想將這樣一段HTML字符串插入DOM：

 
 
 
 
  
  
  
  
const str = ""; 
 
 
 

如果直接將其作為某個(gè)元素的innerHTML，img的onerror回調(diào)執(zhí)行JS代碼的能力會(huì)帶來XSS風(fēng)險(xiǎn)。

一種常見解決方案是：轉(zhuǎn)義字符串。

什么是escape

瀏覽器會(huì)將一些保留字符解析為HTML代碼，比如：

• <被解析為標(biāo)簽的開頭
• >被解析為標(biāo)簽的結(jié)尾
• ''被解析為屬性值的開頭和結(jié)尾

為了將這些保留字符顯示為文本(不被解析為HTML代碼)，可以將其替換為對(duì)應(yīng)的entity(HTML實(shí)體)：

• <的實(shí)體為<
• >的實(shí)體為>
• ''的實(shí)體為"

這種將HTML字符替換為entity的方式被稱為escape(轉(zhuǎn)義)

什么是sanitize

對(duì)于上面的HTML字符串：

 
 
 
 
  
  
  
  
const str = ""; 
 
 
 

除了轉(zhuǎn)義''來規(guī)避XSS風(fēng)險(xiǎn)，還有一種更直觀的思路：直接過濾掉onerror屬性。

這種直接移除HTML字符串中有害的代碼（比如