欢迎光临
我们一直在努力

web前端安全编码

fe6375fd178ca645c476c6cdbf992589 web前端安全编码在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 &lt;

(2) > to &gt;

(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 /&#38;

(2)”? to /&quot;

(3)/? to //

(4)/? to //

(5)< to &lt;

(6)< to &gt;

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前端安全编码
分享到: 更多 (0)