Wie codieren Sie eine URL sicher mit JavaScript, sodass sie in einen GET-String 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 nehme an, dass du das codieren musst myUrl Variable in dieser zweiten Zeile?

Sehen Sie sich die integrierte Funktion an encodeURIComponent(str) und encodeURI(str).
In deinem Fall sollte das funktionieren:

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

Sie haben drei Möglichkeiten:

• escape() wird nicht kodieren: @*/+

• encodeURI() wird nicht kodieren: [email protected]#$&*()=:/,;?+'

• encodeURIComponent() wird nicht kodieren: ~!*()'

Aber in Ihrem Fall, wenn Sie eine passieren wollen URL in ein GET Parameter einer anderen Seite, die Sie verwenden sollten escape oder encodeURIComponentaber nicht encodeURI.

Siehe Stack Overflow-Frage Best Practice: Escape oder encodeURI / encodeURIComponent zur weiteren Diskussion.

Bleiben bei encodeURIComponent(). Die Funktion encodeURI() macht sich nicht die Mühe, viele semantisch wichtige Zeichen in URLs zu kodieren (z. B. “#”, “?” und “&”). escape() ist veraltet und macht sich nicht die Mühe, “+”-Zeichen zu codieren, die auf dem Server als codierte Leerzeichen interpretiert werden (und, wie von anderen hier angemerkt, keine ordnungsgemäße URL-Codierung von Nicht-ASCII-Zeichen).

Es gibt eine schöne Erklärung für den Unterschied zwischen encodeURI() und encodeURIComponent() anderswo. Wenn Sie etwas so codieren möchten, dass es sicher als Bestandteil eines URI (z. B. als Parameter einer Abfragezeichenfolge) eingefügt werden kann, verwenden Sie encodeURIComponent().

Die beste Antwort ist zu verwenden encodeURIComponent an Werte in der Abfragezeichenfolge (und nirgendwo sonst).

Ich finde jedoch, dass viele APIs ” ” durch “+” ersetzen wollen, also musste ich Folgendes verwenden:

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

escape ist in verschiedenen Browsern unterschiedlich implementiert und encodeURI codiert nicht viele Zeichen (wie # und sogar /) – es ist dafür gemacht, auf einer vollständigen URI/URL verwendet zu werden, ohne es zu brechen – was nicht besonders hilfreich oder sicher ist.

Und wie @Jochem unten betont, möchten Sie vielleicht verwenden encodeURIComponent() auf einen (jeden) Ordnernamen, aber aus irgendeinem Grund scheinen diese APIs nicht zu wollen + in Ordnernamen so einfach alt encodeURIComponent funktioniert super.

Beispiel:

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

Ich würde vorschlagen 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-Objekten zu verwenden und bietet Ihnen die richtige URL-Codierung für alle Parameter

Wenn Sie jQuery verwenden, würde ich gehen $.param Methode. Es URL-codiert ein Objekt, das Felder Werten zuordnet, was einfacher zu lesen ist, als eine Escape-Methode für jeden Wert aufzurufen.

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

Moderne Lösung (2021)

Da die anderen Antworten geschrieben wurden, die URLSearchParams API wurde eingeführt. Es kann wie folgt verwendet werden:

const queryParams = { param1: 'value1', param2: 'value2' }
const queryString = new URLSearchParams(queryParams).toString()
// 'param1=value1&param2=value2'

Es codiert auch Nicht-URL-Zeichen.

Für Ihr spezifisches Beispiel würden Sie es wie folgt verwenden:

const myUrl = "http://example.com/index.html?param=1&anotherParam=2";
const myOtherUrl = new URL("http://example.com/index.html");
myOtherUrl.search = new URLSearchParams({url: myUrl});
console.log(myOtherUrl.toString());

Diese Lösung wird auch hier und hier erwähnt.

encodeURIComponent() ist der richtige Weg.

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

ABER Sie sollten bedenken, dass es kleine Unterschiede zur PHP-Version gibt urlencode() und wie @CMS erwähnt, wird es nicht jedes Zeichen codieren. Jungs bei http://phpjs.org/functions/urlencode/ js äquivalent zu gemacht 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', '+');
}