摘要：當然，也可自己寫一個轉換函數，按照一定規則便行為編碼的字節，如下例中國結果中國結果結果通過簡單的函數，就可以完成編碼到編碼的轉換，進而完成寬字節字符到編碼的轉換。

前端開發過程中會接觸各種各樣的編碼，比較常見的主要是 UTF-8 和 HTML 實體編碼，但是 web 前端的世界卻不止這兩種編碼，而且編碼的選擇也會造成一定的問題，如前后端開發過程中不同編碼的兼容、多字節編碼可能會造成的 XSS 漏洞等。因此，本文旨在更好的全面了解涉及前端開發領域的字符編碼，避免可能出現的交互和開發中的忽視的漏洞。

我曾經在 URL 編碼解碼和 base64 一文中講述了 URL 編碼中的三組函數，并對比了這三組函數與 base64 編碼的關系，在此簡要說明一下。

escape/unescape 函數針對寬字符做 unicode 編碼，并針對碼值做十六進制編碼，所以使用 escape 針對漢字編碼會得到形如 uxxxx 的結果；encodeURI/decodeURI, encodeURIComponent/decodeURIComponent 函數針對寬字節編碼卻不同于 escape，首先針對寬字節字符進行 UTF-8 編碼，然后針對編碼后的結果進行 ％ 替換，得到結果。以上所述都是針對寬字節而言，對于編碼靠前的 ASCII 字符而言，上述三組函數的安全字符的范圍也有所不同，具體可在上文中了解。

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

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

通過 encodeURIComponent 對寬字節字符編碼，是 ％xx 形式的編碼，與 UTF-8 編碼的區別僅在于前綴（這是由規范 RFC3986 決定的，將非 ASC 字符進行某種形式編碼，并轉換為 16 進制，并在字節前加上“％”）。因此通過 unescape(encodeURIComponent(s)) 可以轉化為 UTF-8 字節。當然，也可自己寫一個轉換函數，按照一定規則便行為 UTF-8 編碼的字節，如下例：

unescape(encodeURIComponent("中國")) //結果："??-???"
encodeURIComponent("中國") //結果："%E4%B8%AD%E5%9B%BD"
console.log("u00E4u00B8u00ADu00E5u009Bu00BD") // 結果： "??-???"

通過簡單的 replace 函數，就可以完成 URL 編碼到 UTF-8 編碼的轉換，進而完成寬字節字符到base64編碼的轉換。有了這個函數，我們手動生成一些 data URI 形式的內容，只需制定 MIME 類型和編碼方式，就可以實現文本的轉換，如以下代碼：

abc
// 未編碼前：test

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

實體編碼針對HTML的預留字符而言，如 <> 等。實體編碼有兩種形式 &實體名; 或 &entity_number;，由于瀏覽器對 &實體名; 的兼容性有差別，因此最好采用實體號的形式編碼。

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

單單針對實體編碼而言并沒有什么特殊強調的點，之所以把它多帶帶列為一個章節，意在強調這兩種編碼與 js 代碼的作用域的關系。

1、

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

                 

                                                                                                                    
                         GPU云服務器
                                             
                         云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               字符編碼 編碼
                                                                                                           字符編碼
                                                                                                           字符編碼格式
                                                                                                           系統默認字符編碼
                                                         
                 
               
              
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79395.html
               
                      
               

                 
                                  
上一篇：JavaScript Promise 告別異步亂嵌套
  
                                                
                                       
下一篇：【譯】《學習JavaScript設計模式》（二）