URL-Encoder & -Decoder

Zwei Werkzeuge auf einer Seite

Auf dieser Seite stecken zwei Werkzeuge. Das obere kodiert oder dekodiert eine Zeichenkette, das untere, „URL-Struktur analysieren“, zerlegt eine vollständige URL in ihre Bestandteile. Die beiden beeinflussen einander nicht.

Im oberen wählst du unter „Richtung“ zwischen „Kodieren“ und „Dekodieren“ und legst dann zwei Dinge fest.

• Kodierungsart: „Einzelner Wert“ ist für ein Stück gedacht, das in eine URL eingesetzt wird, etwa den Wert eines Query-Parameters. „Ganze URL“ ist für eine Zeichenkette, die schon die Form einer Adresse hat. Worin sich beide unterscheiden, steht im nächsten Abschnitt.
• + als Leerzeichen (application/x-www-form-urlencoded): Schalte das nur ein, wenn du mit Daten arbeitest, die ein HTML-Formular sendet.

Beim Kodieren heißen die beiden Felder „Ausgangstext“ und „Kodiertes Ergebnis“, beim Dekodieren „Kodierte Zeichenkette“ und „Dekodiertes Ergebnis“. Aus € wird beim Kodieren %E2%82%AC. Das Zeichen belegt in UTF-8 3 Bytes und wird deshalb zu drei %XX. „Ins Dekodieren-Feld übernehmen“ und „Ins Kodieren-Feld übernehmen“ schieben das eben erzeugte Ergebnis als Eingabe in die Gegenrichtung.

„Einzelner Wert“ und „Ganze URL“ lassen unterschiedliche Zeichen stehen

Beide Arten ersetzen Zeichen, die in einer URL nicht unverändert stehen dürfen, durch % und zwei Hexadezimalziffern (Prozent-Kodierung). Der Unterschied liegt darin, was mit Zeichen wie /, ? und & geschieht, die eine URL gliedern. „Einzelner Wert“ liefert dasselbe wie encodeURIComponent in JavaScript, „Ganze URL“ dasselbe wie encodeURI.

Dieselbe Eingabe https://example.com/café?q=crème brûlée&page=1#menü fällt je nach Art so aus:

• Ganze URL: https://example.com/caf%C3%A9?q=cr%C3%A8me%20br%C3%BBl%C3%A9e&page=1#men%C3%BC
• Einzelner Wert: https%3A%2F%2Fexample.com%2Fcaf%C3%A9%3Fq%3Dcr%C3%A8me%20br%C3%BBl%C3%A9e%26page%3D1%23men%C3%BC

Das erste Ergebnis funktioniert direkt als Adresse. Das zweite taugt nicht mehr als Adresse, lässt sich dafür aber als Ganzes in den Parameterwert einer anderen URL setzen (?redirect=...). Umgekehrt: Soll der Suchbegriff a/b&c als Query-Wert in eine URL und du nimmst „Ganze URL“, bleibt das & stehen und wird als Beginn des nächsten Parameters gelesen. Hier brauchst du „Einzelner Wert“, das ergibt a%2Fb%26c.

Beim Dekodieren gibt es denselben Unterschied. Mit „Ganze URL“ bleibt die Kodierung der gliedernden Zeichen bestehen. Aus a%2Fb%3Fc%26d%23e%20f macht „Einzelner Wert“ a/b?c&d#e f, „Ganze URL“ dagegen a%2Fb%3Fc%26d%23e f. Steht nach dem Dekodieren noch %2F oder %26 im Ergebnis, stell die Kodierungsart auf „Einzelner Wert“ um.

Merk dir außerdem, dass ! ' ( ) * auch bei „Einzelner Wert“ unverändert bleiben. Verlangt ein Server, dass selbst diese Zeichen kodiert sind, musst du sie im Ergebnis von Hand durch %21, %27, %28, %29 und %2A ersetzen.

+ als Leerzeichen

Daten, die ein HTML-<form> sendet (application/x-www-form-urlencoded), schreiben ein Leerzeichen nicht als %20, sondern als +. Schalte „+ als Leerzeichen“ ein, wenn du dieses Format erzeugen oder lesen willst.

Mit eingeschalteter Option wird ein +, das schon im Ausgangstext stand, zu %2B, damit es nicht mit einem Leerzeichen verwechselt wird. „Ganze URL“ lässt ein + normalerweise stehen, ersetzt es mit dieser Option aber genauso durch %2B. Beim Dekodieren ohne die Option ist ein + einfach ein +. Hast du einen Wert wie q=crème+brûlée aus der Adresse einer Suchergebnisseite kopiert und nach dem Dekodieren steht das + immer noch da, ist das ein Fall für diese Option. In URL-Pfaden und Dateinamen bedeutet + kein Leerzeichen, lass sie dort ausgeschaltet.

Was „URL-Struktur analysieren“ anzeigt

Gibst du in das Feld „Vollständige URL“ eine vollständige URL ein, die mit einem Protokoll wie https:// beginnt, erscheinen „Protokoll“, „Host“ und „Pfad“ und, sofern vorhanden, zusätzlich „Query-String“ und „Hash“. In der Tabelle darunter steht jeder Query-Parameter mit „Schlüssel“ und „Wert (dekodiert)“ in einer eigenen Zeile. Fehlt das Protokoll wie bei example.com/path, heißt es „Das ist keine vollständige URL mit Protokoll (wie https://).“

Angezeigt wird nicht die Eingabe Zeichen für Zeichen, sondern das, was der Browser nach dem Parsen und Aufräumen der URL daraus gemacht hat. Für https://Example.COM:443/a/../b/café?q=hello%20world&tag=a&tag=b&x=1+2#top sieht das so aus:

Die Tabelle enthält vier Zeilen: q = hello world, tag = a, tag = b, x = 1 2. Kommt ein Schlüssel mehrfach vor, gibt es auch mehrere Zeilen. Am Wert von x siehst du, dass diese Tabelle ein + immer als Leerzeichen liest, egal wie das Kontrollkästchen „+ als Leerzeichen“ oben steht. So verlangt es der URL-Standard: Ein Query-String wird im Format von Formulardaten ausgewertet.

Zwei Dinge noch. Domains mit Nicht-ASCII-Zeichen stehen unter „Host“ in Punycode (https://café.example/ → xn--caf-dma.example). Und enthält die Adresse Benutzername und Passwort wie in http://user:pw@host:8080/p, taucht dieser Teil in keinem Feld auf. Unter „Host“ steht nur host:8080.

Eingaben, an denen das Dekodieren scheitert

Das Dekodieren gelingt nur, wenn auf jedes % zwei Hexadezimalziffern folgen und die so entstandenen Bytes gültige UTF-8-Zeichen ergeben. Passt auch nur eine Stelle nicht, gibt es kein Ergebnis, sondern eine Meldung, die mit „Die Prozent-Kodierung ist nicht gültig.“ beginnt.

Das Kodieren scheitert nie. Auch eine Eingabe, die für sich kein Zeichen ergibt, etwa ein halbes Emoji, wird ohne Fehler kodiert, und zwar als Ersatzzeichen (%EF%BF%BD).