Der Fehler, der mir beigebracht hat, die Prozentkodierung zu respektieren, war eine OAuth-Umleitung, die für genau einen Kunden fehlschlug. WP Adminify hatte eine Google Fonts-Integration, die über OAuth authentifiziert wurde, und ein Benutzer - ein Hosting-Reseller, der ein Reverse-Proxy-Setup ausführt, das ich immer noch nicht ganz verstehe - wurde immer wieder redirect_uri_mismatch Fehler. Allen anderen ging es gut. Ich habe den größten Teil von zwei Tagen damit verbracht, seine Serverkonfiguration zu beschuldigen. Dann habe ich mir endlich die tatsächliche URL angesehen, die sein Browser gesendet hat, Charakter für Charakter, und da war es: %2520 wo ein Raum hätte sein sollen. Sein Proxy war die Codierung der redirect_uri. Mein Plugin war auch Codierung es. Google hat eine URL erhalten, in der der Speicherplatz zweimal codiert wurde – %20 wurden %2520 - und lehnte den ganzen Händedruck ab. Zwei Codezeilen haben es behoben. zwei Tage, um es zu finden.
Das war nicht einmal meine erste Codierungskatastrophe. Jahre zuvor habe ich einen Kampagnenlink für einen Plugin-Start mit einem UTM-Parameter erstellt, der ein rohes Ampersand enthielt - so etwas wie utm_campaign=black&fridaydrohen Das Analytics-Dashboard zeigte eine mysteriöse Kampagne namens black und ein Phantomparameter namens friday das passte nichts zusammen. Der kaufmännische und hatte meinen Parameter lautlos in zwei Teile geteilt. Kein Fehler. Keine Warnung. Nur leise falsche Daten für elf Tage, bevor ich bemerkte, dass sich die Zahlen nicht summierten.
Hier ist die Sache mit der URL-Codierung: Es ist eines dieser Probleme, die trivial aussehen, bis es nicht ist. Die Regeln leben in einer Spezifikation von 2005 (RFC 3986), die Browser-Realität lebt in einer anderen Spezifikation (der WhatWG-URL-Standard), Javascript bietet Ihnen drei verschiedene Funktionen, die alle etwas unterschiedliche Dinge ausführen, und PHP gibt Ihnen zwei weitere. Wenn Sie es falsch machen und Sie keinen Absturz bekommen - Sie erhalten abgeschnittene Parameter, kaputte OAuth-Flows und Links, die in Chrome funktionieren, aber in einem E-Mail-Client sterben.
Also habe ich den Encoder / Decoder gebaut, in den ich immer wollte toolz.devdrohen Dieser Leitfaden behandelt die Verwendung und - was noch wichtiger ist -, wie die Prozentkodierung tatsächlich funktioniert, also die nächste %2520 In Ihren Protokollen dauert es zwei Minuten statt zwei Tage.
tl; dr: Um URLs online zu codieren oder zu dekodieren, fügen Sie Ihre Zeichenfolge in die Toolz.dev-URL-Encoder/-Decoder, wähle einen Modus und drücke auf Codieren oder dekodieren. Es verarbeitet UTF-8 und Emoji korrekt und die Schaltfläche „Austausch“ speist die Ausgabe zurück in die Eingabe, sodass Sie doppelt codierte Werte abziehen können (
%2520) eine Schicht nach der anderen auseinander. Alles läuft clientseitig, also berühren Token und Sitzungs-IDs in Ihren URLs niemals einen Server. Parameter codieren Werte Mit Komponentenmodus; codieren Sie nur vollständige URLs, wenn Sie wissen warum.
Hauptmerkmale
In einem Werkzeug kodieren und dekodieren
Die Hälfte der Zeit muss ich einen Wert codieren. Die andere Hälfte starre ich auf eine knorrige URL aus einer Protokolldatei und muss sie in etwas lesbares dekodieren. Das Werkzeug greift beides aus einem Eingabefeld - codieren und dekodieren als zwei Schaltflächen nebeneinander, sodass keine Suche nach einer separaten Seite erfolgt. Fügen Sie eine codierte Zeichenfolge ein und drücken Sie die Dekodierung, geben Sie einen Rohwert ab und klicken Sie auf Encode. Es wird auch sauber gerundet: Codieren, dekodieren und Sie erhalten Ihre ursprüngliche Zeichenfolge zurück, Byte für Byte. Das klingt offensichtlich, aber ich habe Online-Tools verwendet, die verstümmelt wurden, und Schilder auf der Rundreise, weil sie nicht entscheiden konnten, welche Spezifikation sie befolgten. In diesem Fall wird explizit darüber, was es bei jedem Schritt tut, genau das, was Sie wollen, wenn Sie debuggen.
Komponente vs Full-URL-Codierungsmodi
Diese Unterscheidung ist der Ort, an dem die meisten Codierungsfehler geboren werden. Der Komponentenmodus codiert alles, was nicht vorbehalten ist – einschließlich /, ?, &, und = - Welches ist das, was Sie für einen einzelnen Parameterwert wollen. Der Full-URL-Modus lässt die Strukturzeichen in Ruhe, sodass die URL immer noch als URL funktioniert. Dies ist das, was Sie wollen, wenn Sie eine vollständige Adresse bereinigen. Wenn Sie den falschen verwenden, wird entweder Ihre URL-Struktur unterbrochen oder gefährliche Zeichen nicht codiert. Das Tool setzt beide Modi mit einem Klick in einem einzigen Dropdown-Menü, das mit der JavaScript-Funktion beschriftet ist, die jeder entspricht — encodeURIComponent, encodeURI, application/x-www-form-urlencodeddrohen Ich ging auf dieser Namensgebung hin und her. Absichtsbezeichnungen ("einen Wert verschlüsseln», "eine ganze URL verschlüsseln) würden besser kalt lesen, aber Funktionsnamen bedeuten das Referenzfeld unter den Karten eins zu eins auf den Code, den Sie schreiben möchten, und das ist der Moment, in dem die meisten Leute tatsächlich sind. Wenn Sie jemals getippt haben encodeURI Als du meintest encodeURIComponent - Ich habe mehr als einmal - das Panel ist da, um es zu fangen, bevor Sie versenden.
Verarbeiten Sie UTF-8, Emoji und internationale Charaktere
Typ café Und du bekommst caf%C3%A9 - das é korrekt in seine zwei UTF-8-Bytes erweitert. Geben Sie ein Emoji ein und Sie erhalten vier Prozent-codierte Bytes. Hier sind ältere Tools und das veraltete Javascript escape() Funktion fallen auseinander: Sie nehmen latein-1 an oder produzieren nicht standardmäßig %uXXXX Sequenzen, die kein Server analysieren kann. Wenn Sie URLs mit benutzergenerierten Inhalten erstellen - Namen, Suchanfragen, Stadtnamen in einer Sprache, die nicht englisch ist - ist die korrekte UTF-8-Bearbeitung kein netter Vorteil. Bengali-Text, arabische Schnecken, chinesische Suchbegriffe: Alle kodieren zu gültigen RFC-3986-Prozent-Sequenzen, die am anderen Ende identisch dekodieren.
Eine Swap-Schaltfläche für doppelt codierte Werte
der %2520 TRAP - eine bereits codierte %20 Wieder kodiert zu werden - hat mich zwei Tage lang gekostet, also ist dieser persönlich. Dekodierung ist ein Einzelschichtbetrieb: %2520 entschlüsseln %20, nicht zu einem Raum, weil %25 ist die Kodierung von %drohen Ein Durchgang bringt Ihnen eine Ebene. Der Swap-Button (⇄) Verschiebt die Ausgabe zurück in das Eingabefeld, so dass der nächste Durchgang einen Klick entfernt ist. Ich habe URLs drei Ebenen tief ausgepackt, nachdem sie einen Proxy, einen Umleitungsdienst und einen E-Mail-Link-Wrapper - Swap, Decodieren, Tauschen, Dekodieren, bis sich der String nicht mehr geändert hat. Das "Moment aufhört zu ändern" ist das eigentliche Signal, das Sie suchen. Seien Sie ehrlich, was das ist: Es ist eine manuelle Schleife, kein Detektor. Das Werkzeug kennzeichnet nicht %25XX Für Sie und ich gehe hin und her, ob es sollte - die automatische Dekodierung bis zum Stall wäre bequem, bis es still einen Wert zerstört, der legitimerweise ein Prozentzeichen enthält.
Drei Modi, ein explizites Referenzfeld
Der Modusauswahl-Modus enthält drei Optionen - Komponente, vollständige URL und Formular-Urlen-Coded - und das darunter liegende Feld zeigt genau an, welche Zeichen dieser Modus entkommt, was er beibehält, und zeigt ein ausgearbeitetes Beispiel. Ich habe es hinzugefügt, weil ich mich nie daran erinnern konnte, ob encodeURIComponent Blätter ~ allein (es tut) oder ob ! und * überleben (sie tun es, was die Menschen überrascht, da RFC 3986 sie eher als Sub-Delims als als uneingeschränkt klassifiziert). Anstatt drei Javascript-Funktionen zu merken, wählen Sie den Modus nach Absicht aus und lesen zurück, was er gerade tun wird. Dieser Referenztext ist der Teil, den ich am häufigsten verwende, und er ist das, was ich möchte, wenn ich um 1 Uhr morgens auf der Seite kalt lande.
100% clientseitig - nichts verlässt Ihren Browser
Überlegen Sie, was sich tatsächlich in den URLs befindet, die Sie dekodieren: OAuth-Autorisierungscodes, Tokens zum Zurücksetzen des Passworts, Sitzungs-IDs, E-Mail-Adressen in Links zum Abbestellen, API-Schlüssel einige Frameworks, die hilfreich in eine Abfragezeichenfolge gestopft sind. Fügen Sie diese in ein serverseitiges Tool ein und landen Sie in den Zugriffsprotokollen einer anderen Person, die an Ihre IP gebunden sind und für die wer weiß, wie lange. Der Toolz.dev-Encoder läuft vollständig in Ihrem Browser – die Konvertierung erfolgt in lokal ausgeführten JavaScript-Zeilen, und es wird keine Anfrage mit Ihren Daten gestellt. Öffnen Sie DevTools und sehen Sie sich die Registerkarte Netzwerk an, wenn Sie mir nicht glauben. Für alles, was sicherheitsbezogen ist, ist die Client-Seite kein Feature, sondern die minimale Bar.
Kostenlos, keine Anmeldung, keine Grenzen
Keine Kontowand, kein tägliches Quoten-Nag für ein Tool, das eine String-Transformation durchführt, kein "Upgrade auf Pro zum Dekodieren von mehr als 1.000 Zeichen." Ich habe toolz.dev erstellt, weil ich es leid war, dass ich es satt hatte, eine 10-Sekunden-Aufgabe mit einem Newsletter-Popup zu unterbrechen. Lesezeichen, benutze es fünfzig Mal am Tag, fertig.
So verwenden Sie den URL-Encoder und den Decoder
Schritt 1: Öffnen Sie das Werkzeug und wählen Sie Ihre Richtung aus
aufsuchen toolz.dev/tools/URL-Encoder und lege deine Schnur in die linke Box. Es gibt zwei Aktionsschaltflächen, die Codierung und Dekodierung, und Sie wählen eine nach dem Einfügen aus, anstatt zuerst eine Richtung zu setzen. Wenn Sie von etwas lesbarem beginnen (einer Suchanfrage, einer Umleitungs-URL, die Sie einbetten möchten), klicken Sie auf Encode. Wenn Sie mit etwas voller Prozentzeichen (ein Log-Eintrag, ein Referrer-Header) beginnen, drücken Sie die Dekodierung. Die Ausgabe landet im rechten Bereich mit einer Kopiertaste in der Kopfzeile und swap und clear Sit neben den beiden Aktionsschaltflächen.
Schritt 2: Wählen Sie Komponenten, Voll-URL oder Formularmodus
Codierung a schätzen das sitzt in einem Parameter - einem redirect_uri, einem Suchbegriff, alles nach einem = Zeichen? Komponentenmodus verwenden. es kodiert /, ?, &, und = Ihr Wert kann also die umgebende URL nicht brechen. Codierung a Vollständige URL Das braucht nur Leerzeichen und Nicht-ASCII-Zeichen, die aufgeräumt sind? Verwenden Sie den Full-URL-Modus, der die Strukturzeichen beibehält. Der dritte Modus, form-urlencoded, ist die Komponentencodierung mit als geschriebenen Leerzeichen + anstelle %20 - Wählen Sie es aus, wenn Sie eine Hand bauen application/x-www-form-urlencoded Leiche Beachten Sie, dass der Modus auch die Dekodierung beeinflusst: Im Formularmodus, + wird vor der Dekodierung wieder in einen Leerzeichen umgewandelt, in den anderen beiden bleibt es ein buchstäbliches Plus. Im Zweifel: Komponentenmodus für Stücke, Voll-URL-Modus für Ganzes.
Schritt 3: Lesen Sie die Ausgabe und achten Sie auf Reste-Zeichen
Die Ausgabe erscheint im rechten Bereich. Überprüfen Sie zum Dekodieren, ob das Ergebnis noch enthält %XX Sequenzen – Wenn dies der Fall ist, wurde der Wert mehr als einmal codiert. Hit Swap, um diesen Ausgang wieder in den Eingang zu schieben, dekodieren und wiederholen Sie, bis sich die Zeichenfolge nicht mehr ändert. Wenn der Eingang fehlerhaft ist (ein Streuner % Nicht gefolgt von zwei Hex-Ziffern, wie ein Literal 100%) erhalten Sie einen expliziten Fehler und nicht eine stille Halbdekodierung, die das gewünschte Verhalten beim Debuggen ist.
Schritt 4: Kopieren und überprüfen
Klicken Sie auf die Schaltfläche Kopieren und fügen Sie das Ergebnis dort ein, wo es hingehört. Für alles Wichtige - insbesondere OAuth-Weiterleitungen - Führen Sie eine endgültige Überprüfung durch: Fügen Sie den codierten Wert wieder in den Decodierungsmodus ein und bestätigen Sie den Rundweg, um genau das zu erhalten, mit dem Sie begonnen haben. 30 Sekunden Überprüfung schlägt zwei Tage redirect_uri_mismatchdrohen
Prozent-Kodierung, RFC 3986 und warum Leerzeichen entweder zu %20 oder + werden
URLs können nur einen begrenzten Satz von Zeichen enthalten. Alles andere muss als prozentual codierte Bytes eingeschmuggelt werden. Das Regelwerk ist RFC 3986 (2005) und es teilt Charaktere in zwei Lager auf.
Unbesetzte Zeichen Benötigen Sie niemals eine Codierung: die Buchstaben A–Z und a–z, Ziffern 0–9und vier Symbole - Bindestrich -, Periode ., Unterstreichen _und Tilde ~drohen Die Codierung dieser ist legal, aber sinnlos.
Reservierte Zeichen Haben Sie strukturelle Jobs innerhalb einer URL: : / ? # [ ] @ (die allgemeinen Grenzbegrenzer) und ! $ & ' ( ) * + , ; = (die Unterbegrenzer). Der Doppelpunkt trennt Schema vom Host. Das Fragezeichen startet die Abfragezeichenfolge. Das kaufmännische und trennt Parameter. Ob ein reservierter Charakter codiert werden muss, hängt ganz davon ab Wo es erscheintdrohen ein / im Pfad ist Struktur; a / Innerhalb eines redirect_uri Parameterwerts befinden sich Daten und müssen werden %2F Oder der Server analysiert Ihre URL falsch.
Die Mechanik: Nehmen Sie den Charakter, holen Sie sich sein UTF-8-Byte (s) und schreiben Sie jedes Byte als % gefolgt von zwei Hex-Ziffern. ASCII-Zeichen sind ein Byte - Leerzeichen ist %20, AMPERSAND ist %26drohen Aber UTF-8 ist eine Multi-Byte-Codierung, also é ist zwei Bytes: %C3%A9drohen Ein typisches Emoji ist vier Bytes — 🚀 kodiert als %F0%9F%9A%80drohen Aus diesem Grund korrumpieren Tools, die davon ausgehen, dass ein Zeichen gleich einem Byte ist, etwas außerhalb von einfachem Englisch.
Nun das Platzproblem - das verwirrendste Ding in der URL-Codierung. Nach RFC 3986 wird ein Raum %20drohen Aber HTML-Formular-Einreichungen verwenden eine andere Serialisierung, application/x-www-form-urlencoded, heute definiert in der WhatWG-URL-Standard, und das Format codiert Leerzeichen als +drohen Beide sind richtig - in ihrem eigenen Kontext. was bedeutet + In einer Abfragezeichenfolge ist es nicht eindeutig: Es kann sich um ein Literal-Plus-Zeichen (RFC 3986-Lesung) oder um einen codierten Bereich (Form-Codierungs-Lesen) handeln. Wenn Sie jemals eine Telefonnummer als angekommen gesehen haben 1234 5678 Wenn jemand schickte +1234..., Sie haben diesen Fehler getroffen. Mein Rat: Immer ausstrahlen %20 für Räume und %2B Für buchstäbliche Pluszeichen. Niemand macht diese falsch.
Javascript bietet Ihnen drei Funktionen, die nicht austauschbar sind. Angesichts der Zeichenfolge a=b&c d:
const s = "a=b&c d";
encodeURIComponent(s); // "a%3Db%26c%20d" — encodes =, &, and space
encodeURI(s); // "a=b&c%20d" — leaves = and & alone
escape(s); // "a%3Db%26c%20d" — deprecated; breaks on Unicode
encodeURIComponent codiert alles außer nicht reservierten Zeichen (Plus !'()* - eine Legacy-Quirk), die es für Parameterwerte sicher macht. encodeURI Reservierte Zeichen beibehalten, damit eine vollständige URL funktionsfähig bleibt - aber das bedeutet auch werde nicht Schützen Sie eine & innerhalb Ihrer Daten. und escape() aus gutem Grund veraltet: Es produziert nicht standardmäßig %uXXXX Sequenzen für Nicht-Latin-1-Zeichen. Verwenden Sie es niemals in neuem Code.
PHP spiegelt den gleichen Split mit einem Twist: urlencode() Erzeugt form-style Codierung (Räume werden +), während rawurlencode() folgt RFC 3986 (Spaces werden %20).). Wenn Sie URLs für etwas anderes als einen Post-Body erstellen, rawurlencode() ist derjenige, den du willst. Ich habe WP Adminify Code mit dem falschen versendet; WordPress's eigene add_query_arg() Hat mich öfter gerettet, als ich zugeben möchte.
Schließlich die doppelte Kodierungsfalle. %20 ist ein Leerzeichen, codiert. verschlüsseln diese Schnur immer wieder % selbst wird %25, dir zu geben %2520drohen Dekodieren Sie es einmal und Sie bekommen %20 Zurück - noch codiert. Dies geschieht immer dann, wenn zwei Schichten eines Systems jeweils "hilfreich" codieren: Ihren Code plus einen Proxy, einen Weiterleitungsdienst plus einen E-Mail-Link-Wrapper. Die Regel, die es verhindert: genau einmal kodieren, zum letzten Zeitpunkt, bevor der Wert in die URL eingeht, und niemals etwas codieren, das Sie nicht nur dekodiert oder roh generiert haben.
Häufige Anwendungsfälle
Erstellen von Abfragezeichenfolgen mit Benutzereingaben
Jedes Mal, wenn vom Benutzer eingegebener Text in eine URL geht - Suchfelder, Filter, Formularwerte, die über get übergeben werden - muss er komponentencodiert sein. Ein Benutzer, der nach Q&A tips wird ?q=Q%26A%20tips; ; ungecodingt, der Server sieht eine Suche nach Q und ein geheimnisvoller Parameter A tipsdrohen Während der Entwicklung benutze ich die URL-En Um vor dem Schreiben des Codes erwartete Werte zu generieren, habe ich einen bekannten Verweis zum Testen. Es ist auch der schnellste Weg, um "sollte dieses Zeichen codiert werden?" Argumente in der Codeüberprüfung: Fügen Sie es im Komponentenmodus ein und sehen Sie aus. Moderne APIs wie Javascript URLSearchParams Dies automatisch umgehen, und Sie sollten sie verwenden - aber Sie müssen immer noch beweisen ihre Ausgabe, wenn etwas kaputt geht, und das ist ein Decodierungsjob.
Debuggen von UTM und Kampagnenlinks
Marketing-Links sind Minenfelder. UTM-Werte mit Leerzeichen, Pipes oder Ampersands; Links, die durch einen URL-Kurzbildner, dann durch einen E-Mail-Service, dann einen Click-Tracker und dann eine Weiterleitung - jede Ebene durchlaufen, die hinzugefügt oder verstümmelt wird. Wenn eine Kampagne in Analytics falsch angezeigt wird, ist mein erster Schritt immer derselbe: Fügen Sie den vollständigen Link in den Dekodierungsmodus ein und lesen Sie, was der Analytics-Server tatsächlich erhalten hat. Neun von zehn Mal ist der Schuldige in Sekunden sichtbar - ein Rohling & Aufteilen eines Parameters, a + Das sollte ein wörtliches Plus sein oder ein %2520 Verraten der Doppelkodierung. meine black&friday Der Vorfall wäre eine elf-sekundende Lösung anstelle eines elftägigen Datenlochs gewesen, wenn ich dies am ersten Tag getan hätte.
OAuth Redirect_URI und Rückruf-URLs
OAuth ist der Ort, an dem Codierungsfehler teuer werden, weil Anbieter Exakte Zeichenfolgenanpassung auf URIs umleiten. Die redirect_uri ist eine vollständige URL, die als Parameterwert in eine andere URL eingebettet ist. Es muss also genau einmal komponentencodiert werden. Untercodieren Sie es und die ? oder & Im Inneren wird die äußere Autorisierungs-URL unterbrochen. Doppelcodieren Sie es und der Anbieter vergleicht https%3A%2F%2F... gegen Ihre registrierte https://... und kehrt zurück redirect_uri_mismatch mit null weitere Details. Wenn dieser Fehler auftritt, dekodieren Sie die tatsächliche Autorisierungs-URL aus der Adressleiste Ihres Browsers und vergleichen Sie die redirect_uri zeichenweise mit dem registrierten Wert Ihrer App. Kombiniere es mit dem JWT-Decoder Zum Überprüfen der zurückkommenden Token und Sie können einen ganzen OAuth-Flow debuggen, ohne den Browser zu verlassen.
Dekodieren von gnarly URLs aus Protokollen und Referrer-Headern
Serverprotokolle und Referrer-Header sind voll von prozentual codierter Suppe: %D0%9F%D1%80%D0%B8%D0%B2%D0%B5%D1%82 In einem Suchreferrer wurden dreifach codierte Pfade aus dem Bot-Verkehr codierte Nutzlasten in verdächtigen Anfragen. Dekodieren Sie hier heraus, was tatsächlich passiert ist - ob dieser seltsame 404 ein Benutzer mit einer kyrillischen Abfrage oder einer Skriptsuche war ../../etc/passwd Hinter drei Codierungsschichten. Dies ist auch genau der Fall, in dem der Datenschutzwinkel am wichtigsten ist: Log-URLs enthalten routinemäßig Sitzungstoken und E-Mail-Adressen. Dekodieren Sie sie in einem clientseitigen Tool, nicht auf einem zufälligen Server, der seine eigenen Protokolle führt. Ich habe mehr über diesen Workflow in der API-Debugging-Toolsdrohen
API-Tests mit Curl
Ihre Shell und Curl bilden ein zweites Minenfeld über der URL-Codierung. & Hintergründe ein Prozess in Bash, ? Trigger die Glob-Erweiterung in ZSH – Eine nicht zitierte, nicht codierte URL schlägt also verwirrend fehl, bevor sie überhaupt das Netzwerk erreicht. Mein Workflow: Codieren Sie jeden Parameterwert im Werkzeug, fügen Sie die URL zusammen, wickeln Sie sie in einzelne Anführungszeichen ein und führen Sie dann curl aus. Wenn eine API eine 400 für eine Anfrage zurückgibt, die "richtig" aussieht, dekodiere ich die genaue URL aus der ausführlichen Ausgabe (curl -v) um zu sehen, was wirklich gesendet wurde - mehr als einmal war der Fehler mein Terminal, nicht meine API. --data-urlencode Flag-Handles für Post-Bodys, aber für Abfragezeichenfolgen sind Sie meistens alleine, und ein zuverlässiger Encoder übertrifft das Erraten.
Links mit Nicht-ASCII-Text teilen
Wikipedia-Artikel in anderen Sprachen, Google Maps-Links mit lokalen Ortsnamen, Dokumenten-URLs mit bengalischen oder arabischen Schnecken – Kopieren Sie einen aus Ihrer Adressleiste und Sie erhalten entweder das hübsche Unicode-Formular oder eine Wand aus %E0%A6%AC-Style-Bytes, abhängig von der Stimmung des Browsers. Einige Chat-Apps und E-Mail-Clients kürzen oder verfälschen das rohe Unicode-Formular. Die Codierung der URL vor dem Teilen erzeugt eine reine ASCII-Zeichenfolge, die alle Messenger, Mailinglisten und Markdown-Renderer überlebt, die ich ausprobiert habe. Wenn Sie in die andere Richtung gehen, verwandelt sich das Dekodieren aus einem nicht lesbaren Link wieder in etwas, das ein Mensch vor dem Klicken überprüfen kann - es lohnt sich, etwas zu tun, das angekommen ist, das wie Liniengeräusche angekommen ist.
encodeUriComponent vs encodeuri vs Escape(): Welches sollten Sie verwenden?
Drei Funktionen, eine korrekte Standardeinstellung. Hier der ehrliche Vergleich:
encodeURIComponent() |
encodeURI() |
escape() |
|
|---|---|---|---|
| codiert | Alles außer A-Z a-z 0-9 - . _ ~ ! ' ( ) * |
Alles außer uneingeschränkt + alle reservierten Zeichen (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) |
Alles außer A-Z a-z 0-9 @ * _ + - . / |
| Raum wird | %20 |
%20 |
%20 |
& und = |
codiert (%26, %3D) |
Nicht codiert | verschlüsselt |
| Unicode-Handling | Korrigieren Sie UTF-8 Bytes | Korrigieren Sie UTF-8 Bytes | kaputt - nicht standardmäßig %uXXXX |
| etw zu et | Parameterwerte, Pfadsegmente, alles innerhalb einer URL | Eine vollständige URL, die Sie nicht umstrukturieren möchten | nichts |
| Status | Standard, empfohlen | Standard, Nische | missbilligt |
Meine Haltung, und ich werde auf diesem Hügel sterben: einsetzen encodeURIComponent Für Werte fast immer. Das mentale Modell ist einfach - wenn die Schnur geht Innenseite Eine URL (ein Abfragewert, ein Pfadsegment, ein redirect_uri), es ist eine Komponente und erhält encodeURIComponentdrohen die Fälle, in denen encodeURI Ist wirklich richtig, sind selten: Sie haben eine vollständige, bereits strukturierte URL, die Leerzeichen oder Nicht-ASCII-Zeichen enthält, und Sie möchten sie bereinigen, ohne ihre Struktur zu berühren. Das sind vielleicht 5% der realen Codierungsaufrufe. und escape() Sollte nach ungefähr 2010 einfach nie in Code erscheinen, der nach ungefähr 2010 geschrieben wurde - seine Unicode-Ausgabe ist nicht gültig, und jeder moderne Linter wird ihn trotzdem kennzeichnen.
Noch eine Nuance: encodeURIComponent Blätter ! ' ( ) * Aus historischen Gründen nicht codiert, obwohl RFC 3986 sie als reservierte Unterbegrenzer auflistet. Für OAuth- und Strict-Parsing-APIs fügen einige Bibliotheken einen zweiten Durchgang hinzu, um diese fünf ebenfalls zu codieren. Wenn eine wählerische API Ihre Werte ablehnt, ist dies ein Ort zum Durchsuchen - und die URL-Encoder Der Komponentenmodus zeigt Ihnen genau, welche Zeichen konvertiert wurden, damit Sie vergleichen können.
Häufig gestellte Fragen
Was ist URL-Codierung?
Die URL-Codierung (Procent-Codierung) ist der Mechanismus zum Darstellen von Zeichen in einer URL, die sonst unsicher oder strukturell aussagekräftig wäre. Jedes problematische Zeichen wird in seine UTF-8-Bytes umgewandelt und jedes Byte wird als Prozentzeichen geschrieben, gefolgt von zwei hexadezimalen Ziffern - ein Leerzeichen wird% 20, ein Ampersand wird zu% 26. Die Regeln sind in RFC 3986 definiert. Es existiert, weil URLs nur einen begrenzten Zeichensatz und Zeichen wie ? und & Jobs innerhalb der URL-Struktur erledigen.
Warum werden aus Räumen manchmal und + manchmal% 20?
Zwei verschiedene Spezifikationen. RFC 3986, das URLs selbst regelt, codiert einen Leerzeichen als %20. Das von HTML-Formulareinreichungen verwendete application/x-www-form-urlencoded Format, das im WhatWG-URL-Standard definiert ist, codiert ein Leerzeichen als +. Beide sind in ihrem eigenen Kontext gültig, weshalb + in einer Abfragezeichenfolge mehrdeutig ist. Die sichere Praxis: Produzieren Sie immer% 20 für Räume und% 2B für literale Pluszeichen - jeder Parser verarbeitet diese korrekt.
Was ist der Unterschied zwischen encodeuri und encodeurcomponent?
EncodeUriComponent codiert fast alles, einschließlich /, ?, & , und =, was es für einzelne Werte in einer URL sicher macht.EncodeUri bewahrt diese reservierten Zeichen, so dass eine vollständige URL ihre Struktur behält. Verwenden Sie encodeUriComponent für Parameterwerte und Pfadsegmente - was fast jeder reale Fall ist - und encodeiri nur, wenn eine vollständige URL saniert wird, ohne sie neu zu strukturieren. Wenn Sie encodeUri für einen Wert mit & amp; verwenden, wird Ihre Abfragezeichenfolge stillschweigend unterbrochen.
Wie repariere ich eine doppelt codierte URL?
Doppelkodierung tritt auf, wenn eine bereits codierte Zeichenfolge erneut codiert wird -% 20 wird zu% 2520, da sich der% selbst in% 25 verwandelt. Um dies zu beheben, dekodieren Sie den String wiederholt, bis keine %xx-Sequenzen erhalten bleiben und der Ausgang nicht mehr verändert wird. Suchen Sie dann, welche Schicht Ihres Systems zweimal codiert wird - normalerweise Ihr Code plus einen Proxy-, Umleitungsdienst oder E-Mail-Link-Wrapper - und entfernen Sie einen der Codierungsschritte. Die Regel: Genau einmal codieren, im letzten Moment bevor der Wert die URL eingibt.
Ist es sicher, URLs in einem Online-Tool zu dekodieren?
Nur wenn das Tool clientseitig ausgeführt wird. URLs enthalten häufig OAuth-Codes, Kennwort-Reset-Token, Sitzungs-IDs und E-Mail-Adressen. Ein serverseitiges Tool empfängt all das und kann es auf unbestimmte Zeit in Zugriffsprotokollen aufbewahren. Der Toolz.dev-URL-Encoder/-Decoder führt die gesamte Konvertierung in Ihrem Browser mit JavaScript durch – es werden keine Daten übertragen, die Sie auf der Registerkarte Netzwerk Ihres Browsers überprüfen können. Für alles, was Anmeldeinformationen oder Token enthält, sollte die clientseitige Verarbeitung nicht verhandelbar sein.
Muss ich die gesamte URL oder nur die Parameter codieren?
Nur die Datenteile – einzelne Parameterwerte und gelegentlich Pfadsegmente. Die strukturellen Zeichen der URL selbst (die : // nach dem Schema, die ? Wenn die Abfrage gestartet wird, müssen die & Between-Parameter nicht codiert bleiben oder die URL funktioniert nicht mehr. Codieren Sie jeden Wert separat mit der Codierung im Komponentenstil und fügen Sie dann die URL um ihn herum zusammen. Die Kodierung einer vollständigen URL-End-to-End-Endung ist nur dann korrekt, wenn diese URL selbst zu einem Wert innerhalb einer anderen URL wird, wie z. B. einer OAuth-Redirect_URI.
Kann die URL-Codierung Emoji und nicht englische Zeichen verarbeiten?
Ja - Moderne Prozent-Codierung wird mit UTF-8-Bytes betrieben, sodass jedes Unicode-Zeichen funktioniert. Ein Zwei-Byte-Charakter wie É wird zu %C3%A9, und ein Vier-Byte-Emoji wird zu vier Prozent-Sequenzen, wie zum Beispiel %F0%9F%9A%80. Probleme treten nur bei älteren Tools oder der veralteten Escape()-Funktion von JavaScript auf, die eine Einzelbyte-Codierung voraussetzen und eine ungültige Ausgabe erzeugen. Der Toolz.dev-Encoder handhabt die volle UTF-8 korrekt in beide Richtungen.
Warum wird meine URL gebrochen, wenn ein Parameter ein Ampersand enthält?
Weil & das Begrenzer zwischen Parametern ist. Wenn ein Wert ein Roh-Ampersand enthält – sagen wir UTM_Campaign=Black&Amp;Friday –, analysiert der Server ihn als Parameter mit dem Namen utm_campaign mit dem Wert schwarz sowie einem zweiten Parameter namens Friday. Es wird kein Fehler ausgelöst, Ihre Daten sind nur lautlos falsch. Codieren Sie das Ampersand als %26 innerhalb des Wertes und der Parameter kommt intakt an. Dies ist einer der häufigsten und am wenigsten sichtbaren URL-Fehler.
Was bedeutet %2F in einer URL?
%2f ist der prozentual codierte Schrägstrich. Sie werden es sehen, wenn ein Wert, der einen Schrägstrich enthält - einen Dateipfad, ein Datum wie 07/07 oder eine verschachtelte URL - korrekt codiert wird, bevor es in einem Abfrageparameter oder einem Pfadsegment platziert wird. Beachten Sie, dass einige Server und Proxys (Apache, ältere Tomcat-Versionen, verschiedene API-Gateways) aus Sicherheitsgründen im Pfad %2F im Pfad ablehnen oder stillschweiden. Wenn also eine Anfrage mit einem codierten Schrägstrich eine 404 zurückgibt, ist die serverseitige Konfiguration normalerweise der Schuldige, nicht Ihre Codierung.
Wie codiere ich in Python, PHP oder in der Befehlszeile?
Python: urllib.parse.quote () für Pfadsegmente und quote_plus () für Abfragewerte im Formularstil. PHP: rawurlencode() erzeugt RFC 3986 Ausgabe mit %20 für Leerzeichen, während urlenCode() eine Form-Style-Ausgabe mit + erzeugt. Befehlszeile: jq -rr @uri oder curl's --data-urlencode-Flag. Jedes dieser Elemente entspricht dem Verhalten im Komponentenstil dieses Tools, sodass Sie die Codierung hier prototypisieren und überprüfen können, ob Ihr Code eine byteidentische Ausgabe erzeugt.
Abschluss
Die URL-Codierung ist eine kleine Fertigkeit mit einer übergroßen Auszahlung. Sobald Sie lesen können %C3%A9 Als é und spot %2520 Als Doppelkodierungsgeruch funktioniert eine ganze Kategorie von "Es funktioniert auf meiner Maschine" - Fehler - gebrochene OAuth-Flüsse, Phantom-UTM-Kampagnen, APIs, die perfekt vernünftig aussehende Anfragen ablehnen - von mysteriös zu mechanisch. Die Regeln passen auf eine Karte: Nicht reservierte Zeichen werden durch, alles andere wird UTF-8 Bytes als %hh, codiert Werte nicht strukturieren und kodiert genau einmal.
Halten Sie das URL-Encoder/Decoder Lesezeichen neben seinen Geschwistern - die Base64-Konverter Für das andere Codierungsschema treffen Sie in jedem Auth-Header (ich habe eine vollständige geschrieben Base64-Codierungshandbuch auf wann welche verwendet werden), die HTML-Entitäten-Encoder/-Decoder für die dritte Codierungsschicht, die Webinhalte gerne oben stapeln (die HTML-Entitätshandbuch Deckt die doppelt entkommene Version der gleichen Falle ab, mit der ich getroffen habe %2520), und das JSON-Formater Für was auch immer die dekodierte URL zeigt.
Und wenn Sie ein breiteres browserbasiertes Debugging-Kit zusammenstellen, Anleitung für die Coding-Tools Geht durch, wie diese Werkzeuge in einem echten Workflow zusammenpassen. Alles auf toolz.dev läuft clientseitig, kostet nichts und macht einen Job gut. Das ist die ganze Tonhöhe - das gleiche, was ich mir wünschte, jemand hätte mir gemacht, bevor ich zwei Tage mit einem einzigen falsch platzierten% 25 verbracht habe.
