Frage URL in JavaScript codieren?


Wie verschlüsseln Sie eine URL mit JavaScript so sicher, dass 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 verschlüsseln musst myUrl Variable in dieser zweiten Zeile?


2121
2017-12-02 02:37


Ursprung


Antworten:


Überprüfen Sie die integrierte Funktion encodeURIComponent(str) und encodeURI(str).
In Ihrem Fall sollte das funktionieren:

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

2489
2017-12-02 02:43



Sie haben drei Möglichkeiten:

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

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

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

Aber in Ihrem Fall, wenn Sie eine URL in ein GET Parameter der anderen Seite, sollten Sie verwenden escape oder encodeURIComponent, aber nicht encodeURI.

Siehe Stapelüberlauf-Frage Bewährtes Verfahren: Escape oder encodeURI / encodeURIComponent für weitere Diskussion.


1373
2017-12-02 02:49



Bleiben bei encodeURIComponent(). Die Funktion encodeURI() Es ist nicht störend, viele Zeichen mit semantischer Bedeutung in URLs zu codieren (z. B. "#", "?" und "&"). escape() ist veraltet und macht sich nicht die Mühe, "+" - Zeichen zu codieren, die als codierte Leerzeichen auf dem Server interpretiert werden (und, wie von anderen hier angegeben, URLs nicht-ASCII-Zeichen nicht korrekt codieren).

Es gibt ein nettes Erklärung des Unterschieds zwischen encodeURI() und encodeURIComponent() anderswo. Wenn Sie etwas verschlüsseln möchten, damit es sicher als Komponente eines URIs verwendet werden kann (z. B. als Abfragezeichenfolgenparameter), möchten Sie es verwenden encodeURIComponent().


156
2018-05-29 23:54



Persönlich finde ich, dass viele APIs "" durch "+" ersetzen möchten, also verwende ich Folgendes:

encodeURIComponent(value).replace(/%20/g,'+');

escape ist in verschiedenen Browsern und Browsern unterschiedlich implementiert encodeURI kodiert nicht die meisten Zeichen, die in einem URI funktional sind (wie # und even /) - es wird für die Verwendung in einem vollständigen URI / URL verwendet, ohne es zu unterbrechen.

HINWEIS: Sie verwenden encodeURIComponent für die Werte der Abfragezeichenfolge (nicht Felder / Wertnamen und definitiv nicht die gesamte URL). Wenn Sie es auf eine andere Weise tun, wird es keine Zeichen wie =,?, & Codieren, wodurch Ihre Abfragezeichenfolge möglicherweise ungeschützt bleibt.

Beispiel:

const escapedValue = encodeURIComponent(value).replace(/%20/g,'+');
const url = 'http://example.com/?myKey=' + escapedValue;

66
2017-12-15 08:47



Wenn Sie jQuery verwenden, würde ich gehen $.param Methode. Die URL codiert ein Objekt, das Felder auf Werte abbildet, was leichter zu lesen ist als das Aufrufen einer Escape-Methode für jeden Wert.

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

35
2018-05-13 03:32



Um eine URL zu verschlüsseln, haben Sie, wie schon gesagt, zwei Funktionen:

encodeURI()

und

encodeURIComponent()

Der Grund, warum beide existieren, besteht darin, dass die erste die URL beibehält und das Risiko besteht, dass zu viele Dinge unausgepackt bleiben, während die zweite alles Notwendige codiert.

Mit der ersten könnten Sie die neu gemachte URL in die Adressleiste kopieren (zum Beispiel) und es würde funktionieren. Ihre & uuml; senen '&' s würden jedoch mit Feldbegrenzern interferieren, die '=' würden Feldnamen und Werte stören, und die '+' würden wie Leerzeichen aussehen. Aber für einfache Daten, wenn Sie die URL-Natur dessen, was Sie entkommen wollen, erhalten wollen, funktioniert das.

Die zweite ist alles, was Sie tun müssen, um sicherzustellen, dass nichts in Ihrer Zeichenfolge mit einer URL interferiert. Es hinterlässt verschiedene unwichtige Zeichen ohne Zeichen, so dass die URL so gut wie möglich lesbar bleibt, ohne dass es zu Interferenzen kommt. Eine auf diese Weise codierte URL funktioniert nicht mehr als URL, ohne sie zu entfernen.

Wenn Sie also Zeit brauchen, 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 sie zur Abfrage hinzufügen.

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


8
2018-01-26 21:31



encodeURIComponent () ist der Weg zu gehen.

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

ABER Sie sollten im Hinterkopf behalten, dass es kleine Unterschiede zur php-Version von urlencode () gibt und wie in @CMS erwähnt, wird nicht jedes char codiert. Jungs bei http://phpjs.org/functions/urlencode/ machte js äquivalent 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(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .
  replace(/\)/g, '%29')
    .replace(/\*/g, '%2A')
    .replace(/%20/g, '+');
}

7
2017-10-01 08:03



Ähnliches habe ich mit normalem Javascript versucht

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

4
2018-01-05 18:49



Um eine doppelte Kodierung zu vermeiden, ist es eine gute Idee, die URL vor der Kodierung zu dekodieren (wenn Sie beispielsweise mit von Benutzern eingegebenen URLs arbeiten, die möglicherweise bereits kodiert sind).

Sagen wir, wir haben abc%20xyz 123 als Eingabe (ein Leerzeichen ist bereits codiert):

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

3
2018-06-22 03:28



Nichts hat für mich funktioniert. Alles, was ich sah, war der HTML-Code der Anmeldeseite, der mit dem Code 200 auf die Client-Seite zurückkam. (302 zuerst, aber die gleiche Ajax-Anfrage, die die Anmeldeseite in eine andere Ajax-Anfrage geladen hatte, die eigentlich eine Weiterleitung sein sollte Text der Anmeldeseite).

Im Login-Controller habe ich folgende Zeile hinzugefügt:

Response.Headers["land"] = "login";

Und im globalen Ajax-Handler habe ich Folgendes getan:

$(function () {
    var $document = $(document);
    $document.ajaxSuccess(function (e, response, request) {
        var land = response.getResponseHeader('land');
        var redrUrl = '/login?ReturnUrl=' + encodeURIComponent(window.location);
        if(land) {
            if (land.toString() === 'login') {
                window.location = redrUrl;
            }
        }
    });
});

Jetzt habe ich kein Problem, und es funktioniert wie ein Zauber.


2
2017-09-10 06:41