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

Moderne Lösung (2021)

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

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

Sie kodiert auch Nicht-URL-Zeichen.

Für Ihr konkretes 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 erwähnt これ y これ .

Answer 2

Ich denke, um wirklich sicher zu sein, sollten Sie im Jahr 2021 immer in Betracht ziehen, Ihre URLs mit URL() Schnittstelle . Es wird den größten Teil der Arbeit für Sie erledigen. Kommen wir nun zu Ihrem Code,

const baseURL = 'http://example.com/index.html';

const myUrl = new URL(baseURL);
myUrl.searchParams.append('param', '1');
myUrl.searchParams.append('anotherParam', '2');

const myOtherUrl = new URL(baseURL);
myOtherUrl.searchParams.append('url', myUrl.href);

console.log(myUrl.href);
// Outputs: http://example.com/index.html?param=1&anotherParam=2
console.log(myOtherUrl.href);
// Outputs: http://example.com/index.html?url=http%3A%2F%2Fexample.com%2Findex.html%3Fparam%3D1%26anotherParam%3D2
console.log(myOtherUrl.searchParams.get('url'));
// Outputs: http://example.com/index.html?param=1&anotherParam=2

Oder

const params = new URLSearchParams(myOtherUrl.search);

console.log(params.get('url'));
// Outputs: http://example.com/index.html?param=1&anotherParam=2

So etwas wird garantiert nicht scheitern.

Answer 3

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ähnte, wird nicht jedes Zeichen verschlüsselt. Die Jungs von http://phpjs.org/functions/urlencode/ macht js gleichwertig zu 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', '+');
}

Answer 4

Um eine URL zu kodieren, gibt es, wie bereits erwähnt, zwei Funktionen:

encodeURI()

und

encodeURIComponent()

Der Grund dafür, dass es beide gibt, ist, dass bei der ersten die URL erhalten bleibt, wobei das Risiko besteht, dass zu viele Dinge nicht kodiert werden, während bei der zweiten alles Notwendige kodiert wird.

Bei der ersten Variante könnten Sie die neue URL in die Adressleiste kopieren (zum Beispiel) und es würde funktionieren. Allerdings würden Ihre unescapten '&'s mit Feldbegrenzern interferieren, die '='s würden mit Feldnamen und -werten interferieren, und die '+'s würden wie Leerzeichen aussehen. Aber für einfache Daten, bei denen Sie die URL-Natur dessen, was Sie escapen, beibehalten wollen, funktioniert dies.

Die zweite ist alles, was Sie tun müssen, um sicherzustellen, dass nichts in Ihrer Zeichenkette mit einer URL interferiert. Es lässt verschiedene unwichtige Zeichen uneingekapselt, so dass die URL so gut wie möglich ohne Störungen lesbar bleibt. Eine auf diese Weise kodierte URL funktioniert nicht mehr als URL, wenn sie nicht unescaped wird.

Wenn Sie sich also die Zeit nehmen können, sollten Sie immer encodeURIComponent() verwenden - vor dem Hinzufügen von Name/Wert-Paaren kodieren Sie sowohl den Namen als auch den Wert mit dieser Funktion, bevor Sie ihn dem Abfrage-String hinzufügen.

Es fällt mir schwer, Gründe für die Verwendung von encodeURI() zu finden - das überlasse ich den klügeren Leuten.

Answer 5

Was ist URL-Kodierung?

Eine URL sollte verschlüsselt werden, wenn sich Sonderzeichen in der URL befinden. Zum Beispiel:

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

In diesem Beispiel ist zu beobachten, dass alle Zeichen außer der Zeichenkette notEncoded sind mit %-Zeichen kodiert. Die URL-Kodierung ist auch bekannt als prozentuale Kodierung weil es alle Sonderzeichen mit einem % abbricht. Nach diesem %-Zeichen hat jedes Sonderzeichen einen eindeutigen Code

Warum brauchen wir eine URL-Kodierung?

Bestimmte Zeichen haben einen besonderen Wert in einer URL-Zeichenkette. So steht beispielsweise das Zeichen ? für den Anfang einer Abfragezeichenfolge. Um eine Ressource im Web erfolgreich zu finden, muss man unterscheiden, ob ein Zeichen als Teil einer Zeichenkette oder als Teil der URL-Struktur gemeint ist.

Wie können wir URL-Kodierung in JS erreichen:

JS bietet eine Reihe von eingebauten Funktionen, mit denen wir URLs einfach kodieren können. Dies sind zwei praktische Optionen:

1. encodeURIComponent() : Nimmt eine Komponente eines URI als Argument und gibt den kodierten URI-String zurück.
2. encodeURI() : Nimmt einen URI als Argument und gibt den kodierten URI-String zurück.

Beispiel und Vorbehalte:

Achten Sie darauf, dass Sie nicht die gesamte URL (einschließlich des Schemas, z. B. https://) in encodeURIComponent() . Dies kann sie in eine nicht funktionierende URL verwandeln. Zum Beispiel:

// 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"));

Wir können beobachten, wenn wir die gesamte URL in encodeURIComponent dass die Schrägstriche (/) ebenfalls in Sonderzeichen umgewandelt werden. Dies führt dazu, dass die URL nicht mehr richtig funktioniert.

Daher (wie der Name schon sagt) verwenden:

1. encodeURIComponent auf einen bestimmten Teil einer URL, den Sie kodieren möchten.
2. encodeURI auf eine ganze URL, die Sie kodieren möchten.