Quand est-ce que vous êtes censé utiliser l'échappement au lieu de encodeURI / encodeURIComponent?

Lors de l'encodage d'une chaîne de requête à envoyer à un serveur Web – lorsque vous utilisez escape() et quand utilisez-vous encodeURI() ou encodeURIComponent() :

Utilisez l'échappatoire:

 escape("% +&="); 

OU

Utilisez encodeURI () / encodeURIComponent ()

 encodeURI("http://www.google.com?var1=value1&var2=value2"); encodeURIComponent("var1=value1&var2=value2"); 

échapper()

Ne l'utilisez pas, car il a été obsolète depuis ECMAScript v3.

EncodeURI ()

Utilisez encodeURI lorsque vous souhaitez une URL de travail. Faire cet appel:

 encodeURI("http://www.google.com/a file with spaces.html") 

obtenir:

 http://www.google.com/a%20file%20with%20spaces.html 

N'appelez pas encodeURIComponent car il détruirait l'URL et le retour

 http%3A%2F%2Fwww.google.com%2Fa%20file%20with%20spaces.html 

EncodeURIComponent ()

Utilisez encodeURIComponent lorsque vous souhaitez coder un paramètre URL.

 param1 = encodeURIComponent("http://example.com/?a=12&b=55") 

Ensuite, vous pouvez créer l'URL dont vous avez besoin:

 url = "http://domain.com/?param1=" + param1 + "&param2=99"; 

Et vous obtiendrez cette URL complète:

http://www.domain.com/?param1=http%3A%2F%2Fxyz.com%2F%Ffa%3D12%26b%3D55&param2=99

