js中编码函数:escape,encodeURI与encodeURIComponent详解


Posted in Javascript onMarch 21, 2017

1、eacape(): 该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。其它情况下escape,encodeURI,encodeURIComponent编码结果相同。

   escape对0-255以外的unicode值进行编码时输出%u****格式

   可以使用 unescape() 对 escape() 编码的字符串进行解码。

   ECMAScript v3 反对使用该方法,应用使用 decodeURI() 和 decodeURIComponent() 替代它。

2、encodeURI 和 encodeURIComponent

encodeURI 和 encodeURIComponent都是ECMA-262标准中定义的函数,所有兼容这个标准的语言(如JavaScript, ActionScript)都会实现这两个函数。它们都是用来对URI (RFC-2396)字符串进行编码的全局函数,但是它们的处理方式和使用场景有所不同。为了解释它们的不同,我们首先需要理解RFC-2396中对于 URI中的字符分类:

1>保留字符(reserved characters):这类字符是URI中的保留关键字符,它们用于分割URI中的各个部分。这些字符是:";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | ","

2>Mark字符(mark characters):这类字符在RFC-2396中特别定义,但是没有特别说明用途,可能是和别的RFC标准相关。 这些字符是:"-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"

3>基本字符(alphanum characters):这类字符是URI中的主体部分,它包括所有的大写字母、小写字母和数字。

在介绍完上面三类字符串后,我们就非常容易来解释encodeURI和encodeURIComponent函数的不同之处了:

encodeURI: 该函数对传入字符串中的所有非(基本字符、Mark字符和保留字符)进行转义编码(escaping)。所有的需要转义的字符都按照UTF-8编码转化成 为一个、两个或者三个字节的十六进制转义字符(%xx)。例如,字符空格" "转换成为"%20"。在这种编码模式下面,需要编码的ASCII字符用一个字节转义字符代替,在\u0080和\u007ff之间的字符用两个字节转义字符代替,其他16为Unicode字符用三个字节转义字符代替。

encodeURIComponent: 该函数处理方式和encodeURI只有一个不同点,那就是对于保留字符同样做转义编码。这样url中的参数和值才不会被#等特殊字符截断。 比如:http://localhost:8080/xss/XssServlet?username=A&T Plastic,该url,后台的代码:

String username = request.getParameter("username");

获得的username值为A,而不是我们希望的 A&T Plastic。因为 username=A&T Plastic,其中含有了保留字符&,并且没有进行编码,所以username的值被其给截断了。所以正确的做法是,对其进行编码:encodeURIComponent("A&T Plastic") == A%26T%20Plastic,然后将上面的连接改为:

http://localhost:8080/xss/XssServlet?username=A%26T%20Plastic,后台才能获得正确的值:username==A&T Plastic。

因为username的值含有了uri的保留字符,所以需要进行编码。

例如,字符":"被转义字符"%3A"代替

之 所以有上面两个不同的函数,是因为我们在写JS代码的时候对URI进行两种不同的编码处理需求。encodeURI可以用来对完整的URI字符串进行编码处理。而encodeURIComponent可以对URI中一个部分进行编码,从而让这一部分可以包含一些URI保留字符。这在我们日常编程中是十分有用的。比如下面的URI字符串:

http://www.mysite.com/send-to-friend.aspx?url=http://www.mysite.com/product.html

在 这个URI字符串中。send-to-friend.aspx页面会创建HTML格式的邮件内容,里面会包含一个链接,这个链接的地址就是上面URI字符 串中的url值。显然上面的url值是URI中的一个部分,里面包含了URI保留关键字符。我们必须调用encodeURIComponent对它进行编 码后使用,否则上面的URI字符串会被浏览器认为是一个无效的URI。

正确的URI应该如下:

http://www.mysite.com/send-to-friend.aspx?url=http%3A%2F%2Fwww.mysite.com%2Fproduct.html

最多使用的应为encodeURIComponent,它是将中文、韩文等特殊字符转换成utf-8格式的url编码,所以如果给后台传递参数需要使用encodeURIComponent时需要后台解码对utf-8支持form表单中的编码方式和当前页面编码方式相同

     escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z

     encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z

     encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z

例子:

alert(encodeURIComponent("A&T Plastic")); //A%26T%20Plastic
alert(escape("A&T Plastic"));  //A%26T%20Plastic
alert(encodeURI("A&T Plastic"));  //A&T%20Plastic
alert(escape("A&T Plastic中"));  //A%26T%20Plastic%uFFFD%uFFFD

我们看到 encodeURI 没有编码uri的保留字符 & ,'中'被编码成了 %uFFFD%uFFFD

encodeURIComponent 就编码了保留字符&

url的编码经常会被利用在XSS攻击中来绕过服务端的 xss filter, 对有威胁的url进行伪装,让不明用户去点击。

所以如果只是处理 get 提交时url地址中的乱码问题,可以使用 encodeURI 来编码整个url;

如果参数中含有保留字符需要进行编码,那么应该使用 encodeURIComponent 来编码部分参数;

如果使用encodeURIComponent来处理中文乱码,那么前端需要使用两次encodeURIComponent(encodeURIComponent('你好')),Java后端使用:

java.Net.URLDecoder.decode(param,"UTF-8");

来解码;

参考:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue基础之事件v-onclick="函数"用法示例
Mar 11 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 #Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
80%应聘者都不及格的JS面试题
Mar 21 #Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 #Javascript
You might like
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
php实现登陆模块功能示例
2016/10/20 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
jquery JSON的解析方式
2009/07/25 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
python图像常规操作
2017/11/11 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python eventlet绿化和patch原理
2020/11/21 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
银行类自荐信
2014/02/04 职场文书
五心教育心得体会
2014/09/04 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers