Kurz gesagt: URL-Kodierung (Percent-Encoding) ersetzt unsichere Zeichen durch %XX-Sequenzen, damit Links Leerzeichen, Akzente und Symbole überstehen. Ein Leerzeichen wird %20, ein Kaufmanns-Und wird %26. Der Kniff ist zu wissen, wann man eine ganze URL kodiert und wann nur einen einzelnen Abfragewert — und dass encodeURIComponent und encodeURI nicht austauschbar sind.

Eine URL darf gefahrlos nur einen begrenzten Zeichensatz enthalten. Alles andere — Leerzeichen, Akzentbuchstaben und reservierte Symbole wie ?, &, # und = — muss percent-kodiert werden, sonst bricht der Link oder zeigt unerwartet woanders hin.

Was Percent-Encoding wirklich tut

Jedes unsichere Zeichen wird durch ein Prozentzeichen plus seinen hexadezimalen Byte-Wert ersetzt. Ein Leerzeichen ist %20, ein Kaufmanns-Und %26, ein Fragezeichen %3F. Das Dekodieren kehrt den Vorgang um und macht aus jedem gültigen %XX wieder das Originalzeichen.

%20 gegen + für Leerzeichen

Beide können „Leerzeichen“ bedeuten, aber nicht am selben Ort. %20 ist das percent-kodierte Leerzeichen, gültig im ganzen Pfad und in der Abfrage. Das Pluszeichen + bedeutet nur im Kontext application/x-www-form-urlencoded — Formularübermittlungen und Query-Strings — ein Leerzeichen und wird sonst wörtlich genommen. Im Zweifel ist %20 die sicherere, universellere Wahl.

encodeURIComponent gegen encodeURI

Das ist die Unterscheidung, die stolpern lässt. Nutzen Sie encodeURIComponent für einen einzelnen Wert, den Sie in eine URL setzen — etwa den Suchbegriff in ?q=hello%20world. Es kodiert reservierte Zeichen wie & und =, damit sie nicht für URL-Struktur gehalten werden. Nutzen Sie encodeURI nur bei einer vollständigen URL, wo diese reservierten Zeichen ihre strukturelle Bedeutung behalten müssen. Eine ganze URL mit encodeURIComponent zu kodieren zerstört ihre eigenen :// und ?; ein einzelnes Parameter mit encodeURI zu kodieren lässt gefährliche Zeichen unescaped.

Wann kodieren

  • Beim Bauen eines Query-Strings aus Benutzereingaben (Suchbegriffe, Filter, Namen).
  • Beim Einsetzen eines Links in einen anderen als ?redirect=- oder ?url=-Parameter.
  • Beim Umgang mit Dateinamen oder Pfaden, die Leerzeichen oder Akzente enthalten.
  • Beim Debuggen eines Links, der lokal geht, aber beim Teilen bricht.

URL-Kodierung ist kein Base64

Sie lösen verschiedene Probleme. Percent-Encoding macht unsichere Zeichen innerhalb einer URL sicher; Base64 kodiert Binärdaten in eine kompakte ASCII-Zeichenkette um, deren Ausgabe in einem Link weiterhin URL-Kodierung braucht. Das Falsche zu greifen erzeugt Links, die kodiert aussehen, aber nicht funktionieren.

Ein praktischer Ablauf

Fügen Sie den Rohwert in den URL-Kodierer / Dekodierer ein, um ein Parameter zu kodieren oder eine verdächtige %XX-Zeichenkette zu dekodieren — er dekodiert gültige Sequenzen und markiert ungültige, statt sie still zu beschädigen. Läuft derselbe Inhalt auch durch Base64, prüfen Sie ihn mit dem Base64-Kodierer / Dekodierer, um beide Schritte in der richtigen Reihenfolge anzuwenden.

Häufige Fehler

  • Eine ganze URL mit encodeURIComponent kodieren und ihre Struktur zerstören.
  • Annehmen, + bedeute überall in einer URL ein Leerzeichen.
  • Doppelte Kodierung — eine bereits kodierte Zeichenkette erneut durch den Kodierer schicken.
  • Percent-Encoding mit Base64 verwechseln.

Kodieren Sie die Teile, nicht das Ganze, und ein Link mit Leerzeichen, Akzenten oder verschachtelter URL kommt heil an.