Notez que encodeURIComponent n'échappe pas au ' caractère ' . Un bug commun est de l'utiliser pour créer des attributs html tels que href='MyUrl' , qui pourrait subir un bogue d'injection. Si vous construisez html à partir de chaînes, utilisez " au lieu de ' pour les citations d'attributs, ou ajoutez une couche supplémentaire d'encodage ( ' peut être codé en% 27).

Pour plus d'informations sur ce type de codage, vous pouvez vérifier: http://en.wikipedia.org/wiki/Percent-encoding

La différence entre encodeURI() et encodeURIComponent() est exactement 11 caractères codés par encodeURIComponent mais pas par encodeURI:

Table avec les dix différences entre encodeURI et encodeURIComponent

J'ai généré cette table facilement avec console.table dans Google Chrome avec ce code:

 var arr = []; for(var i=0;i<256;i++) { var char=String.fromCharCode(i); if(encodeURI(char)!==encodeURIComponent(char)) { arr.push({ character:char, encodeURI:encodeURI(char), encodeURIComponent:encodeURIComponent(char) }); } } console.table(arr); 

J'ai trouvé cet article éclairant: Javascript Madness: Query String Parsing

Je l'ai trouvé lorsque j'essayais de comprendre pourquoi DecodeURIComponent ne decodait pas '+' correctement. Voici un extrait:

 String: "A + B" Expected Query String Encoding: "A+%2B+B" escape("A + B") = "A%20+%20B" Wrong! encodeURI("A + B") = "A%20+%20B" Wrong! encodeURIComponent("A + B") = "A%20%2B%20B" Acceptable, but strange Encoded String: "A+%2B+B" Expected Decoding: "A + B" unescape("A+%2B+B") = "A+++B" Wrong! decodeURI("A+%2B+B") = "A+++B" Wrong! decodeURIComponent("A+%2B+B") = "A+++B" Wrong! 

EncodeURIComponent ne code pas -_.!~*'() , Ce qui provoque un problème lors de la publication de données à php dans la chaîne xml.

Par exemple:
<xml><text x="100" y="150" value="It's a value with single quote" /> </xml>

Évasion générale avec encodeURI
%3Cxml%3E%3Ctext%20x=%22100%22%20y=%22150%22%20value=%22It's%20a%20value%20with%20single%20quote%22%20/%3E%20%3C/xml%3E

Vous pouvez voir, la citation unique n'est pas encodée. Pour résoudre le problème, j'ai créé deux fonctions pour résoudre le problème dans mon projet, pour l'URL de codage:

 function encodeData(s:String):String{ return encodeURIComponent(s).replace(/\-/g, "%2D").replace(/\_/g, "%5F").replace(/\./g, "%2E").replace(/\!/g, "%21").replace(/\~/g, "%7E").replace(/\*/g, "%2A").replace(/\'/g, "%27").replace(/\(/g, "%28").replace(/\)/g, "%29"); } 

Pour l'URL de décodage:

 function decodeData(s:String):String{ try{ return decodeURIComponent(s.replace(/\%2D/g, "-").replace(/\%5F/g, "_").replace(/\%2E/g, ".").replace(/\%21/g, "!").replace(/\%7E/g, "~").replace(/\%2A/g, "*").replace(/\%27/g, "'").replace(/\%28/g, "(").replace(/\%29/g, ")")); }catch (e:Error) { } return ""; } 

EncodeURI () – la fonction escape () est pour javascript échappant, pas HTTP.

Petit tableau de comparaison Java vs JavaScript vs. PHP.

 1. Java URLEncoder.encode (using UTF8 charset) 2. JavaScript encodeURIComponent 3. JavaScript escape 4. PHP urlencode 5. PHP rawurlencode char JAVA JavaScript --PHP--- [ ] + %20 %20 + %20 [!] %21 ! %21 %21 %21 [*] * * * %2A %2A ['] %27 ' %27 %27 %27 [(] %28 ( %28 %28 %28 [)] %29 ) %29 %29 %29 [;] %3B %3B %3B %3B %3B [:] %3A %3A %3A %3A %3A [@] %40 %40 @ %40 %40 [&] %26 %26 %26 %26 %26 [=] %3D %3D %3D %3D %3D [+] %2B %2B + %2B %2B [$] %24 %24 %24 %24 %24 [,] %2C %2C %2C %2C %2C [/] %2F %2F / %2F %2F [?] %3F %3F %3F %3F %3F [#] %23 %23 %23 %23 %23 [[] %5B %5B %5B %5B %5B []] %5D %5D %5D %5D %5D ---------------------------------------- [~] %7E ~ %7E %7E ~ [-] - - - - - [_] _ _ _ _ _ [%] %25 %25 %25 %25 %25 [\] %5C %5C %5C %5C %5C ---------------------------------------- char -JAVA- --JavaScript-- -----PHP------ [ä] %C3%A4 %C3%A4 %E4 %C3%A4 %C3%A4 [ф] %D1%84 %D1%84 %u0444 %D1%84 %D1%84 

N'oubliez pas qu'ils encodent tous les différents ensembles de caractères, et sélectionnez celui dont vous avez besoin de manière appropriée. EncodeURI () encode moins de caractères que encodeURIComponent (), qui encode les caractères moins (et aussi différents, à dannyp) que escape ().

Je recommande de ne pas utiliser l'une de ces méthodes telles quelles. Écrivez votre propre fonction qui fait le bon choix.

MDN a donné un bon exemple sur l'encodage url montré ci-dessous.

 var fileName = 'my file(2).txt'; var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName); console.log(header); // logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt" function encodeRFC5987ValueChars (str) { return encodeURIComponent(str). // Note that although RFC3986 reserves "!", RFC5987 does not, // so we do not need to escape it replace(/['()]/g, escape). // ie, %27 %28 %29 replace(/\*/g, '%2A'). // The following are not required for percent-encoding per RFC5987, // so we can allow for a little better readability over the wire: |`^ replace(/%(?:7C|60|5E)/g, unescape); } 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

Dans le but d'encoder, javascript a donné trois fonctions intégrées:

  1. Escape () – ne code pas @*/+ Cette méthode est obsolète après l'ECMA 3 afin qu'elle soit évitée.

  2. EncodeURI () – n'encode pas ~!@#$&*()=:/,;?+' Il suppose que l'URI est un URI complet, donc ne code pas les caractères réservés qui ont une signification particulière dans l'URI. Cette méthode est utilisée lorsque l'intention est de convertir l'URL complète au lieu d'un segment spécial d'URL. Exemple – encodeURI('http://stackoverflow.com'); Donnera – http://stackoverflow.com

  3. EncodeURIComponent () – ne pas coder - _ . ! ~ * ' ( ) - _ . ! ~ * ' ( ) - _ . ! ~ * ' ( ) Cette fonction code un composant Uniform Resource Identifier (URI) en remplaçant chaque instance de certains caractères par une, deux, trois ou quatre séquences d'échappement représentant le codage UTF-8 du personnage. Cette méthode devrait être utilisée pour convertir un composant de l'URL. Par exemple, une entrée utilisateur doit être ajoutée Exemple – encodeURI('http://stackoverflow.com'); Donnera – http% 3A% 2F% 2Fstackoverflow.com

Tout ce codage est effectué dans UTF 8, c'est-à-dire que les caractères seront convertis au format UTF-8.

EncodeURIComponent diffère de encodeURI en ce qu'il encode les caractères réservés et le numéro de numéro de encodeURI

J'ai constaté que l'expérimentation des différentes méthodes est une bonne vérification de la santé mentale, même après avoir bien compris leurs diverses utilisations et leurs capacités.

À cette fin, j'ai trouvé ce site extrêmement utile pour confirmer mes soupçons que je fais quelque chose de manière appropriée. Il s'est également avéré utile pour décoder une chaîne encodeURIComponent'ed qui peut être assez difficile à interpréter. Un excellent signet pour avoir:

http://www.the-art-of-web.com/javascript/escape/

J'ai cette fonction …

 var escapeURIparam = function(url) { if (encodeURIComponent) url = encodeURIComponent(url); else if (encodeURI) url = encodeURI(url); else url = escape(url); url = url.replace(/\+/g, '%2B'); // Force the replacement of "+" return url; };