前端開(kāi)發(fā)過(guò)程中會(huì)接觸各種各樣的編碼，比較常見(jiàn)的主要是UTF－8和HTML實(shí)體編碼，但是web前端的世界卻不止這兩種編碼，而且編碼的選擇也會(huì) 造成一定的問(wèn)題，如前后端開(kāi)發(fā)過(guò)程中不同編碼的兼容、多字節(jié)編碼可能會(huì)造成的XSS漏洞等。因此，本文旨在更好的全面了解涉及前端開(kāi)發(fā)領(lǐng)域的字符編碼，避 免可能出現(xiàn)的交互和開(kāi)發(fā)中的忽視的漏洞。

URL編碼

我曾經(jīng)在URL編碼解碼和base64一文中講述了URL編碼中的三組函數(shù)，并對(duì)比了這三組函數(shù)與base64編碼的關(guān)系，在此簡(jiǎn)要說(shuō)明一下。
escape/unescape函數(shù)針對(duì)寬字符做unicode編碼，并針對(duì)碼值做十六進(jìn)制編碼，所以使用escape針對(duì)漢字編碼會(huì)得到形 如”\uxxxx”的結(jié)果；encodeURI/decodeURI,encodeURIComponent/decodeURIComponent函數(shù) 針對(duì)寬字節(jié)編碼卻不同于escape，首先針對(duì)寬字節(jié)字符進(jìn)行UTF－8編碼，然后針對(duì)編碼后的結(jié)果進(jìn)行“％”替換，得到結(jié)果。以上所述都是針對(duì)寬字節(jié)字 符而言，對(duì)于編碼靠前的ASCII字符而言，上述三組函數(shù)的安全字符的范圍也有所不同，具體可在上文中了解。

base64編碼

base64編碼在前端通常用于圖片和icon的編碼，它將每3個(gè)8位字節(jié)為一組，分成4組6位字節(jié)，并且每個(gè)字節(jié)的高位補(bǔ)零，形成4個(gè)8位的字 節(jié)，由此可看出base64編碼是可逆推的。在大多數(shù)瀏覽器中，提供了ASCII字符的base64編碼函數(shù)，即window.btoa()。該函數(shù)無(wú)法 針對(duì)寬字節(jié)進(jìn)行base64編碼，若針對(duì)中文編碼，則需現(xiàn)轉(zhuǎn)換位UTF－8編碼，然后進(jìn)行base64編碼。

function unicodeToBase64(s){ return window.btoa(unescape(encodeURIComponent(s))) } 

通過(guò)encodeURIComponent對(duì)寬字節(jié)字符編碼，是“％xx”形式的編碼，與UTF8編碼的區(qū)別僅在于前綴（這是由規(guī)范RFC3986決定的，將非ASC字符進(jìn)行某種形式編碼，并轉(zhuǎn)換為16進(jìn)制，并在字節(jié)前加上“％”）。因此通過(guò)unescape(encodeURIComponent(s))可以轉(zhuǎn)化為UTF8字節(jié)。當(dāng)然，也可自己寫(xiě)一個(gè)轉(zhuǎn)換函數(shù)，按照一定規(guī)則便行為UTF－8編碼的字節(jié)，如下例：

``` 
unescape(encodeURIComponent("中國(guó)")) //結(jié)果："中国" 
encodeURIComponent("中國(guó)") //結(jié)果："%E4%B8%AD%E5%9B%BD" 
console.log("\u00E4\u00B8\u00AD\u00E5\u009B\u00BD") // 結(jié)果： "中国" 
``` 

通過(guò)簡(jiǎn)單的replace函數(shù)，就可以完成URL編碼到UTF8編碼的轉(zhuǎn)換，進(jìn)而完成寬字節(jié)字符到base64編碼的轉(zhuǎn)換。有了這個(gè)函數(shù)，我們手動(dòng)生成一些data URI形式的內(nèi)容，只需制定MIME類型和編碼方式，就可以實(shí)現(xiàn)文本的轉(zhuǎn)換，如以下代碼：

```

<a href="data:text/html;charset=utf-8;base64,PHNjcmlwdD5hbGVydCgxMik8L3NjcmlwdD4=" >abc</a> 
// 未編碼前：<a href="javascript: alert(1)">test</a> 
``` 

前端UTF8編碼與后端GBK編碼的兼容

