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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
Prototype使用指南之dom.js
Jan 10 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
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面试题附答案
2009/01/07 PHP
使用php来实现网络服务
2009/09/15 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
python中readline判断文件读取结束的方法
2014/11/08 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
学院书画协会部门岗位职责
2013/12/01 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
英文慰问信范文
2015/03/24 职场文书
团拜会主持词
2015/07/04 职场文书
文艺节目主持词
2015/07/06 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript