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 οnclick="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 ";
(4)' to ';
2)在script的标签中(简称js环境中):
在javascript 中 ” 和' 都是表示字符串,没有任何区别,所以如果变量中出现了这2个字符,就会影响后面不正确显示,所以必须转义这2个字符 ,同理,如果变量中包含\ 会将后面的'或者“给转义掉,
变成真正的’和”,也没有闭合,导致语法错误,所以这个字符也需要转义,另外在我们的注释中存在/* */ 这种形式,如果在变量中出现了 */这种字符,就会将注释掉的部分代码给暴漏出来,所以也要转义/字符,
综上所述,在script标签中要转义的字符为:
(1)' to \'
(2)" to \"
(3)\ to \\
(4)/ to \/
3)在页面事件中:
这类语境涉及到了页面html和Js 环境,要执行什么转义呢?到底是先html 在js,还是先js 再html 转义呢?我们来看一个例子:
eg:<div οnclick="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前端安全编码(模版篇)相关推荐
- 好程序员web前端分享HTML基础篇
好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...
- WEB前端优化之内容篇
WEB前端优化之内容篇 Web前端优化过程中难免对相关的前台内容进行重新安排.其中主要的一些点如下: 1尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能 ...
- Web前端开发之HTML篇
前端开发是用来设计给用户看的网页的部分,而Web前端开发则是通过创建Web页面来呈现给用户的过程,其包含了html(结构),css(样式),JavaScript(行为)三大部分.在本篇文章中,我主要对 ...
- [转] Web前端优化之 内容篇
原文网址: http://lunax.info/archives/3090.html Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献. ...
- 2018web前端不好找工作之web前端面试简历补救篇
web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!? 关于前端面试简历简单的介绍几点吧. 1.关于简历如何写.首先可以去招聘网站上面看看.那么可以看哪些呢.比如在拉钩上 ...
- web前端不好找工作之web前端面试简历补救篇
web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!? 关于前端面试简历简单的介绍几点吧. 1.关于简历如何写.首先可以去招聘网站上面看看.那么可以看哪些呢.比如在拉钩上 ...
- web前端进阶_html_基础篇1
HTML基础 一.HTML基础语法 1. 什么HTML HTML(Hypertext Markup Language) - 超文本标记语言 标记语言 - 在不同的文本中加不同的标记让文本的意义和功能不 ...
- web前端学习(CSS篇)
目录 CSS基础语法 基本样式 内联样式与内部样式 内联样式 外部样式及两种写法 CSS中的颜色表示法 CSS背景样式 背景实现视觉差效果 CSS边框样式 边框实现三角形 CSS文字样式 CSS段落样 ...
- web前端技术杂谈--css篇(1)--浅谈margin(续)
2019独角兽企业重金招聘Python工程师标准>>> 1.margin负值实现左右两列布局(左边固定宽度,右边自适应)代码如下: css代码: .main{ ...
最新文章
- Lambda 表达式有何用处?如何使用?
- Openstack_通用模块_Oslo_vmware 创建 vSS PortGroup
- Windows 08 R2_创建AD DS域服务(图文详解)
- GridView使用一些记录
- OpenCASCADE:教程概述
- 思科网络基础课件_上海思科CCNA培训、思科网络工程师培训
- mysql 关键词相关度排序方法详细示例分析
- 开关电源之PCB安规设计规范
- 数组的操作与方法的操作 0303 2101
- python通过ip池爬_python爬虫18 | 就算你被封了也能继续爬,使用IP代理池伪装你的IP地址,让IP飘一会...
- 25 岁的老 Delphi,还值得程序员入手吗?
- Matlab线性规划求解
- 趣键盘霸榜App Store七天,下一个趣头条诞生?
- R语言各种假设检验实例整理(常用)
- 小游戏公司该如何应对网络攻击?
- 【笔记】autoCAD无法显示文字解决方案
- (学习笔记)JAVA开发需要掌握哪些技术?
- 使用POI导出数据和图片,
- R和RStudio及库文件的安装教程
- Vue双向绑定失效 v-model