转载

谈Web前端安全编码

最近开发中涉及到有关输出正确的HTML标签这样的问题，正好对字符编码这块儿多看看，之前对这个方面认识的不深，思考的确实不够，如果下次再碰见类似的问题，若再次不少时间去调研的花，就得不偿失了。

就像正则表达式一样，似乎你知道它，但是每一次开发都需要现取查、现取测试，估计你会像我一样，每一次都会花些意想不到的时间。

总之，重在学习。

有一篇文章，这个博友已经总结的非常到位了，引入于此，看到的同学，希望可以多看看他做的总结：

在web的开发的开发过程中，前端总是在处理后端打的各种变量，变量可以包含着中的各种各样的字符，如果不对这些字符进行”特殊“处理的话，轻者导致页面不正常的显示，潜入了其他的东西，亦即页面挂了，或者弹出不应该弹出的东西，这些都是我们不期望看到的，重者可能导致密码泄露，网站的访问量突然猛增，服务器挂掉。

在前端的开发中，涉及到以下几种语境：

1）直接显示在页面上， eg：<div>{%username%}</div>,<input type="text" value="{%username%}"/>

2）在script 标签中，eg ：<script>var test = '{%username%}';var test="{%username%}"</script>

3）在页面事件中，eg:<div onclick="alert('{%username%}')">334455</div>

4）在innerHTML 的语境中，eg:<div id="test"></div> <script>var test="{%username%}";document.getElementById('test').innerHTML =test; </script>

5）在页面链接的url中：eg：<a href="{%username%}"></a>

6）提交url参数处理

7）js 获取url参数值的时候

下面来一个一个的分析上面提到了7种语境中的转义情况：

1）直接显示在页面上（简称页面html环境中）：

为了保证用户的本意，完完全全的展示在页面上，这类主要是防止标签的自闭合，属性中的单引号，双引号已经存在的情况下不正确显示，所以必须转义4个字符：<,>,",' to为转义的意思（下同）

（1）< to <

（2） > to >

（3）" to &quot；

（4）' to &#39；

2）在script的标签中（简称js环境中）：

在javascript 中 ” 和' 都是表示字符串，没有任何区别，所以如果变量中出现了这2个字符，就会影响后面不正确显示，所以必须转义这2个字符，同理，如果变量中包含/ 会将后面的'或者“给转义掉，

变成真正的’和”，也没有闭合，导致语法错误，所以这个字符也需要转义，另外在我们的注释中存在/* */ 这种形式，如果在变量中出现了 */这种字符，就会将注释掉的部分代码给暴漏出来，所以也要转义/字符，

综上所述，在script标签中要转义的字符为：

（1）' to /'

（2）" to /"

（3）/ to //

（4）/ to //

3）在页面事件中：

这类语境涉及到了页面html和Js 环境，要执行什么转义呢？到底是先html 在js，还是先js 再html 转义呢？我们来看一个例子：

eg：<div onclick="alert('{%username%}')"></div>

当username = " 的时候，如果是先html ，然后再js 转义的时候，那么就是<div onlick="alert('&qout;')"></div> 我们拿到页面上去执行，发现语法报错

如果是先js，先后在html转义的时候，那么就是<div onlick="alert('/&qout;')"></div> 我们拿到页面上去执行，成功！！

所以结论是先进行JS 转义，然后再进行html 转义，为什么是这样呢？因为这里它是要执行一个js函数的，如果都当做html来解析了，这里的js函数就不会执行，也就没有js 环境的意思了。

综上所述，在这累语境中需要转义的字符为：

（1）' to /&

（2）" to /"

（3）/ to //

（4）/ to //

（5）< to <

（6）< to >

4）在innerHTML环境中：

这类语境首先是js环境中，其次是在html环境中，显然，先进行js转义，然后再进行html转义，需要转义的字符同上述3）

5）在页面链接的url 环境中：

这类比较复杂，url中本身涉及到很多的特殊字符，此外也会涉及到html 和js 环境中的赋值的情况，特别注意，url 编码和html的编码是不一样的，见后文附录url编码表和html编码表

在html 和js环境中，需要转义的字符为： ” ，' ，<，>，/ ，/

在其他环境中，需要转义的字符为：+，空格，？，=，&，#， %

这类字符的转义如下：

（1）" to %22;

（2）' to %22;

（3） < to %3C

（4） > to %3E

（5） / to %5C

（6） / to %2F

（7） + to %2b

（8）空格 to %20

（9）？ to %3F

（10）= to %3D

（11）& to %26

（12）# to 23

（13） % to %25

为什么要转义这些字符呢？稍微web开发的经验同学就知道，原因很简单，如果存在这些字符的话，不进行转义，那么我们就会得不到我们应该得到的东西