目前前端大都采用UTF8進(jìn)行編碼，不管是html、js抑或是css，而后端則由于歷史原因大都采用GBK或GB2312進(jìn)行解碼，因此前端通過(guò) parameter傳遞的URL編碼的字符串就不可能直接在后臺(tái)進(jìn)行解碼，為了更好的兼容性，前端可進(jìn)行兩次URL編碼，即 encodeURIComponent（encodeURIComponent（“中國(guó)”）），這樣后端接收到參數(shù)后，先使用GBK或GB2312解碼， 得到了UTF8編碼后再使用UTF8解碼即可。兩次編碼主要是利用“ASC字符使用GBK或GB2312編碼不變”的特點(diǎn)完成，富有技巧。

HTML實(shí)體編碼與進(jìn)制編碼

實(shí)體編碼針對(duì)HTML的預(yù)留字符而言，如“<>”等。實(shí)體編碼有兩種形式&實(shí)體名;或&entity_number;，由于瀏覽器對(duì)&實(shí)體名;的兼容性有差別，因此***采用實(shí)體號(hào)的形式編碼。

進(jìn)制編碼，顧名思義將ASC字符對(duì)應(yīng)的碼值按照十六進(jìn)制或十進(jìn)制編碼，并轉(zhuǎn)化為&#x;(16進(jìn)制)或&#D;(10進(jìn)制)形式。

單單針對(duì)實(shí)體編碼而言并沒(méi)有什么特殊強(qiáng)調(diào)的點(diǎn)，之所以把它單獨(dú)列為一個(gè)章節(jié)，意在強(qiáng)調(diào)這兩種編碼與js代碼的作用域的關(guān)系。

