Comment encoder les paramètres d'URL?

J'essaie de transmettre des paramètres à une URL qui ressemble à ceci:

http://www.foobar.com/foo?imageurl=

Et je veux passer les paramètres tels qu'une URL d'image qui est générée elle-même par une autre API, et le lien pour l'image se révèle comme:

http://www.image.com/?username=unknown&password=unknown

Cependant, lorsque j'essaye d'utiliser l'URL:

http://www.foobar.com/foo?imageurl=http://www.image.com/?username=unknown&password=unknown

Ça ne marche pas.

J'ai également essayé d'utiliser encodeURI()et encodeURIComponent()sur l'imageURL, et cela ne fonctionne pas non plus.

Avec PHP

echo urlencode("http://www.image.com/?username=unknown&password=unknown");

Résultat

http%3A%2F%2Fwww.image.com%2F%3Fusername%3Dunknown%26password%3Dunknown

Avec Javascript:

var myUrl = "http://www.image.com/?username=unknown&password=unknown";
var encodedURL= "http://www.foobar.com/foo?imageurl=" + encodeURIComponent(myUrl);

DÉMO: http://jsfiddle.net/Lpv53/

En utilisant le nouvel ES6 Object.entries(), cela en fait un petit map/ amusant imbriqué join:

const encodeGetParams = p => 
  Object.entries(p).map(kv => kv.map(encodeURIComponent).join("=")).join("&");

const params = {
  user: "María Rodríguez",
  awesome: true,
  awesomeness: 64,
  "ZOMG+&=*(": "*^%*GMOZ"
};

console.log("https://example.com/endpoint?" + encodeGetParams(params))

Vous ne devriez pas utiliser encodeURIComponent()ou encodeURI(). Vous devez utiliser fixedEncodeURIComponent()et fixedEncodeURI(), conformément à la documentation MDN.

Concernant encodeURI()...

Si l'on souhaite suivre la RFC3986 plus récente pour les URL, qui rend les crochets réservés (pour IPv6) et donc non codés lors de la formation de quelque chose qui pourrait faire partie d'une URL (comme un hôte), l'extrait de code suivant peut aider:

function fixedEncodeURI(str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }

Concernant encodeURIComponent()...

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

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

Alors, quelle est la difference? fixedEncodeURI()et fixedEncodeURIComponent()convertir le même ensemble de valeurs, mais fixedEncodeURIComponent()convertit également cet ensemble: +@?=:*#;,$&. Cet ensemble est utilisé dans les GETparamètres ( &, +, etc.), les balises d'ancrage ( #), les balises génériques ( *), pièces e - mail / nom d' utilisateur ( @), etc ..

Par exemple - Si vous utilisez encodeURI(), user@example.com/?email=me@homen'enverra pas correctement le second @au serveur, sauf pour votre navigateur gérant la compatibilité (comme Chrome le fait naturellement souvent).