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

Um eine doppelte Kodierung zu vermeiden, empfiehlt es sich, die URL vor der Kodierung zu dekodieren (z. B. wenn es sich um vom Benutzer eingegebene URLs handelt, die möglicherweise bereits kodiert sind).

Nehmen wir an, wir haben abc%20xyz 123 als Eingabe (ein Leerzeichen ist bereits kodiert):

encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"

Answer 2

Ähnliches habe ich mit normalem Javascript versucht

function fixedEncodeURIComponent(str){
     return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

Answer 3

Sie sollten nicht verwenden encodeURIComponent() direkt.

Schauen Sie sich RFC3986 an: Einheitlicher Ressourcenbezeichner (URI): Generische Syntax

sub-delims = "!" / "$" / "&" / "'" / "(" / ")" / "*" / "+" / "," / ";" / "="

Der Zweck der reservierten Zeichen besteht darin, eine Reihe von Abgrenzungszeichen bereitzustellen, die von anderen Daten innerhalb eines URI unterscheidbar sind.

Diese reservierten Zeichen aus der URI-Definition in RFC3986 werden NICHT von encodeURIComponent() .

MDN Web Docs: encodeURIComponent()

Um RFC 3986 strikter einzuhalten (der !, ', (, ) und * reserviert), obwohl diese Zeichen keine formalisierte URI-Begrenzungsfunktion haben, kann das Folgende sicher verwendet werden:

Verwenden Sie die Funktion MDN Web Docs...

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

Answer 4

Leistung

Heute (2020.06.12) habe ich einen Geschwindigkeitstest für ausgewählte Lösungen auf MacOs HighSierra 10.13.6 mit den Browsern Chrome 83.0, Safari 13.1, Firefox 77.0 durchgeführt. Diese Ergebnisse können für massive Urls Kodierung nützlich sein.

Schlussfolgerungen

• encodeURI (B) scheint am schnellsten zu sein, ist es aber nicht empfohlen für url-s
• escape (A) ist eine schnelle, browserübergreifende Lösung
• Lösung F empfohlen von MDN ist mittelschnell
• Lösung D ist am langsamsten

Einzelheiten

Für Lösungen A B C D E F Ich führe zwei Tests durch

• für kurze Url - 50 Zeichen - können Sie es ausführen HIER

• für lange Url - 1M Zeichen - können Sie es ausführen HIER

  function A(url) { return escape(url); }

  function B(url) { return encodeURI(url); }

  function C(url) { return encodeURIComponent(url); }

  function D(url) { return new URLSearchParams({url}).toString(); }

  function E(url){ return encodeURIComponent(url).replace(/[!'()]/g, escape).replace(/*/g, "%2A"); }

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

  // ---------- // TEST // ----------

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

  [A,B,C,D,E,F] .forEach(f=> console.log(${f.name} ?url=${f(myUrl).replace(/^url=/,'')}));

  This snippet only presents code of choosen solutions

Beispielergebnisse für Chrome

Answer 5

URL-String kodieren

    var url = $(location).attr('href'); //get current url
    //OR
    var url = 'folder/index.html?param=#23dd&noob=yes'; //or specify one

`var encodedUrl = encodeURIComponent(url);
console.log(encodedUrl);
//outputs folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes

for more info go http://www.sitepoint.com/jquery-decode-url-string`