Wie codieren Sie eine URL sicher mit JavaScript, sodass 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 myUrl
Variable in dieser zweiten Zeile codieren müssen ?
javascript
url
urlencode
nickf
quelle
quelle
Antworten:
Überprüfen Sie die integrierten Funktionen encodeURIComponent (str) und encodeURI (str) .
In Ihrem Fall sollte dies funktionieren:
quelle
escape
ist auch eine gültige Option.encodeURI
ist die URL-Codierung nicht wirklich sicher.:
,/
,@
usw. Diese zwei Verfahren sind nicht untereinander austauschbar verwendet werden, müssen Sie wissen , was Sie codieren , die richtige Methode zu verwenden.Sie haben drei Möglichkeiten:
escape()
wird nicht codieren:@*/+
encodeURI()
wird nicht codieren:~!@#$&*()=:/,;?+'
encodeURIComponent()
wird nicht codieren:~!*()'
Wenn Sie in Ihrem Fall eine URL an einen
GET
Parameter einer anderen Seite übergeben möchten , sollten Sieescape
oder verwendenencodeURIComponent
, aber nichtencodeURI
.Weitere Informationen finden Sie unter Best Practice für Stapelüberlauf: Escape oder encodeURI / encodeURIComponent .
quelle
%uxxx
.Bleib bei
encodeURIComponent()
. Die FunktionencodeURI()
macht sich nicht die Mühe, viele Zeichen zu codieren, die in URLs semantische Bedeutung haben (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 hervorgehoben, Nicht-ASCII-Zeichen nicht ordnungsgemäß per URL codieren).Es gibt eine schöne Erklärung für den Unterschied zwischen
encodeURI()
undencodeURIComponent()
anderswo. Wenn Sie etwas so codieren möchten, dass es sicher als Komponente eines URI enthalten sein kann (z. B. als Abfragezeichenfolgenparameter), möchten Sie es verwendenencodeURIComponent()
.quelle
Die beste Antwort ist die Verwendung
encodeURIComponent
von Werten in der Abfragezeichenfolge (und nirgendwo anders).Ich finde jedoch, dass viele APIs "" durch "+" ersetzen möchten, daher musste ich Folgendes verwenden:
escape
wird in verschiedenen Browsern unterschiedlich implementiert undencodeURI
codiert nicht viele Zeichen (wie # und sogar /) - es kann für eine vollständige URI / URL verwendet werden, ohne diese zu beschädigen - was nicht besonders hilfreich oder sicher ist.Und wie @Jochem weiter unten ausführt, möchten Sie möglicherweise
encodeURIComponent()
einen (jeden) Ordnernamen verwenden, aber aus irgendeinem Grund scheinen diese APIs in Ordnernamen nicht zu wollen,+
so dass einfach altencodeURIComponent
großartig funktioniert.Beispiel:
quelle
http://somedomain/this dir has spaces/info.php?a=this has also spaces
. Es sollte konvertiert werden in: Beihttp://somedomain/this%20dir%20has%spaces/info.php?a=this%20has%20also%20spaces
vielen Implementierungen kann jedoch '% 20' im Querystring durch '+' ersetzt werden. Trotzdem können Sie '% 20' im Pfadabschnitt der URL nicht durch '+' ersetzen. Dies führt zu einem Fehler "Nicht gefunden", es sei denn, Sie haben ein Verzeichnis mit einem+
anstelle eines Leerzeichens.encodeURIComponent('+')
würde dir leider geben%2B
, also müsstest du zwei reguläre Ausdrücke verwenden ... was vermutlich der Grund ist, warum dies funktioniert, weil '+' are '' am Ende anders codiert sind.Wenn Sie jQuery verwenden, würde ich mich für eine
$.param
Methode entscheiden. Die URL codiert ein Objekt, das Felder Werten zuordnet. Dies ist einfacher zu lesen als das Aufrufen einer Escape-Methode für jeden Wert.quelle
encodeURIComponent () ist der richtige Weg.
ABER Sie sollten bedenken, dass es kleine Unterschiede zur PHP-Version gibt
urlencode()
und wie @CMS erwähnt, nicht jedes Zeichen codiert. Typen bei http://phpjs.org/functions/urlencode/ gemacht js äquivalent zuphpencode()
:quelle
Wie bereits erwähnt, haben Sie zwei Funktionen, um eine URL zu verschlüsseln:
und
Der Grund dafür ist, dass der erste die URL beibehält und das Risiko besteht, dass zu viele Dinge nicht entkommen, während der zweite alles verschlüsselt, was benötigt wird.
Mit dem ersten könnten Sie die neu maskierte URL in die Adressleiste kopieren (zum Beispiel) und es würde funktionieren. Ihre nicht entkoppelten '&' würden jedoch Feldbegrenzer stören, die '=' würden Feldnamen und Werte stören und die '+' würden wie Leerzeichen aussehen. Bei einfachen Daten funktioniert dies jedoch, wenn Sie die URL-Natur Ihrer Escape-Daten beibehalten möchten.
Das zweite ist alles, was Sie tun müssen, um sicherzustellen, dass nichts in Ihrer Zeichenfolge mit einer URL interferiert. Es bleiben verschiedene unwichtige Zeichen unberührt, so dass die URL so störungsfrei wie möglich bleibt. Eine auf diese Weise codierte URL funktioniert nicht mehr als URL, ohne sie zu entfernen.
Wenn Sie sich also die Zeit nehmen können, möchten Sie immer encodeURIComponent () verwenden - bevor Sie Name / Wert-Paare hinzufügen, codieren Sie mit dieser Funktion sowohl den Namen als auch den Wert, bevor Sie ihn zur Abfragezeichenfolge hinzufügen.
Es fällt mir schwer, Gründe für die Verwendung von encodeURI () zu finden - das überlasse ich den klügeren Leuten.
quelle
Ähnliches habe ich mit normalem Javascript versucht
quelle
Eleganter Weg
Meiner bescheidenen Meinung nach besteht die eleganteste Art, Abfrageparameter zu codieren, darin, ein Objekt mit Parametern wie zu erstellen
und codieren Sie es dann mit:
wie in dieser Antwort erwähnt: https://stackoverflow.com/a/53171438/7284582
quelle
Um eine doppelte Codierung zu verhindern, empfiehlt es sich, die URL vor der Codierung zu dekodieren (wenn Sie beispielsweise mit vom Benutzer eingegebenen URLs arbeiten, die möglicherweise bereits codiert sind).
Nehmen wir an, wir haben
abc%20xyz 123
als Eingabe (ein Leerzeichen ist bereits codiert):quelle
Was ist URL-Codierung:
Eine URL sollte verschlüsselt werden, wenn sich in der URL Sonderzeichen befinden. Zum Beispiel:
In diesem Beispiel können wir beobachten, dass alle Zeichen außer der Zeichenfolge
notEncoded
mit% -Zeichen codiert sind. Die URL-Codierung wird auch als prozentuale Codierung bezeichnet, da alle Sonderzeichen mit einem% maskiert werden. Nach diesem% -Zeichen hat jedes Sonderzeichen einen eindeutigen CodeWarum brauchen wir eine URL-Codierung:
Bestimmte Zeichen haben einen speziellen Wert in einer URL-Zeichenfolge. Zum Beispiel die? Zeichen bezeichnet den Anfang einer Abfragezeichenfolge. Um eine Ressource im Web erfolgreich zu finden, muss unterschieden werden, wann ein Zeichen als Teil einer Zeichenfolge oder als Teil der URL-Struktur gedacht ist.
Wie können wir eine URL-Codierung in JS erreichen:
JS bietet eine Reihe von integrierten Dienstprogrammfunktionen, mit denen wir URLs einfach codieren können. Dies sind zwei praktische Optionen:
encodeURIComponent()
: Nimmt eine Komponente eines URI als Argument und gibt die codierte URI-Zeichenfolge zurück.encodeURI()
: Nimmt einen URI als Argument und gibt die codierte URI-Zeichenfolge zurück.Beispiel und Vorbehalte:
Beachten Sie, dass nicht die gesamte URL (einschließlich Schema, z. B. https: //) an übergeben wird
encodeURIComponent()
. Dies kann es tatsächlich in eine nicht funktionierende URL umwandeln. Zum Beispiel:Wir können beobachten, dass wir die gesamte URL so
encodeURIComponent
eingeben, dass die Schrägstriche (/) auch in Sonderzeichen umgewandelt werden. Dies führt dazu, dass die URL nicht mehr richtig funktioniert.Verwenden Sie daher (wie der Name schon sagt):
encodeURIComponent
auf einem bestimmten Teil einer URL, die Sie codieren möchten.encodeURI
auf eine ganze URL, die Sie codieren möchten.quelle
Bei mir hat nichts funktioniert. Alles, was ich sah, war der HTML-Code der Anmeldeseite, der mit Code 200 auf die Clientseite zurückkehrte. (Zuerst 302, aber dieselbe Ajax-Anfrage, die die Anmeldeseite in eine andere Ajax-Anfrage lädt, die eher eine Weiterleitung als eine einfache Ebene sein sollte Text der Anmeldeseite).
Im Login-Controller habe ich folgende Zeile hinzugefügt:
Und im globalen Ajax-Handler habe ich Folgendes getan:
Jetzt habe ich kein Problem und es funktioniert wie ein Zauber.
quelle
URL-Zeichenfolge codieren
quelle
Hier ist eine LIVE DEMO von
encodeURIComponent()
unddecodeURIComponent()
JS integrierte Funktionen:quelle
Sie können die esapi-Bibliothek verwenden und Ihre URL mit der folgenden Funktion codieren. Die Funktion stellt sicher, dass '/' nicht durch Codierung verloren geht, während der Rest des Textinhalts codiert wird:
https://www.owasp.org/index.php/ESAPI_JavaScript_Readme
quelle
Verwenden Sie die
fixedEncodeURIComponent
Funktion, um RFC 3986 strikt einzuhalten :quelle
Sie sollten nicht
encodeURIComponent()
direkt verwenden.Schauen Sie sich RFC3986 an: URI (Uniform Resource Identifier): Generische Syntax
Diese reservierten Zeichen aus der URI-Definition in RFC3986 werden NICHT maskiert
encodeURIComponent()
.MDN-Webdokumente: encodeURIComponent ()
Verwenden Sie die MDN Web Docs-Funktion ...
quelle