js中編碼函數(shù):escape,encodeURI與encodeURIComponent詳解
1、eacape(): 該方法不會(huì)對(duì) ASCII 字母和數(shù)字進(jìn)行編碼,也不會(huì)對(duì)下面這些 ASCII 標(biāo)點(diǎn)符號(hào)進(jìn)行編碼: * @ - _ + . / 。其他所有的字符都會(huì)被轉(zhuǎn)義序列替換。其它情況下escape,encodeURI,encodeURIComponent編碼結(jié)果相同。
escape對(duì)0-255以外的unicode值進(jìn)行編碼時(shí)輸出%u****格式
可以使用 unescape() 對(duì) escape() 編碼的字符串進(jìn)行解碼。
ECMAScript v3 反對(duì)使用該方法,應(yīng)用使用 decodeURI() 和 decodeURIComponent() 替代它。
2、encodeURI 和 encodeURIComponent
encodeURI 和 encodeURIComponent都是ECMA-262標(biāo)準(zhǔn)中定義的函數(shù),所有兼容這個(gè)標(biāo)準(zhǔn)的語(yǔ)言(如JavaScript, ActionScript)都會(huì)實(shí)現(xiàn)這兩個(gè)函數(shù)。它們都是用來(lái)對(duì)URI (RFC-2396)字符串進(jìn)行編碼的全局函數(shù),但是它們的處理方式和使用場(chǎng)景有所不同。為了解釋它們的不同,我們首先需要理解RFC-2396中對(duì)于 URI中的字符分類:
1>保留字符(reserved characters):這類字符是URI中的保留關(guān)鍵字符,它們用于分割URI中的各個(gè)部分。這些字符是:";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | ","
2>Mark字符(mark characters):這類字符在RFC-2396中特別定義,但是沒(méi)有特別說(shuō)明用途,可能是和別的RFC標(biāo)準(zhǔn)相關(guān)。 這些字符是:"-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"
3>基本字符(alphanum characters):這類字符是URI中的主體部分,它包括所有的大寫字母、小寫字母和數(shù)字。
在介紹完上面三類字符串后,我們就非常容易來(lái)解釋encodeURI和encodeURIComponent函數(shù)的不同之處了:
encodeURI: 該函數(shù)對(duì)傳入字符串中的所有非(基本字符、Mark字符和保留字符)進(jìn)行轉(zhuǎn)義編碼(escaping)。所有的需要轉(zhuǎn)義的字符都按照UTF-8編碼轉(zhuǎn)化成 為一個(gè)、兩個(gè)或者三個(gè)字節(jié)的十六進(jìn)制轉(zhuǎn)義字符(%xx)。例如,字符空格" "轉(zhuǎn)換成為"%20"。在這種編碼模式下面,需要編碼的ASCII字符用一個(gè)字節(jié)轉(zhuǎn)義字符代替,在\u0080和\u007ff之間的字符用兩個(gè)字節(jié)轉(zhuǎn)義字符代替,其他16為Unicode字符用三個(gè)字節(jié)轉(zhuǎn)義字符代替。
encodeURIComponent: 該函數(shù)處理方式和encodeURI只有一個(gè)不同點(diǎn),那就是對(duì)于保留字符同樣做轉(zhuǎn)義編碼。這樣url中的參數(shù)和值才不會(huì)被#等特殊字符截?cái)唷?比如:http://localhost:8080/xss/XssServlet?username=A&T Plastic,該url,后臺(tái)的代碼:
String username = request.getParameter("username");
獲得的username值為A,而不是我們希望的 A&T Plastic。因?yàn)?username=A&T Plastic,其中含有了保留字符&,并且沒(méi)有進(jìn)行編碼,所以u(píng)sername的值被其給截?cái)嗔恕K哉_的做法是,對(duì)其進(jìn)行編碼:encodeURIComponent("A&T Plastic") == A%26T%20Plastic,然后將上面的連接改為:
http://localhost:8080/xss/XssServlet?username=A%26T%20Plastic,后臺(tái)才能獲得正確的值:username==A&T Plastic。
因?yàn)閡sername的值含有了uri的保留字符,所以需要進(jìn)行編碼。
例如,字符":"被轉(zhuǎn)義字符"%3A"代替
之 所以有上面兩個(gè)不同的函數(shù),是因?yàn)槲覀冊(cè)趯慗S代碼的時(shí)候?qū)RI進(jìn)行兩種不同的編碼處理需求。encodeURI可以用來(lái)對(duì)完整的URI字符串進(jìn)行編碼處理。而encodeURIComponent可以對(duì)URI中一個(gè)部分進(jìn)行編碼,從而讓這一部分可以包含一些URI保留字符。這在我們?nèi)粘>幊讨惺鞘钟杏玫?。比如下面的URI字符串:
http://www.mysite.com/send-to-friend.aspx?url=http://www.mysite.com/product.html
在 這個(gè)URI字符串中。send-to-friend.aspx頁(yè)面會(huì)創(chuàng)建HTML格式的郵件內(nèi)容,里面會(huì)包含一個(gè)鏈接,這個(gè)鏈接的地址就是上面URI字符 串中的url值。顯然上面的url值是URI中的一個(gè)部分,里面包含了URI保留關(guān)鍵字符。我們必須調(diào)用encodeURIComponent對(duì)它進(jìn)行編 碼后使用,否則上面的URI字符串會(huì)被瀏覽器認(rèn)為是一個(gè)無(wú)效的URI。
正確的URI應(yīng)該如下:
http://www.mysite.com/send-to-friend.aspx?url=http%3A%2F%2Fwww.mysite.com%2Fproduct.html
最多使用的應(yīng)為encodeURIComponent,它是將中文、韓文等特殊字符轉(zhuǎn)換成utf-8格式的url編碼,所以如果給后臺(tái)傳遞參數(shù)需要使用encodeURIComponent時(shí)需要后臺(tái)解碼對(duì)utf-8支持(form表單中的編碼方式和當(dāng)前頁(yè)面編碼方式相同)
escape不編碼字符有69個(gè):*,+,-,.,/,@,_,0-9,a-z,A-Z
encodeURI不編碼字符有82個(gè):!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z
encodeURIComponent不編碼字符有71個(gè):!, ',(,),*,-,.,_,~,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 沒(méi)有編碼uri的保留字符 & ,'中'被編碼成了 %uFFFD%uFFFD
encodeURIComponent 就編碼了保留字符& 。
url的編碼經(jīng)常會(huì)被利用在XSS攻擊中來(lái)繞過(guò)服務(wù)端的 xss filter, 對(duì)有威脅的url進(jìn)行偽裝,讓不明用戶去點(diǎn)擊。
所以如果只是處理 get 提交時(shí)url地址中的亂碼問(wèn)題,可以使用 encodeURI 來(lái)編碼整個(gè)url;
如果參數(shù)中含有保留字符需要進(jìn)行編碼,那么應(yīng)該使用 encodeURIComponent 來(lái)編碼部分參數(shù);
如果使用encodeURIComponent來(lái)處理中文亂碼,那么前端需要使用兩次encodeURIComponent(encodeURIComponent('你好')),Java后端使用:
java.Net.URLDecoder.decode(param,"UTF-8");
來(lái)解碼;
參考:
http://chabaoo.cn/article/22880.htm
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
JavaScript在for循環(huán)中綁定事件解決事件參數(shù)不同的情況
響應(yīng)一堆相似的事件,但是每個(gè)事件的參數(shù)都不同,在這種情況下就可以使用JavaScript 在for循環(huán)中綁定事件,下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-01-01javascript實(shí)現(xiàn)禁止右鍵和F12查看源代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)禁止右鍵和F12查看源代碼的代碼,需要的朋友可以參考下2014-12-12原生微信小程序/uniapp使用空格占位符無(wú)效的解決辦法
最近需要在字體中間加空白占位符,在嘗試使用 之后,還是不能使用,下面這篇文章主要給大家介紹了關(guān)于原生微信小程序/uniapp使用空格占位符無(wú)效的解決辦法,需要的朋友可以參考下2023-02-02window.open打開(kāi)頁(yè)面居中顯示的示例代碼
本篇文章主要是對(duì)window.open打開(kāi)頁(yè)面居中顯示的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12JavaScript顯示表單內(nèi)元素?cái)?shù)量的方法
這篇文章主要介紹了JavaScript顯示表單內(nèi)元素?cái)?shù)量的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04JS之Date對(duì)象和獲取系統(tǒng)當(dāng)前時(shí)間詳解
本篇文章主要是對(duì)JS之Date對(duì)象和獲取系統(tǒng)當(dāng)前時(shí)間進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01JavaScript中Require調(diào)用js的實(shí)例分享
下面小編就為大家?guī)?lái)一篇JavaScript中Require調(diào)用js的實(shí)例分享。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10