摘要：當(dāng)然，也可自己寫(xiě)一個(gè)轉(zhuǎn)換函數(shù)，按照一定規(guī)則便行為編碼的字節(jié)，如下例中國(guó)結(jié)果中國(guó)結(jié)果結(jié)果通過(guò)簡(jiǎn)單的函數(shù)，就可以完成編碼到編碼的轉(zhuǎn)換，進(jìn)而完成寬字節(jié)字符到編碼的轉(zhuǎn)換。

前端開(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ā)中的忽視的漏洞。

我曾經(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 編碼在前端通常用于圖片和 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 形式的編碼，與 UTF-8 編碼的區(qū)別僅在于前綴（這是由規(guī)范 RFC3986 決定的，將非 ASC 字符進(jìn)行某種形式編碼，并轉(zhuǎn)換為 16 進(jìn)制，并在字節(jié)前加上“％”）。因此通過(guò) unescape(encodeURIComponent(s)) 可以轉(zhuǎn)化為 UTF-8 字節(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("u00E4u00B8u00ADu00E5u009Bu00BD") // 結(jié)果： "??-???"

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

abc
// 未編碼前：test

目前前端大都采用 UTF-8 進(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 解碼，得到了 UTF-8 編碼后再使用 UTF-8 解碼即可。兩次編碼主要是利用“ASC 字符使用 GBK 或 GB2312 編碼不變”的特點(diǎ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)，之所以把它多帶帶列為一個(gè)章節(jié)，意在強(qiáng)調(diào)這兩種編碼與 js 代碼的作用域的關(guān)系。

1、

另外，對(duì)于 js 輸出點(diǎn)的過(guò)濾其實(shí)并不僅限于上文提到的如 eval、setTimeout、Function 等幾個(gè)，由于 JS 語(yǔ)法比較靈活相對(duì)“漏洞”較多，可使用的“線(xiàn)索”也越豐富，如前段時(shí)間在 Stackoverflow 上發(fā)現(xiàn)的一個(gè)問(wèn)題，即
(0)["constructor"]["constructor"]("return "abc;"")()
同樣可以執(zhí)行 JS 代碼，確實(shí)挺有特點(diǎn)的，具體為什么上述形式可以執(zhí)行代碼，請(qǐng)讀者自己仔細(xì)品味。
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         云服務(wù)器
                                             
                         GPU云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               字符編碼 編碼
                                                                                                           字符編碼
                                                                                                           字符編碼格式
                                                                                                           系統(tǒng)默認(rèn)字符編碼
                                                         
                 
               
              
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79395.html
               
                      
               

                 
                                  
上一篇：JavaScript Promise 告別異步亂嵌套
  
                                                
                                       
下一篇：【譯】《學(xué)習(xí)JavaScript設(shè)計(jì)模式》（二）