前端开辟历程当中会打仗林林总总的编码，比较罕见的主如果 UTF-8 和 HTML 实体编码，然则 web 前端的天下却不止这两种编码，而且编码的挑选也会构成肯定的题目，如前后端开辟历程当中差异编码的兼容、多字节编码能够会构成的 XSS 破绽等。因而，本文旨在更好的周全相识触及前端开辟范畴的字符编码，防止能够涌现的交互和开辟中的无视的破绽。
URL 编码
我曾经在 URL 编码解码和 base64 一文中报告了 URL 编码中的三组函数，并对照了这三组函数与 base64 编码的关联，在此扼要申明一下。
escape/unescape 函数针对宽字符做 unicode 编码，并针对码值做十六进制编码，所以运用 escape 针对汉字编码会获得形如 \uxxxx 的效果；encodeURI/decodeURI, encodeURIComponent/decodeURIComponent 函数针对宽字节编码却差异于 escape，起首针对宽字节字符举行 UTF-8 编码，然后针对编码后的效果举行 ％ 替代，获得效果。以上所述都是针对宽字节而言，关于编码靠前的 ASCII 字符而言，上述三组函数的平安字符的局限也有所差异，详细可在上文中相识。
base64 编码
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("\u00E4\u00B8\u00AD\u00E5\u009B\u00BD") // 效果： "ä¸å½"经由过程简朴的 replace 函数，就能够完成 URL 编码到 UTF-8 编码的转换，进而完成宽字节字符到base64编码的转换。有了这个函数，我们手动天生一些 data URI 情势的内容，只需制订 MIME 范例和编码体式格局，就能够完成文本的转换，如以下代码：
<a href="data:text/html;charset=utf-8;base64,PHNjcmlwdD5hbGVydCgxMik8L3NjcmlwdD4=" >abc</a>
// 未编码前：<a href="javascript: alert(1)">test</a>前端 UTF-8 编码与后端 GBK 编码的兼容
如今前端多数采纳 UTF-8 举行编码，不管是 html、js 抑或是 css，而后端则因为汗青缘由多数采纳 GBK 或 GB2312 举行解码，因而前端经由过程 parameter 通报的 URL 编码的字符串就不能够直接在背景举行解码，为了更好的兼容性，前端可举行两次 URL 编码，即 encodeURIComponent（encodeURIComponent（“中国”）），如许后端接收到参数后，先运用 GBK 或 GB2312 解码，获得了 UTF-8 编码后再运用 UTF-8 解码即可。两次编码主如果应用“ASC 字符运用 GBK 或 GB2312 编码稳定”的特性完成，富有技能。
HTML 实体编码与进制编码
实体编码针对HTML的预留字符而言，如 <> 等。实体编码有两种情势 &实体名; 或 &entity_number;，因为浏览器对 &实体名; 的兼容性有差异，因而最好采纳实体号的情势编码。
进制编码，望文生义将ASC字符对应的码值根据十六进制或十进制编码，并转化为 &#x;(16进制) 或&#D;(10进制) 情势。
单单针对实体编码而言并没有什么特别强调的点，之所以把它零丁列为一个章节，意在强调这两种编码与 js 代码的作用域的关联。
1、<div onclick="document.write('<img src=1 onerror=alert(23)>')">cccc</div>
2、<div onclick="document.write('<img src=1 onerror=alert(23)>')">cccc</div>
3、<img src=1 onerror=alert(23)>
4、<img src=1 onerror=alert(23)>
<script>
5、document.write('<img src=1 onerror=alert(23)>');
6、document.write('<img src=1 onerror=alert(3)>');
7、document.write('<img src=1 onerror=alert(23)>')
8、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 个例子：
第一个在事宜处置惩罚函数 onclick 中输出 HTML 片断；
第二个则输出经实体编码后的 HTML 片断；
第三个则是直接针对
<img src=1 onerror=alert(23)>做 16 进制编码；第四个则是针对 onerror 事宜处置惩罚函数做 16 进制编码；
第五个则是在剧本中输出实体编码的字符；
第六个针对事宜处置惩罚函数做 16 进制编码；
第七个则针对一切的字符做 16 进制编码；
第八个则是在 script 中直接输出
<img src=1 onerror=alert(23)>的 unicode 编码
对照效果，前两个例子在点击后都邑弹出 alert；第三个例子则在页面中显现文本 <img src=1 onerror=alert(23)>；第四个例子则会在页面加载早期弹出 alert；第五、七会输出字符串；第六、八则会在第四个例子中的 alert 以后也弹出 alert。如今剖析这些效果，经由过程第一二个例子可晓得，HTML 标签中（除 script 标签）的内联 js 代码能够举行 HTML 实体编码，这是非常重要的一点，我们能够更加明白的举行考证：
<div onclick="alert('<img src=1 onerror=alert(23)>')">cccc</div>输出的效果天然是 <img src=1 onerror=alert(23)>，这确切论证了我们上文提到的这一点；第三个例子申清楚明了HTML剖析器在举行词法剖析前，起首举行解码，十六进制和十进制皆可，因而，效果天然输出形如 <img src=1 onerror=alert(23)> 的字符串；第四个例子则紧接着论证了内联在 HTML 的并采纳十六进制编码的 js 代码一样会被准确剖析并实行，这申清楚明了进制编码一样可被 HTML 剖析器剖析；第五、七个例子申明在 js 中一样能够运用实体编码和进制编码，剖析的效果会渲染在页面上；第六个例子则论证了上一看法，只针对事宜处置惩罚函数做进制编码，实行后页面弹出 alert；第八个例子则是在 js 中实行 unicode 编码的字符串，一般 alert。
因而可知，js 代码内联在 HTML 的非 script 标签内，则会恪守 HTML 编码范例：进制编码和实体编码；而在 js 代码（script 标签内以及 js 文件内）中，则顺从 js 编码：1. unicode 情势编码(uxxxx) 2. 一般的 16 进制编码(xH)，这可经由过程第八个例子获得证实。之所以在本节提到这么多编码特性，重要提示人人在防备 XSS 时须要注重的几点：
检测用户输入时，不单单议须要提防相似
<>如许的字符，经由过程unicode编码或进制编码仍有能够注入代码须要针对特定的关键字做过滤，如
eval、write、prototype尽量制止内联事宜处置惩罚函数的运用
js 过滤
src/href/action属性，如javascript:,data:
JS 编码
实在在上节中已提到了 js 编码，即 js 可实行 unicode 编码和十六（八）进制编码后的字符串，然则不支持十进制编码的字串。详细操作可经由过程经常使用的几个函数来完成，如 eval，write，setTimeout，Function 实行编码后的字符串；一样，关于十进制编码的字串，经由过程连系 String.fromCharCode 和 eval 一样能够实行。
在此附上笔者完成的字符转换，更加天真的完成种种自定义情势的字串编码：
var Code = {};
/**
*
* @param str 待编码字串
* @param jinzhi 进制编码
* @param prefix 前缀
* @param postfix 后缀
* @param count 统共编码的位数，默以为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) />'})}))别的，关于 js 输出点的过滤实在并不仅限于上文提到的如 eval、setTimeout、Function 等几个，因为 JS 语法比较天真相对“破绽”较多，可运用的“线索”也越雄厚，如前段时间在 Stackoverflow 上发明的一个题目，即
(0)['constructor']['constructor']('return "abc;"')()一样能够实行 JS 代码，确切挺有特性的，详细为何上述情势能够实行代码，请读者本身细致品尝。
