在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. python 利用正则构建一个计算器

    该计算器主要分为四个模块: weclome_func函数用来进入界面获取表达式,并判断表达式是否正确,然后返回表达式: add_sub函数用来进行加减运算,如果有多个加减运算,会递归,最后返回对应的值 ...

  2. iOS开发之XMPPFramework开发基础介绍

    1 使用iPhoneXMPP实例 2 修改xmppstream设置 3 基础协议的介绍 协议 协议简介 XEP-0009 在两个XMPP实体间传输XML-RPC编码请求和响应 XEP-0006 使能与 ...

  3. 【Python】装饰器 & 偏函数

    [装饰器] 1.最简单的Decorator. def author(f): def addName(): print('My name is xkfx.\n') f() return addName ...

  4. RabbitMQ学习之(一)_初步了解RabbitMQ、RabbitMQ的使用流程、为什么要使用RabbitMQ、RabbitMQ的应用场景

    初识RabbitMQ RabbitMQ是一个在AMQP协议基础上实现的消息队列系统, 是一个消息代理.它的核心原理非常简单:接收和发送消息.你可以把它想像成一个邮局:你把信件放入邮箱,邮递员就会把信件 ...

  5. JS的Scope

    关键字:域(scope),闭包(closure),关键字this,命名空间(namespace),函数域(function scope),全局域(global scope),词法作用域(lexical ...

  6. kali 2.0下搭建DVWA环境

    DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序.包含了SQL注入.XSS.盲注等常 ...

  7. linux消息队列应用编程

    消息队列:  消息队列提供了一个从一个进程向另外一个进程发送一块数据的方法   每个数据块都被认为是有一个类型,接收者进程接收的数据块可以有不同的类型值   消息队列也有管道一样的不足,就是每个消息的 ...

  8. /usr/bin/ld: crti.o: No such file: No such file or directory

    Problem : You are running a 64-bit linux system and trying to compile a 32-bit application and you g ...

  9. python2与python3语法区别之_重定向

    python2与python3两版本的区别是众所周知的,今天主要记录python下版本2 与版本3的区别 python2 In [7]: logfile = open('/tmp/mylog.log' ...

  10. 安装xenserver6.5

    安装之前的准备工作就不在赘述了,下边开始安装 1.安装界面 2.键盘模式选择默认-美式,ok 3.这里提醒你安装将清除磁盘信息,做好备份,选择ok. 4.这一步没有选择,要么继续,要么退回,选择Acc ...