前端转义

发表于   |     |   阅读次数

摘要：前端转义，平常用的时候感觉不多，因为没有bug，所以不会去注意到转义，但其实说起来还是需要整理熟悉一下，因为没有转义轻则破坏原有结构，重则造成XSS攻击，所以前端转义还是很有必要的。在这里介绍一下前端转义有哪些~

转义类型

前端的转义的类型有三种：
1.HTML转义
2.javascript转义（json转义）
3.url转义

HTML转义

HTML转义就是把HTML中的特殊字符利用转义字符进行表示。常用的转义字符如下表，”和’用于给变量赋值，&用于转义，<和>用于HTM标签。

字符 十进制 转义字符
“ &#34 &quot ;
‘ &#39 &apos ;
& &#38 &amp ;
< &#60 &lt ;
> &#62 &gt ;
不断开空格 &#160 &nbsp ;

举个例子，当输出到页面的字符串中带有<h1>标签的时候，会发生什么情况？

1
2
3
4
5
6
// 将content输出到div中
<div id="xx"></div>
var content = '<h1>这里是h1</h1>';
$('#xx').text(content); // 正确
$('#xx').html(content); // 错误
document.getElementById('xx').innerHTML = content; // 错误

上面的写法没有对<>进行转义，导致将content设置为html的时候会出现<h1>标签在html中进行了解析。下面，定义html_encode方法对str进行html转义，然后再把字符串作为html的内容，这样就不会出现标签被解析的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 对str字符串进行html转义
function html_encode(str) {   
	var s = "";   
	if (str.length == 0) return "";   
	s = str.replace(/&/g, "&gt;");   
	s = s.replace(/</g, "&lt;");   
	s = s.replace(/>/g, "&gt;");   
	s = s.replace(/ /g, "&nbsp;");   
	s = s.replace(/\'/g, "&#39;");   
	s = s.replace(/\"/g, "&quot;");   
	s = s.replace(/\n/g, "<br>");   
	return s;   
}   
// 转义后的encodeContent再输出到div中
var encodeContent = html_encode(content);
$('#xx').html(encodeContent); // 正确
document.getElementById('xx').innerHTML = encodeContent; // 正确

javascript转义（json转义）

javascript转义比较简单，就是把特殊字符转成转义字符，常用的转义字符如下表。

转义字符 代码
‘ \’
“ \”
& \&
\ \
换行符 \n
回车符 \r
制表符 \t
退格符 \b
换页符 \f

javascript转义经常会在定义字符串的时候遇到。

1
2
var ret = 'dont't click me'; // 报错
var ret = 'dont\'t click me'; // 正确

url转义

url只能使用英文字母，阿拉伯数字和某些标点符号，其他符号需要编码后才能使用。

浏览器会自动对url进行编码，不过各个浏览器使用的编码方法各异。目前大部分浏览器对url路径中的中文采用utf-8编码，对于url中的参数，大部分浏览器使用utf-8，而ie8以下是使用GB 2312编码。
另外一个点就是get请求中空格会被转变为+，但是在post请求中空格是可以直接传给后台的。

为了编码一致，我们可以在请求之前对url进行编码，实现编码统一。

url编码方法

目前，javascript提供的url编码方法有一下三种
1.escape()
2.encodeURI()
3.encodeURIComponent()

escape()

将url转化为Unicode的形式，这个方法目前在url编码上基本是废弃的，不过当你需要Unicode编码的url的时候还是需要用到它。

encodeURI()

除了常见的符号以外，对其他一些在网址中有特殊含义的符号”; / ? : @ & = + $ , #”，也不进行编码。编码后，它输出符号的utf-8形式，并且在每个字节前加上%。

encodeURIComponent()

在encodeURI()中不被编码的符号，在encodeURIComponent()中统统会被编码

写在最后

其实，转义说起来也就那么回事，但是真正遇到需要转义的场景有时会比较复杂，可能要进行多种转义才能得出结果，所以，遇到转义的时候要确定涉及多少种转义~