URL-Abfrageparameter kodieren: Online-Kodierer

Das kodierte Ergebnis

Die Eingabe search query=hello world&category=cafe & resumo&redirect=https://example.com/path?id=42 wird kodiert als:

search%20query%3Dhello%20world%26category%3Dcafe%20%26%20resumo%26redirect%3Dhttps%3A%2F%2Fexample.com%2Fpath%3Fid%3D42

Jedes Zeichen außer den nicht reservierten (A-Z a-z 0-9 - _ . ~) wurde durch seine prozentkodierte Form ersetzt. Die =-Zeichen, &-Zeichen, die akzentuierten Buchstaben und die vollständige URL im Redirect-Parameter sind alle sicher kodiert.

Prozentkodierung (RFC 3986)

Die Prozentkodierung ist in RFC 3986 definiert. Die Regel ist einfach: Jedes Byte, das kein nicht reserviertes Zeichen ist, wird als Prozentzeichen gefolgt von zwei hexadezimalen Großbuchstaben kodiert, die den Wert dieses Bytes darstellen.

Nicht reservierte Zeichen, die nie kodiert werden müssen:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 - _ . ~

Alles andere (Leerzeichen, Satzzeichen, nicht-ASCII, Steuerzeichen) muss kodiert werden, wenn es an einer Position erscheint, an der der URL-Parser es falsch interpretieren würde.

Warum Sonderzeichen URLs beschädigen

Eine URL hat eine definierte Syntax. Zeichen wie ?, &, =, #, / und : haben spezifische Rollen in der URL-Struktur:

• ? trennt den Pfad von der Abfragezeichenkette
• & trennt Abfrageparameter voneinander
• = trennt einen Parameterschlüssel von seinem Wert
• # beginnt den Fragmentbezeichner
• / trennt Pfadsegmente
• : trennt das Schema vom Rest

Wenn ein Abfrageparameterwert eines dieser Zeichen ohne Kodierung enthält, liest der URL-Parser sie als Strukturmarkierungen und der Parameterwert wird abgeschnitten oder falsch interpretiert.

encodeURI vs encodeURIComponent

encodeURI dient zum Kodieren einer vollständigen URL. Es lässt alle Zeichen intakt, die in der URL-Struktur bedeutsam sind:

encodeURI("https://example.com/search?q=ola mundo")
// "https://example.com/search?q=ola%20mundo"
// Hinweis: ? und = werden NICHT kodiert

encodeURIComponent dient zum Kodieren eines Wertes, der in eine URL-Komponente eingefügt wird (ein Abfrageparameterwert, ein Pfadsegment oder ein Fragment). Es kodiert alles, was mit URL-Struktur verwechselt werden könnte:

encodeURIComponent("ola mundo&tchau=mundo")
// "ola%20mundo%26tchau%3Dmundo"
// Hinweis: & und = WERDEN kodiert

Zum Erstellen von Abfragezeichenketten verwende immer encodeURIComponent sowohl für Schlüssel als auch für Werte:

const params = {
  q: "cafe & resumo",
  redirect: "https://example.com/path?id=42"
};

const queryString = Object.entries(params)
  .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
  .join("&");

Oder verwende URLSearchParams, das die Kodierung automatisch handhabt:

const params = new URLSearchParams({
  q: "cafe & resumo",
  redirect: "https://example.com/path?id=42"
});
params.toString();

Die + vs %20 Debatte für Leerzeichen

Zwei Spezifikationen kodieren Leerzeichen unterschiedlich:

• RFC 3986 (URI): Leerzeichen -> %20
• HTML-Formularkodierung (application/x-www-form-urlencoded): Leerzeichen -> +

Beide werden von Webservern weitgehend akzeptiert. In Python ist der Unterschied explizit:

from urllib.parse import quote, quote_plus

quote("ola mundo")       # "ola%20mundo"  (RFC 3986)
quote_plus("ola mundo")  # "ola+mundo"    (Formularkodierung)

Für die API-Entwicklung bevorzuge %20. Für die HTML-Formularverarbeitung erwarte + und verwende den entsprechenden Decoder.

Nicht-ASCII-Zeichen kodieren

Nicht-ASCII-Zeichen durchlaufen zwei Schritte:

1. Das Zeichen als UTF-8-Bytes kodieren.
2. Jedes Byte prozentkodieren.

Der Buchstabe é (U+00E9) ist ein Codepunkt, aber zwei UTF-8-Bytes: 0xC3 und 0xA9. Die prozentkodierte Form ist %C3%A9.

Das Emoji 😀 (U+1F600) sind vier UTF-8-Bytes (0xF0 0x9F 0x98 0x80), kodiert zu %F0%9F%98%80.

Du kannst es in der Browser-Konsole überprüfen:

encodeURIComponent("é")    // "%C3%A9"
encodeURIComponent("😀")  // "%F0%9F%98%80"

UTF-8 ist der universelle Standard für die Prozentkodierung von Nicht-ASCII-Zeichen.

Häufige Fehler

Die vollständige URL anstelle von nur Parameterwerten kodieren

Wenn du https://example.com/path?q=ola an encodeURIComponent übergibst, werden die Doppelpunkte, Schrägstriche und das Fragezeichen kodiert, was einen beschädigten String erzeugt.

Vergessen, Parameterschlüssel zu kodieren

Schlüssel können ebenfalls Sonderzeichen enthalten, wenn sie von Benutzereingaben stammen. Kodiere sowohl Schlüssel als auch Werte.

Doppelte Kodierung

Wenn du einen URL-kodierten String erhältst und ihn erneut kodierst, wird jedes % zu %25. Das decodierte Ergebnis enthält literal %XX-Sequenzen anstelle der beabsichtigten Zeichen.

Annehmen, dass der Server mit fehlerhaften Eingaben umgeht

Einige Server sind nachsichtig und decodieren %-Sequenzen, die in unkodierten Eingaben erscheinen. Andere sind strikt. Verlasse dich nicht auf die Nachsicht des Servers. Kodiere korrekt auf Client-Seite.