Comment encoder une URL en toute sécurité à l'aide de JavaScript de manière à ce qu'elle puisse être placée dans une chaîne GET?

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;

Je suppose que vous devez coder la myUrlvariable sur cette deuxième ligne?

Découvrez la fonction intégrée encodeURIComponent (str) et encodeURI (str) .
Dans votre cas, cela devrait fonctionner:

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

Vous avez trois options:

• escape() ne codera pas: @*/+

• encodeURI() ne codera pas: ~!@#$&*()=:/,;?+'

• encodeURIComponent() ne codera pas: ~!*()'

Mais dans votre cas, si vous souhaitez passer une URL dans un GETparamètre d'une autre page, vous devez utiliser escapeou encodeURIComponent, mais pas encodeURI.

Voir la question Stack Overflow Best practice: escape, ou encodeURI / encodeURIComponent pour une discussion plus approfondie.

Restez avec encodeURIComponent(). La fonction encodeURI()ne prend pas la peine de coder de nombreux caractères qui ont une importance sémantique dans les URL (par exemple "#", "?" Et "&"). escape()est obsolète et ne prend pas la peine de coder les caractères "+", qui seront interprétés comme des espaces codés sur le serveur (et, comme d'autres l'ont souligné ici, ne codent pas correctement les caractères non ASCII par URL).

Il y a une belle explication de la différence entre encodeURI()etencodeURIComponent() ailleurs. Si vous voulez coder quelque chose afin qu'il puisse être inclus en toute sécurité en tant que composant d'un URI (par exemple en tant que paramètre de chaîne de requête), vous voulez l'utiliser encodeURIComponent().

La meilleure réponse est d'utiliser encodeURIComponentsur des valeurs dans la chaîne de requête (et nulle part ailleurs).

Cependant, je trouve que de nombreuses API veulent remplacer "" par "+", j'ai donc dû utiliser ce qui suit:

const value = encodeURIComponent(value).replace('%20','+');
const url = 'http://example.com?lang=en&key=' + value

escapeest implémenté différemment dans différents navigateurs et encodeURIn'encode pas beaucoup de caractères (comme # et même /) - il est fait pour être utilisé sur un URI / URL complet sans le casser - ce qui n'est pas super utile ou sécurisé.

Et comme @Jochem le souligne ci-dessous, vous voudrez peut-être utiliser encodeURIComponent()un nom de dossier (pour chaque), mais pour une raison quelconque, ces API ne semblent pas vouloir +figurer dans les noms de dossier, donc tout simplement vieux encodeURIComponentfonctionne très bien.

Exemple:

const escapedValue = encodeURIComponent(value).replace('%20','+');
const escapedFolder = encodeURIComponent('My Folder'); // no replace
const url = `http://example.com/${escapedFolder}/?myKey=${escapedValue}`;

Si vous utilisez jQuery, j'irais pour la $.paramméthode. Son URL code un champ de mappage d'objet en valeurs, ce qui est plus facile à lire que d'appeler une méthode d'échappement sur chaque valeur.

$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1

encodeURIComponent () est la voie à suivre.

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

MAIS vous devez garder à l'esprit qu'il existe de petites différences par rapport à la version php urlencode()et comme @CMS l'a mentionné, il n'encodera pas tous les caractères. Les gars sur http://phpjs.org/functions/urlencode/ ont rendu js l'équivalent de phpencode():

function urlencode(str) {
  str = (str + '').toString();

  // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
  // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
  return encodeURIComponent(str)
    .replace('!', '%21')
    .replace('\'', '%27')
    .replace('(', '%28')
    .replace(')', '%29')
    .replace('*', '%2A')
    .replace('%20', '+');
}

Pour encoder une URL, comme cela a été dit précédemment, vous avez deux fonctions:

encodeURI()

et

encodeURIComponent()

La raison pour laquelle les deux existent est que le premier préserve l'URL avec le risque de laisser trop de choses sans échapper, tandis que le second code tout ce qui est nécessaire.

