URL in JavaScript kodieren?

Question

Wie kodiert man eine URL sicher mit JavaScript, so dass sie in eine GET-Zeichenfolge eingefügt werden kann?

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

Ich gehe davon aus, dass Sie die Kodierung der myUrl Variable in dieser zweiten Zeile?

Answer 1

Sehen Sie sich die integrierte Funktion encodeURIComponent(str) y encodeURI(str) .
In Ihrem Fall sollte dies funktionieren:

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

Answer 2

Sie haben drei Möglichkeiten:

• escape() nicht kodiert werden: @*/+

• encodeURI() nicht kodiert werden: ~!@#$&*()=:/,;?+'

• encodeURIComponent() nicht kodiert werden: ~!*()'

Aber in Ihrem Fall, wenn Sie eine URL in eine GET Parameter einer anderen Seite, sollten Sie escape o encodeURIComponent , aber nicht encodeURI .

Siehe Stack Overflow Frage Bewährte Praxis: Escape oder encodeURI / encodeURIComponent für weitere Diskussionen.

Answer 3

Bleiben Sie bei encodeURIComponent() . Die Funktion encodeURI() macht sich nicht die Mühe, viele Zeichen zu kodieren, die in URLs semantische Bedeutung haben (z. B. "#", "?" und "&"). escape() ist veraltet und macht sich nicht die Mühe, "+"-Zeichen zu kodieren, die auf dem Server als kodierte Leerzeichen interpretiert werden (und kodiert, wie von anderen hier bemerkt, nicht-ASCII-Zeichen in der URL nicht richtig).

Es gibt eine schöne Erklärung des Unterschieds zwischen encodeURI() y encodeURIComponent() anderswo. Wenn Sie etwas so kodieren wollen, dass es sicher als Bestandteil eines URI (z. B. als Abfrage-String-Parameter) aufgenommen werden kann, sollten Sie encodeURIComponent() .

Answer 4

Die beste Antwort ist die Verwendung von encodeURIComponent auf Werte in der Abfragezeichenfolge (und nirgendwo sonst).

Ich habe jedoch festgestellt, dass viele APIs " " durch "+" ersetzen wollen, so dass ich das Folgende verwenden musste:

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

escape ist in verschiedenen Browsern unterschiedlich implementiert und encodeURI kodiert nicht viele Zeichen (wie # und sogar /) - es ist dafür gemacht, auf eine vollständige URI/URL angewendet zu werden, ohne sie zu zerstören - was nicht besonders hilfreich oder sicher ist.

Und wie @Jochem weiter unten anmerkt, sollten Sie vielleicht encodeURIComponent() auf einen (jeden) Ordnernamen, aber aus irgendeinem Grund scheinen diese APIs nicht zu wollen + in Ordnernamen so einfach wie möglich encodeURIComponent funktioniert hervorragend.

Beispiel:

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

Answer 5

Ich würde vorschlagen, Folgendes zu verwenden qs npm-Paket

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

es ist einfacher, mit JS-Objekt zu verwenden und es gibt Ihnen richtige URL-Kodierung für alle Parameter

Wenn Sie jQuery verwenden, würde ich mich für $.param Methode. Die URL kodiert ein Objekt, das Felder auf Werte abbildet, was einfacher zu lesen ist als der Aufruf einer Escape-Methode für jeden Wert.

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