<div onclick="document.write('<img src=1 onerror=alert(23)>')">cccc</div> 
<div onclick="document.write('&lt;img src=1 onerror=alert(23)&gt;')">cccc</div> 
<img src=1 onerror=alert(23)> 
<img src=1 onerror=alert(23)> 
<script> 
   document.write('&lt;img src=1 onerror=alert(23)&gt;'); 
   document.write('<img src=1 onerror=alert(3)>'); 
   document.write('<img src=1 onerror=alert(23)>') 
   document.write('\u003c\u0069\u006d\u0067\u0020\u0073\u0072\u0063\u003d 
\u0031\u0020\u006f\u006e\u0065\u0072\u0072\u006f\u0072\u003d\u0061 
\u006c\u0065\u0072\u0074\u0028\u0032\u0033\u0029\u003e') 
</script> 

代碼中列舉了8個(gè)例子，***個(gè)在事件處理函數(shù)onclick中輸出HTML片段；第二個(gè)則輸出經(jīng)實(shí)體編碼后的HTML片段；第三個(gè)則是直接針對(duì)<img src=1 onerror=alert(23)>做16進(jìn)制編碼；第四個(gè)則是針對(duì)onerror事件處理函數(shù)做16進(jìn)制編碼；第五個(gè)則是在腳本中輸出實(shí)體編碼的字符；第六個(gè)針對(duì)事件處理函數(shù)做16進(jìn)制編碼；第七個(gè)則針對(duì)所有的字符做16進(jìn)制編碼；第八個(gè)則是在script中直接輸出<img src=1 onerror=alert(23)>的unicode編碼。

對(duì)比結(jié)果，前兩個(gè)例子在點(diǎn)擊后都會(huì)彈出alert；第三個(gè)例子則在頁(yè)面中顯示文本<img src=1 onerror=alert(23)>； 第四個(gè)例子則會(huì)在頁(yè)面加載初期彈出alert；第五、七會(huì)輸出字符串；第六、八則會(huì)在第四個(gè)例子中的alert之后也彈出alert。現(xiàn)在分析這些結(jié)果， 通過(guò)***二個(gè)例子可知道，HTML標(biāo)簽中（除script標(biāo)簽）的內(nèi)聯(lián)js代碼可以進(jìn)行HTML實(shí)體編碼，這是非常重要的一點(diǎn)，我們可以更為明確的進(jìn)行驗(yàn) 證：

<div onclick="alert('&lt;img src=1 onerror=alert(23)&gt;')">cccc</div> 

輸出的結(jié)果自然是<img src=1 onerror=alert(23)>，這的確論證了我們上文提到的這一點(diǎn)；第三個(gè)例子說(shuō)明了HTML解析器在進(jìn)行詞法分析前，首先進(jìn)行解碼，十六進(jìn)制和十進(jìn)制皆可，因此，結(jié)果自然輸出形如<img src=1 onerror=alert(23)>的 字符串；第四個(gè)例子則緊接著論證了內(nèi)聯(lián)在HTML的并采用十六進(jìn)制編碼的js代碼同樣會(huì)被正確解析并執(zhí)行，這說(shuō)明了進(jìn)制編碼同樣可被HTML解析器解析； 第五、七個(gè)例子說(shuō)明在js中同樣可以使用實(shí)體編碼和進(jìn)制編碼，解析的結(jié)果會(huì)渲染在頁(yè)面上；第六個(gè)例子則論證了上一觀點(diǎn)，只針對(duì)事件處理函數(shù)做進(jìn)制編碼，執(zhí) 行后頁(yè)面彈出alert；第八個(gè)例子則是在js中執(zhí)行unicode編碼的字符串，正常alert。

由此可見(jiàn)，js代碼內(nèi)聯(lián)在HTML的非script標(biāo)簽內(nèi)，則會(huì)遵守HTML編碼規(guī)范：進(jìn)制編碼和實(shí)體編碼；而在js代碼（script標(biāo)簽內(nèi)以及js文件內(nèi)）中，則遵從js編碼：1,unicode形式編碼(\uxxxx)2,普通的16進(jìn)制編碼(\xH)，這可通過(guò)第八個(gè)例子得到證明。之所以在本節(jié)提到這么多編碼特點(diǎn)，主要提醒大家在預(yù)防XSS時(shí)需要注意的幾點(diǎn)：

• 檢測(cè)用戶輸入時(shí)，不僅僅需要防范類似“<>”這樣的字符，通過(guò)unicode編碼或進(jìn)制編碼仍有可能注入代碼

• 需要針對(duì)特定的關(guān)鍵字做過(guò)濾，如“eval、write、prototype”

• 盡可能禁止內(nèi)聯(lián)事件處理函數(shù)的使用

• js過(guò)濾“src/href/action”屬性，如“javascript:”,”data:”

JS編碼

其實(shí)在上節(jié)中已提到了js編碼，即js可執(zhí)行unicode編碼和十六（八）進(jìn)制編碼后的字符串，但是不支持十進(jìn)制編碼的字串。具體操作可通過(guò)常用 的幾個(gè)函數(shù)來(lái)實(shí)現(xiàn)，如“eval，write，setTimeout，F(xiàn)unction”執(zhí)行編碼后的字符串；同樣，對(duì)于十進(jìn)制編碼的字串，通過(guò)結(jié)合 String.fromCharCode和eval同樣可以執(zhí)行。

在此附上筆者實(shí)現(xiàn)的字符轉(zhuǎn)換，更為靈活的實(shí)現(xiàn)各種自定義形式的字串編碼：

var Code = {}; 
/** 
* 
* @param str 待編碼字串 
* @param jinzhi 進(jìn)制編碼 
* @param prefix 前綴 
* @param postfix 后綴 
* @param count 總共編碼的位數(shù)，默認(rèn)為4 
* @returns {string} 
*/ 
Code.encode = function({str = '',jinzhi = '16',prefix = '\\u',postfix = ';',count = '4'} = {}){ 
    var ret = ''; 
    var addZero,tmp; 
    for(let i=0;i<str.length;i++){ 
tmp = str.charCodeAt(i).toString(jinzhi); 
addZero = count - tmp.length + 1; 
ret += prefix + new Array(addZero).join('0') + tmp + postfix; 
    } 
    return ret; 
}; 
Code.decode = function({str = '',jinzhi = '16',prefix = '\\u',postfix = ';'} = {}){ 
    var ret = ''; 
    var splits = str.split(';'); 
    for(let i=0;i<splits.length;i++){ 
let tmp = splits[i].replace(prefix,''); 
ret += String.fromCharCode(parseInt(tmp,jinzhi)); 
    } 
    return ret; 
}; 
 
console.log(Code.encode({str: '<img src=@ onerror=alert(123) />'})); 
console.log(Code.decode({str: Code.encode({str: '<img src=@ onerror=alert(123) />'})})) 

另外，對(duì)于js輸出點(diǎn)的過(guò)濾其實(shí)并不僅限于上文提到的如eval、setTimeout、Function等幾個(gè)，由于JS語(yǔ)法比較靈活相對(duì)“漏洞”較多，可使用的“線索”也越豐富，如前段時(shí)間在Stackoverflow上發(fā)現(xiàn)的一個(gè)問(wèn)題，即

(0)['constructor']['constructor']('return "abc;"')() 

同樣可以執(zhí)行JS代碼，確實(shí)挺有特點(diǎn)的，具體為什么上述形式可以執(zhí)行代碼，請(qǐng)讀者自己仔細(xì)品味。