Avec le premier, vous pouvez copier l'URL nouvellement échappée dans la barre d'adresse (par exemple) et cela fonctionnera. Cependant, vos «&» non échappés interféreraient avec les délimiteurs de champ, les «=» interféreraient avec les noms et les valeurs des champs et les «+» ressembleraient à des espaces. Mais pour les données simples lorsque vous souhaitez conserver la nature de l'URL de ce que vous échappez, cela fonctionne.

La seconde est tout ce que vous devez faire pour vous assurer que rien dans votre chaîne n'interfère avec une URL. Il laisse divers caractères sans importance échappés afin que l'URL reste aussi lisible que possible sans interférence. Une URL encodée de cette façon ne fonctionnera plus comme URL sans la déséchapper.

Donc, si vous pouvez prendre le temps, vous voulez toujours utiliser encodeURIComponent () - avant d'ajouter des paires nom / valeur, encodez à la fois le nom et la valeur en utilisant cette fonction avant de l'ajouter à la chaîne de requête.

J'ai du mal à trouver des raisons d'utiliser l'encodeURI () - je laisse cela aux gens les plus intelligents.

Le même genre de chose que j'ai essayé avec du javascript normal

function fixedEncodeURIComponent(str){
     return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

Manière élégante

À mon humble avis, la façon la plus élégante d'encoder des paramètres de requête est de créer un objet avec des paramètres tels que

const queryParams = { param1: 'value1', param2: 'value2' }

puis l'encode en utilisant:

const queryString = new URLSearchParams(queryParams).toString()

comme mentionné dans cette réponse: https://stackoverflow.com/a/53171438/7284582

Pour éviter le double encodage, c'est une bonne idée de décoder l'URL avant l'encodage (si vous traitez par exemple des URL saisies par l'utilisateur, qui peuvent déjà être encodées).

Disons que nous avons abc%20xyz 123en entrée (un espace est déjà encodé):

encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"

Qu'est-ce que le codage d'URL:

Une URL doit être codée lorsqu'il y a des caractères spéciaux à l'intérieur de l'URL. Par exemple:

console.log(encodeURIComponent('?notEncoded=&+'));

On peut observer dans cet exemple que tous les caractères sauf la chaîne notEncodedsont encodés avec des signes%. L'encodage d'URL est également connu sous le nom d' encodage en pourcentage car il échappe à tous les caractères spéciaux avec un%. Ensuite, après ce signe%, chaque caractère spécial a un code unique

Pourquoi avons-nous besoin d'un encodage URL:

Certains caractères ont une valeur spéciale dans une chaîne URL. Par exemple, le? Le caractère indique le début d'une chaîne de requête. Afin de localiser avec succès une ressource sur le Web, il est nécessaire de faire la distinction entre le moment où un caractère est censé faire partie d'une chaîne ou d'une partie de la structure d'URL.

Comment pouvons-nous réaliser le codage URL dans JS:

JS offre un tas de fonctions utilitaires intégrées que nous pouvons utiliser pour encoder facilement les URL. Ce sont deux options pratiques:

1. encodeURIComponent(): Prend un composant d'un URI comme argument et retourne la chaîne URI codée.
2. encodeURI(): Prend un URI comme argument et renvoie la chaîne URI codée.

Exemple et mises en garde:

N'oubliez pas de ne pas transmettre l'intégralité de l'URL (y compris le schéma, par exemple https: //) dans encodeURIComponent(). Cela peut en fait le transformer en une URL non fonctionnelle. Par exemple:

// for a whole URI don't use encodeURIComponent it will transform
// the / characters and the URL won't fucntion properly
console.log(encodeURIComponent("http://www.random.com/specials&char.html"));

// instead use encodeURI for whole URL's
console.log(encodeURI("http://www.random.com/specials&char.html"));

Nous pouvons observer f nous avons mis l'URL entière dans encodeURIComponentla mesure où les barres obliques (/) sont également converties en caractères spéciaux. Cela entraînera l'URL de ne plus fonctionner correctement.

