Warum müssen URLs kodiert werden?

URLs können nur eine begrenzte Menge von ASCII-Zeichen enthalten. Daher müssen Zeichen mit besonderer Bedeutung in der URL-Syntax (wie &, =, #, Leerzeichen) oder Nicht-ASCII-Zeichen (wie internationale Schriften) percent-kodiert werden, um sicher ohne Beschädigung der URL-Struktur übertragen zu werden.

Welche Zeichen werden in URLs am häufigsten kodiert?

Die am häufigsten kodierten Zeichen sind Leerzeichen (%20 oder +), kaufmännisches Und (%26), Gleichheitszeichen (%3D), Raute (%23), Fragezeichen (%3F), Schrägstrich (%2F) und Pluszeichen (%2B). Diese Zeichen haben eine besondere Bedeutung in der URL-Syntax und müssen kodiert werden, wenn sie als Daten verwendet werden.

Was ist der Unterschied zwischen einer URL und einer URI?

Eine URI (Uniform Resource Identifier) ist das umfassendere Konzept zur Identifizierung einer Ressource, während eine URL (Uniform Resource Locator) ein spezifischer URI-Typ ist, der auch angibt, wie auf die Ressource zugegriffen werden kann, indem er das Protokoll (wie https://) und den Speicherort enthält.

URL-Encoding erklärt — Alles, was du wissen musst

Was ist URL-Encoding?

URL-Encoding, auch bekannt als Percent-Encoding, ist ein Mechanismus, um Zeichen in ein Format umzuwandeln, das sicher in URLs übertragen werden kann. Da URLs nur eine begrenzte Menge von Zeichen aus dem ASCII-Zeichensatz enthalten dürfen, muss jedes Zeichen außerhalb dieses Sets — oder jedes Zeichen mit einer besonderen Bedeutung in der URL-Syntax — kodiert werden.

Hast du schon mal %20 in einer URL gesehen und dich gefragt, was das bedeutet? Oder hattest du Probleme mit defekten Links, die Sonderzeichen enthalten? Dieser Leitfaden gibt dir ein gründliches Verständnis davon, wie URL-Encoding funktioniert und warum es wichtig ist.

Möchtest du schnell eine URL kodieren oder dekodieren? Probier unser URL-Encoder/Decoder-Tool — es verarbeitet alle Kodierungsregeln automatisch.

Warum URL-Encoding existiert

URLs wurden in den frühen Tagen des Internets entwickelt, als Systeme nur begrenzte Zeichensatz-Unterstützung hatten. Die ursprüngliche URL-Spezifikation (RFC 1738, veröffentlicht 1994) beschränkte URLs auf eine kleine Teilmenge von ASCII-Zeichen. Das war eine pragmatische Entscheidung, die sicherstellte, dass URLs über verschiedene Systeme, Netzwerke und Protokolle hinweg funktionieren würden.

Das Problem ist, dass die echte Welt weit mehr als grundlegendes ASCII erfordert:

Leerzeichen in Dateinamen: Mein Dokument.pdf muss als Mein%20Dokument.pdf kodiert werden
Internationale Zeichen: Deutsch, Chinesisch, Arabisch und andere Sprachen benötigen Kodierung
Sonderzeichen in Daten: Abfrageparameter können Zeichen wie &, =, # enthalten, die in URLs eine besondere Bedeutung haben
Binärdaten: Manchmal müssen Binärdaten in URLs eingebettet werden

URL-Encoding löst all diese Probleme durch einen universellen Escape-Mechanismus.

Wie Percent-Encoding funktioniert

Der Percent-Encoding-Algorithmus ist unkompliziert:

Nimm das zu kodierende Zeichen
Konvertiere es in seine Byte-Darstellung (UTF-8 für Nicht-ASCII-Zeichen)
Schreibe für jedes Byte ein % gefolgt von zwei hexadezimalen Ziffern

Beispiele

Zeichen	UTF-8-Bytes	Percent-kodiert
Leerzeichen	`0x20`	`%20`
`!`	`0x21`	`%21`
`#`	`0x23`	`%23`
`$`	`0x24`	`%24`
`&`	`0x26`	`%26`
`+`	`0x2B`	`%2B`
`/`	`0x2F`	`%2F`
`=`	`0x3D`	`%3D`
`?`	`0x3F`	`%3F`
`@`	`0x40`	`%40`

Mehrbyte-Zeichen

Nicht-ASCII-Zeichen benötigen in UTF-8 mehrere Bytes und erzeugen daher mehrere Percent-kodierte Sequenzen:

Zeichen	UTF-8-Bytes	Percent-kodiert
`ä`	`0xC3 0xA4`	`%C3%A4`
`ö`	`0xC3 0xB6`	`%C3%B6`
`ü`	`0xC3 0xBC`	`%C3%BC`
Euro-Zeichen	`0xE2 0x82 0xAC`	`%E2%82%AC`
Emoji (Lächeln)	`0xF0 0x9F 0x98 0x80`	`%F0%9F%98%80`

Probier diese Zeichen selbst mit unserem URL-Encoder-Tool aus.

URL-Struktur und reservierte Zeichen

Um URL-Encoding richtig zu verstehen, musst du die URL-Struktur kennen:

https://user:pass@www.example.com:8080/path/to/page?key=value&foo=bar#section
|_____|  |______| |_______________|____||___________|_________________|_______|
Schema  Benutzer     Host          Port    Pfad         Abfrage       Fragment

Reservierte Zeichen

Reservierte Zeichen haben besondere Bedeutungen in URLs. Wenn du sie als Daten (und nicht als Trennzeichen) verwenden möchtest, müssen sie percent-kodiert werden.

Zeichen	Zweck in der URL	Kodierte Form
`:`	Trennt Schema, Port, Benutzerinfo	`%3A`
`/`	Trennt Pfadsegmente	`%2F`
`?`	Beginnt Abfragestring	`%3F`
`#`	Beginnt Fragment	`%23`
`@`	Trennt Benutzerinfo von Host	`%40`
`&`	Trennt Abfrageparameter	`%26`
`=`	Trennt Schlüssel von Wert in Abfrage	`%3D`
`+`	Leerzeichen in Abfragestrings (veraltet)	`%2B`

Nicht-reservierte Zeichen

Diese Zeichen müssen in keinem Teil einer URL kodiert werden:

Buchstaben: A-Z und a-z
Ziffern: 0-9
Bindestrich: -
Punkt: .
Unterstrich: _
Tilde: ~

Das Leerzeichen: `%20` vs. `+`

Die Kodierung von Leerzeichen ist einer der verwirrendsten Aspekte des URL-Encodings:

%20: Die korrekte Percent-Kodierung für ein Leerzeichen, verwendet in Pfadsegmenten
+: Eine alternative Kodierung für Leerzeichen, aber nur in Abfragestrings gültig (aus dem application/x-www-form-urlencoded-Format)

Pfad:    https://example.com/meine%20Dokumente/datei%20name.pdf  (korrekt)
Pfad:    https://example.com/meine+Dokumente/datei+name.pdf      (FALSCH - + ist wörtlich)

Abfrage: https://example.com/search?q=hallo+welt                  (korrekt)
Abfrage: https://example.com/search?q=hallo%20welt                (auch korrekt)

Best Practice: %20 in Pfadsegmenten verwenden und + oder %20 in Abfragestrings. Im Zweifelsfall funktioniert %20 immer.

URL-Encoding in verschiedenen Programmiersprachen

JavaScript

JavaScript bietet mehrere Funktionen für URL-Encoding, jede mit einem anderen Gültigkeitsbereich:

// encodeURIComponent - URI-Komponente kodieren (Abfrageparameterwert)
encodeURIComponent('Hallo Welt & Tschüss')
// Ergebnis: "Hallo%20Welt%20%26%20Tsch%C3%BCss"

// encodeURI - Vollständige URI kodieren (bewahrt URL-Strukturzeichen)
encodeURI('https://example.com/Pfad mit Leerzeichen?q=hallo welt')
// Ergebnis: "https://example.com/Pfad%20mit%20Leerzeichen?q=hallo%20welt"

// decodeURIComponent - URI-Komponente dekodieren
decodeURIComponent('Hallo%20Welt%20%26%20Tsch%C3%BCss')
// Ergebnis: "Hallo Welt & Tschüss"

Hauptunterschied zwischen encodeURI und encodeURIComponent:

Funktion	Kodiert NICHT	Verwendungszweck
`encodeURI`	`:`, `/`, `?`, `#`, `&`, `=`, `@`, `+`	Vollständige URL kodieren
`encodeURIComponent`	Nur nicht-reservierte Zeichen	Abfrageparameterwert kodieren

Die URLSearchParams API

Modernes JavaScript bietet URLSearchParams für den Umgang mit Abfragestrings:

// Abfragestrings erstellen
const params = new URLSearchParams();
params.set('name', 'Max Müller');
params.set('city', 'München');
params.set('interests', 'Programmierung & Design');
console.log(params.toString());

// Abfragestrings parsen
const url = new URL('https://example.com/search?q=hallo+welt&page=2');
console.log(url.searchParams.get('q'));   // "hallo welt"
console.log(url.searchParams.get('page')); // "2"

Python

from urllib.parse import quote, unquote, urlencode, parse_qs

# Zeichenkette für URL-Pfad kodieren
quote('hallo welt/pfad')  # 'hallo%20welt/pfad' (/ wird nicht kodiert)
quote('hallo welt/pfad', safe='')  # 'hallo%20welt%2Fpfad' (alles kodieren)

# Percent-kodierte Zeichenkette dekodieren
unquote('hallo%20welt')  # 'hallo welt'

# Abfragestrings erstellen
params = {'q': 'hallo welt', 'kategorie': 'bücher & medien'}
urlencode(params)  # 'q=hallo+welt&kategorie=b%C3%BCcher+%26+medien'

Java

import java.net.URLEncoder;
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;

// Kodieren
String encoded = URLEncoder.encode("Hallo Welt & mehr", StandardCharsets.UTF_8);
// Ergebnis: "Hallo+Welt+%26+mehr"

// Dekodieren
String decoded = URLDecoder.decode("Hallo+Welt+%26+mehr", StandardCharsets.UTF_8);
// Ergebnis: "Hallo Welt & mehr"

PHP

// URL-Encoding (Leerzeichen als +)
urlencode('Hallo Welt & mehr');  // "Hallo+Welt+%26+mehr"

// Raw-URL-Encoding (Leerzeichen als %20)
rawurlencode('Hallo Welt & mehr');  // "Hallo%20Welt%20%26%20mehr"

// Abfragestring erstellen
http_build_query(['q' => 'hallo welt', 'seite' => 1]);
// "q=hallo+welt&seite=1"

UTF-8 und internationale Zeichen in URLs

Der IRI-Standard

Internationalized Resource Identifiers (IRIs, definiert in RFC 3987) erweitern URLs zur Unterstützung von Unicode-Zeichen. Bei der Übertragung werden IRIs jedoch mit UTF-8-Percent-Encoding in URIs konvertiert.

IRI:  https://example.com/München
URI:  https://example.com/M%C3%BCnchen

IRI:  https://example.com/search?q=Köln
URI:  https://example.com/search?q=K%C3%B6ln

Internationalisierte Domainnamen (IDN)

Domainnamen mit Nicht-ASCII-Zeichen verwenden Punycode-Encoding:

Unicode:  https://münchen.de
Punycode: https://xn--mnchen-3ya.de

Häufige URL-Encoding-Probleme und Lösungen

Problem 1: Doppelt-Encoding

Doppelt-Encoding tritt auf, wenn eine bereits kodierte URL erneut kodiert wird:

Original:       hallo welt
Erstes Encoding: hallo%20welt
Doppelt-Encoding: hallo%2520welt  (%25 ist die Kodierung von %)

Lösung: Prüfen, ob die Eingabe bereits kodiert ist, bevor sie kodiert wird:

function safeEncodeURIComponent(str) {
  try {
    const decoded = decodeURIComponent(str);
    if (decoded !== str) {
      return str; // Bereits kodiert
    }
  } catch (e) {
    // Dekodierung fehlgeschlagen -- neu kodieren
  }
  return encodeURIComponent(str);
}

Problem 2: Die gesamte URL statt einzelner Komponenten kodieren

// FALSCH: Die gesamte URL kodieren
const url = 'https://api.example.com/search?q=hallo welt';
const encoded = encodeURIComponent(url);
// "https%3A%2F%2Fapi.example.com%2Fsearch%3Fq%3Dhallo%20welt"
// Das ist als URL völlig unbrauchbar!

// RICHTIG: Nur die Komponente kodieren, die es braucht
const baseUrl = 'https://api.example.com/search';
const query = encodeURIComponent('hallo welt');
const correctUrl = `${baseUrl}?q=${query}`;
// "https://api.example.com/search?q=hallo%20welt"

Problem 3: Sonderzeichen in API-Parametern nicht kodieren

// Bug: & im Wert zerstört den Abfragestring
const apiUrl = `https://api.example.com/search?q=Tom & Jerry&seite=1`;
// Das erstellt DREI Parameter: q=Tom, Jerry, seite=1

// Fix: Den Parameterwert kodieren
const apiUrl = `https://api.example.com/search?q=${encodeURIComponent('Tom & Jerry')}&seite=1`;
// Korrekt: q=Tom%20%26%20Jerry&seite=1

URL-Encoding-Referenztabelle

Zeichen	Dezimal	Hex	Kodiert	Beschreibung
(Leerzeichen)	32	20	`%20`	Leerzeichen
`!`	33	21	`%21`	Ausrufezeichen
`"`	34	22	`%22`	Anführungszeichen
`#`	35	23	`%23`	Raute / Fragmenttrennzeichen
`$`	36	24	`%24`	Dollarzeichen
`%`	37	25	`%25`	Prozentzeichen (Escape-Zeichen)
`&`	38	26	`%26`	Kaufmännisches Und / Abfragetrennzeichen
`/`	47	2F	`%2F`	Schrägstrich / Pfadtrennzeichen
`:`	58	3A	`%3A`	Doppelpunkt
`=`	61	3D	`%3D`	Gleichheitszeichen
`?`	63	3F	`%3F`	Fragezeichen / Abfragetrennzeichen
`@`	64	40	`%40`	At-Zeichen

Fazit

URL-Encoding ist ein grundlegendes Konzept in der Webentwicklung, das jede Anwendung betrifft, die mit URLs arbeitet. Das Verständnis von Percent-Encoding, wann encodeURIComponent gegenüber encodeURI zu verwenden ist, und wie verschiedene Programmiersprachen mit URL-Encoding umgehen, bewahrt dich vor subtilen Bugs und Sicherheitsproblemen.

Wichtigste Erkenntnisse:

encodeURIComponent für Werte, encodeURI für vollständige URLs in JavaScript
Leerzeichen können %20 oder + sein — %20 ist immer sicher
Nicht-ASCII-Zeichen verwenden UTF-8 vor dem Percent-Encoding
Achte auf Doppelt-Encoding — der häufigste URL-Encoding-Bug
URLSearchParams nutzen in JavaScript für sicheres Erstellen von Abfragestrings
Benutzereingaben immer kodieren bevor sie in URLs eingebettet werden

Für schnelles URL-Encoding und -Decoding, speichere unser URL-Encoder/Decoder-Tool als Lesezeichen.