在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 \&

  (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

http://www.cnblogs.com/yupeng/archive/2012/05/21/2510988.html

【前端安全】 web前端安全编码(模版篇)【转】的更多相关文章

  1. 什么是Web前端,Web前端是做什么的?

    什么是Web前端 Web前端,顾名思义是来做Web的前端的.而Web前端开发应该就是来开发基于Web前端的相关应用的或者说是来开发前端的.那么,前端又是什么呢?我们这里所说的前端泛指Web前端,也就是 ...

  2. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  3. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  4. 初学者应该怎么学习前端?web前端的发展路线大剖析!

    写在最前: 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用 ...

  5. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  6. [转载]Web前端和后端之区分,以及面临的挑战

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  7. Web前端和后端之区分,以及…

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  8. [转载]Web前端和后端之区分,以及面临的挑战【转】

    原文地址:Web前端和后端之区分,以及面临的挑战[转]作者:joyostyle 在我们实际的开发过程中,我们当前这样定位前端.后端开发人员. 1)前端开发人员:精通JS,能熟练应用JQuery,懂CS ...

  9. Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改

    Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...

  10. web前端程序员真的值这么多钱吗?

    对于互联网公司来说用户就是上帝,做好客户体验一切才有可能.所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用. 前端工程师工资也越来越高,目前Web前端工程师工作1~2年后通常会 ...

随机推荐

  1. redis日常操作

    redis针对所有类型的日常操作: keys * ## 取出所有key keys my* ## 模糊匹配 exists name ## 存在name键返回1,否则返回0 del key1 ## 删除一 ...

  2. playbook实现nginx安装

    1. 先在一台机器上编译安装好nginx,然后打包 tar -zcvf nginx.tar.gz /usr/local/nginx --exclude=conf/nginx.conf --exclud ...

  3. [NOI2014]动物园(kmp)

    题目 https://www.luogu.org/problemnew/show/P2375 做法 查找多少个前缀与后缀配对,其实就是\(fail\)树的深度 而不可重叠,其实\(i\)不可用的,\( ...

  4. CSS Margin(外边距)

    CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...

  5. Pycharm安装Python第三方库

    转自:http://blog.csdn.net/qiannianguji01/article/details/50397046 除了使用easy_insatll和pip工具安装Python第三方库外还 ...

  6. SSH三大框架简介

    我们知道,传统的Java Web应用程序是采用JSP+Servlet+Javabean来实现的,这种模式实现了最基本的MVC分层,使的程序结构分为几层,有负责前台展示的 JSP.负责流程逻辑控制的Se ...

  7. zabbix分布式监控系统安装配置

    zabbix简介: zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵 ...

  8. mybatis动态sql中的sql标签——抽取可重用的sql片段

    1.用<sql>标签抽取可重用的sql片段 <!-- 抽取可重用的SQL片段,方便后面引用           1.sql抽取,经常将要查询的列名,或者插入用的列名,之后方便引用   ...

  9. outline详解

    outline这个属性平时用的不太多,最近被问及专门研究一下这个属性的作用. CSS2加进来的outline属性,中文翻译过来是外轮廓. 神马是轮廓? 轮廓,指边缘:物体的外周或图形的外框. 那这样的 ...

  10. eclipse及tomcat web站點

    eclipse环境下如何配置tomcat https://www.cnblogs.com/Leo_wl/p/4769760.htmleclipse环境下如何配置tomcat,并且把项目部署到Tomca ...