Par conséquent (comme son nom l'indique), utilisez:

1. encodeURIComponent sur une certaine partie d'une URL que vous souhaitez encoder.
2. encodeURI sur une URL entière que vous souhaitez encoder.

Rien n'a fonctionné pour moi. Tout ce que je voyais était le code HTML de la page de connexion, revenant du côté client avec le code 200. (302 au début, mais la même demande Ajax chargeant la page de connexion dans une autre demande Ajax, qui était censée être une redirection plutôt que de charger plain texte de la page de connexion).

Dans le contrôleur de connexion, j'ai ajouté cette ligne:

Response.Headers["land"] = "login";

Et dans le gestionnaire global Ajax, j'ai fait ceci:

$(function () {
    var $document = $(document);
    $document.ajaxSuccess(function (e, response, request) {
        var land = response.getResponseHeader('land');
        var redrUrl = '/login?ReturnUrl=' + encodeURIComponent(window.location);
        if(land) {
            if (land.toString() === 'login') {
                window.location = redrUrl;
            }
        }
    });
});

Maintenant, je n'ai aucun problème, et cela fonctionne comme un charme.

Encoder la chaîne d'URL

    var url = $ ( emplacement ). attr ( «href» ); // obtenir l'url actuelle // OU var url = 'folder / index.html? param = # 23dd & noob = yes' ; // ou spécifiez-en un 
    
      


var encodedUrl = encodeURIComponent(url);
console.log(encodedUrl);
//outputs folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes


for more info go http://www.sitepoint.com/jquery-decode-url-string

Voici une démo en direct de JS encodeURIComponent()et des decodeURIComponent()fonctions intégrées:

<!DOCTYPE html>
<html>
  <head>
    <style>
      textarea{
        width:30%;
        height:100px;
      }
    </style>
    <script>
      // encode string to base64
      function encode()
      {
        var txt = document.getElementById("txt1").value;
        var result = btoa(txt);
        document.getElementById("txt2").value = result;
      }
      // decode base64 back to original string
      function decode()
      {
        var txt = document.getElementById("txt3").value;
        var result = atob(txt);
        document.getElementById("txt4").value = result;
      }
    </script>
  </head>
  <body>
    <div>
      <textarea id="txt1">Some text to decode
      </textarea>
    </div>
    <div>
      <input type="button" id="btnencode" value="Encode" onClick="encode()"/>
    </div>
    <div>
      <textarea id="txt2">
      </textarea>
    </div>
    <br/>
    <div>
      <textarea id="txt3">U29tZSB0ZXh0IHRvIGRlY29kZQ==
      </textarea>
    </div>
    <div>
      <input type="button" id="btndecode" value="Decode" onClick="decode()"/>
    </div>
    <div>
      <textarea id="txt4">
      </textarea>
    </div>
  </body>
</html>

Vous pouvez utiliser la bibliothèque esapi et encoder votre URL en utilisant la fonction ci-dessous. La fonction garantit que «/» n'est pas perdu lors de l'encodage tandis que le reste du contenu du texte est encodé:

function encodeUrl(url)
{
    String arr[] = url.split("/");
    String encodedUrl = "";
    for(int i = 0; i<arr.length; i++)
    {
        encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
        if(i<arr.length-1) encodedUrl = encodedUrl + "/";
    }
    return url;
}

https://www.owasp.org/index.php/ESAPI_JavaScript_Readme

Utilisez la fixedEncodeURIComponentfonction pour se conformer strictement à la RFC 3986 :

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

Vous ne devez pas utiliser encodeURIComponent()directement.

Jetez un oeil à RFC3986: identificateur de ressource uniforme (URI): syntaxe générique

sub-delims = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="

Le but des caractères réservés est de fournir un ensemble de caractères de délimitation qui se distinguent des autres données dans un URI.

Ces caractères réservés de la définition d'URI dans RFC3986 NE SONT PAS échappés par encodeURIComponent().

Documents Web MDN: encodeURIComponent ()

Pour être plus rigoureux dans l'adhésion à la RFC 3986 (qui réserve!, ', (,) Et *), même si ces caractères n'ont pas d'utilisations de délimitation URI formalisées, les éléments suivants peuvent être utilisés en toute sécurité:

Utilisez la fonction MDN Web Docs ...

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}