【笔记】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 &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

上述引文来自:web前端安全编码(模版篇)

我概要一下,分为两类,模板(或称为显示)相关,另一类是URL相关;

模板(显示)相关:

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

HTML环境:

< 转义 &lt;
> 转义 &gt;
" 转义 &quot;
‘ 转义 &#39

JS环境:

‘ 转义 \‘
" 转义 \"
\ 转义 \/ 转义 \/

URL相关:

....略等....

时间: 2024-11-06 03:31:22

【笔记】Web前端安全编码的相关文章

[读书笔记] Web 前端开发修炼之道

原创地址:http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是Web 前端开发修炼之道 第1章 从网站重构说起 1.1 糟糕的实现,头疼的维护 曾经, 网页代码很乱. 1.2 Web 标准,结构,样式和行为的分离 分离了. 1.3 前端的现状 人员参差不齐. 小结: 本章相当于引论. 第2章 团队合作 小结: 团队和沟通这个永远是个凑字数的好话题. 第3章 高质量的HTML 3.1 标签的语义 标签是有语义的,除了div

web前端开发笔记(2)

web前端开发笔记(1) 一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必须闭合. 页面中不要用 进行缩进,如需缩进,用css控制. html标签使用必须语义化. 要为img标签填写alt和title属性. 二.HTML静态页面出现中文乱码如何解决? 引入<meta charset="UTF-8"> 三.通常情况下块属性标签和

【转】Web前端黑客技术揭秘{笔记}

原文 http://www.cnblogs.com/r00tgrok/articles/Web-Hacking.html 前些日子看完了白帽子讲Web安全,当时就PHP安全一 章做了点小笔记,感觉看书还是留下点东西比较好.翻开Web前端黑客技术揭秘一书决定要做笔记,但是这样下来其实进度就比较慢了,敲字做笔记绝对远比看书 来的慢.有时候上午看完的内容做笔记时要花一天时间,一方面是要敲字,另一方面是自己只从书上摘录部分内容有时候需要将其串起来,还有就是碰上自己想发两 句言也会拖慢进度.总之现在书是看

Web前端开发修炼之道--笔记

花了一个星期看完了这本书,把随笔写一写,还摘录了一些书里封装好的函数,偶尔多看看(只捡了感觉重要的东西) HTML(Model)+CSS(View)+javascript(Controller) 怪异模式是因为DTD触发,也就是 Document Type Definition (文档定义类型) <!DOCTYPE html> 多种组织CSS方式 例如可以按功能划分 font.css color.css layout.css 此书推荐base.css(通用层)+common(网站级)+css+

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

Web前端开发笔记整理

web前端开发笔记: 1.web前端之html_day1 2.web前端之html_day2 3.web前端之css_day1

WEB前端学习笔记 三

接上一篇,web学习笔记 二,web学习笔记刚刚发出,就发现被其他网站采集了,在此感谢您的采集和转发,但请注明文章出自网知博学. 1.7  开发工具的选择 增强文本编辑器:EditPlus.Notepad++ 特点:比较小.占用系统资源比较少.代码颜色高亮显示.但没有代码自动补功能 IDE:(Integrated Development Environment,集成开发环境).IDE集成开发环境(简称IDE)开发环境就是指在开发软件的时候需要用到的软件.这些软件包括代码编辑器.编译器.调试工具和

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

WEB前端 [编码] 规则浅析

前言 说到前端安全问题,首先想到的无疑是XSS(Cross Site Scripting,即跨站脚本),其主要发生在目标网站中目标用户的浏览器层面上,当用户浏览器渲染整个HTML文档的过程中出现了不被预期的脚本指令并执行时,XSS就会发生.XSS有三类: 反射型XSS:发出请求时,XSS代码出现在URL中,作为输入提交到服务端,服务端解析后响应,在响应内容中出现这段XSS代码,最后浏览器解析执行,此过程就像一次反射: 存储型XSS:它与反射型XSS的差别仅在于--提交的XSS代码会存储在服务端,