Wie codiere ich URL-Parameter?

123

Ich versuche, Parameter an eine URL zu übergeben, die folgendermaßen aussieht:

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

Und ich möchte die Parameter wie eine Bild-URL übergeben, die von einer anderen API selbst generiert wird, und der Link für das Bild stellt sich wie folgt heraus:

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

Wenn ich jedoch versuche, die URL zu verwenden:

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

Es funktioniert nicht.

Ich habe auch versucht mit encodeURI()und encodeURIComponent()auf dem imageURL, und das auch nicht funktioniert.

Apoorv Saxena
quelle
Welche Sprache generiert die URL? JavaScript?
Phil
2
Beachten Sie, dass Sie keine Kennwörter in URLs einfügen sollten, auch nicht bei Verwendung von https, da jeder Router zwischen Client und Server die gesamte URL sieht.
Fabb

Antworten:

171

Mit PHP

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

Ergebnis

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

Mit Javascript:

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

DEMO: http://jsfiddle.net/Lpv53/

Niels
quelle
37

Mit dem neuen ES6 Object.entries()sorgt es für ein lustiges kleines verschachteltes map/ 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))

Kyle VanderBeek
quelle
1

Sie sollten nicht verwenden encodeURIComponent()oder encodeURI(). Sie sollten fixedEncodeURIComponent()und fixedEncodeURI()gemäß der MDN-Dokumentation verwenden.

In Bezug auf encodeURI()...

Wenn Sie dem neueren RFC3986 für URLs folgen möchten, bei dem eckige Klammern reserviert (für IPv6) und daher nicht codiert werden, wenn etwas gebildet wird, das Teil einer URL sein könnte (z. B. ein Host), kann das folgende Codeausschnitt hilfreich sein:

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

In Bezug auf encodeURIComponent()...

Um bei der Einhaltung von RFC 3986 (das reserviert !, ', (,) Und *) strenger zu sein, kann Folgendes sicher verwendet werden, obwohl diese Zeichen keine formalisierten URI-Begrenzungsverwendungen haben:

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

Was ist der Unterschied? fixedEncodeURI()und fixedEncodeURIComponent()konvertieren Sie den gleichen Satz von Werten, fixedEncodeURIComponent()konvertieren Sie aber auch diesen Satz : +@?=:*#;,$&. Dieser Satz wird in verwendet GETParameter ( &, +usw.), Anker - Tags ( #), Wildcard - Tags ( *), E - Mail / Benutzername Teile ( @), etc ..

Beispiel: Wenn Sie verwenden encodeURI(), [email protected]/?email=me@homewird die Sekunde nicht ordnungsgemäß @an den Server gesendet, außer wenn Ihr Browser die Kompatibilität übernimmt (wie Chrome dies natürlich häufig tut).

HoldOffHunger
quelle
Was meinst du damit "except for your browser handling the compatibility"?
Stephan
@Stephan: Wenn zum Beispiel site.com?formula=a+b=cbeim Produzieren gearbeitet formula=>a+b=cwird, verstößt dies gegen die Spezifikation, aber wenn es funktioniert, liegt es daran, dass Chrome / etc. kann den Spezifikationsfehler der URL usw. erkennen und so weiter, w / [email protected][email protected].
HoldOffHunger vor