引申一点：在我们拼接url的时候，比如将表单中的数据提取出来，用ajax的方式提交的时候，也需要对上述字符进行转义，不然得到的也不是想到的东西

6）提交url 参数的处理：

1） Form 表单提交方式：不需要做任何处理，表单会依照页面的编码进行编码

2） ajax 的提交：因为ajax的提交的时候，是拼接成url的方式提交给后端的，所以必须要考虑对 +，空格，？，=，&，#， % 的转义，通常使用 encodeURIComponent进行转义

关于escape,encodeURI,encodeURIComponent 这三个函数的需要的转义字符，见后面的附件列表

7） js 获取url参数的值的时候

（1）得到url中的参数值的时候，首先必须要进行unescape的转码才能使用，因为url中的一些特殊字符都经过了编码

（2）将url的值设置到一些参数上时，比如隐藏表单上的value值的时候（作提交refer），需要进行escape 编码

附录：

1）html 编码： http://wenku.baidu.com/view/0dbaa1dc7f1922791688e8a2.html

2）url 编码： http://baike.baidu.com/view/204662.htm

3）escape,encodeURI,encodeURIComponent 的区别： http://www.alixixi.com/web/a/2008081147930.shtml

上述引文来自： web前端安全编码（模版篇）

我概要一下，分为两类，模板（或称为显示）相关，另一类是URL相关；

一、模板（显示）相关：

我们要把不确定性的后端文本变量（当然来自绝大部分来自用户的输入），为了让之正确的显示在页面中（也就是HTML中），或者正确的执行js代码，我们要对特殊字符进行转义：

HTML环境：

< 转义 &lt; > 转义 &gt; " 转义 " ' 转义 '

JS环境：

' 转义 /' " 转义 /" / 转义 // / 转义 //

对应的工具函数如：

// 转义为HTML环境 // 主要用于innerHTML这种场景 var toSwitchForHtml = function(text){     if (typeof text !== 'string') {  throw new Error('The text must be a string !');     }     return text      .replace(/</g,'<')      .replace(/>/g,'>')      .replace(/"/g, """)      .replace(/'/g, "'"); }; // 转义为JS环境 // 主要用于执行js代码，如new Function(someStringFunctionFromServer);等 var toSwitchForJs = function(text) {     if (typeof text !== 'string') {  throw new Error('The text must be a string !');     }     return text      .replace(////g,'//')      .replace(////g,'//')      .replace(/"/g, """)      .replace(/'/g, "'"); };

二、URL相关：

主要涉及3个可以对字符串编码的函数，分别是：escape,encodeURI,encodeURIComponent，相应3个解码函数：unescape,decodeURI,decodeURIComponent 。

相应的函数介绍，主要查看js api文档即可。

这里做了个统计表格

方法	编码范围	作用	备注
escape	不编码： ASCII字母和数字、*+-./@_ 其余全部编码为十六进制转义序列	在所有的计算机上读取该字符串。要注意，它是将需要转义的字符转义成UTF-16（因为JavaScript只支持16位UTF-16编码）码点。	关于这个转义之后的unicode编码方案，可参考： Unicode与JavaScript详解
encodeURI	不编码： ASCII字母和数字、!’()*._~ URL特定标示符：;/?:@&=+$,# 其余全部编码，根据URL编码规则进行编码	对整个URL进行编码，而URL的特定标识符不会被转码。	url编码的含义： url编码就是一个字符ascii码的十六进制。不过稍微有些变动，需要在前面加上“%”。比如“/”，它的ascii码是92，92的十六进制是5c，所以“/”的url编码就是%5c。那么汉字的url编码呢？很简单，看例子：“胡”的ascii码是-17670，十六进制是BAFA，url编码是“%BA%FA”。更多请参看： URL编码
encodeURIComponent	不编码： ASCII字母和数字、!’()*._~ 编码： URL特定标示符：;/?:@&=+$,# 其余全部编码，根据URL编码规则进行编码	将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件。	请注意 encodeURIComponent() 函数与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

根据上面的表格，我们再来分析使用场景：

1. 当js使用数据时可以使用escape，比如获取或者设置URL中的参数值的时候（当然，约定该URL中传递的参数是经过unicode编码的）

2. 进行 url跳转 时可以整体使用encodeURI。如——

document.write(encodeURI("http://abc.com/do?name=文章&name=king"));

3. 传递参数 时需要使用encodeURIComponent，这样组合的url才不会被#等特殊字符截断。如——

<script >document.write('<a href="http://passport.baidu.com/?logout&aid=7&u='+encodeURIComponent("http://cang.baidu.com/bruce42")+'">退出</a>');</script>