URL-Encoding vs. Base64-Encoding: Worin liegt der Unterschied?

Was ist URL-Encoding?

URL-Encoding, auch Prozent-Kodierung genannt, ist in RFC 3986 als Mechanismus definiert, um Zeichen in einem URI darzustellen, die nicht zulässig sind oder eine besondere Bedeutung haben. Jedes zu kodierende Zeichen wird in ein oder mehrere Bytes umgewandelt (mittels UTF-8), und jedes Byte wird als Prozentzeichen (%) gefolgt von zwei großgeschriebenen Hexadezimalziffern dargestellt.

Ein Leerzeichen wird beispielsweise zu %20, ein kaufmännisches Und zu %26 und ein Nicht-ASCII-Zeichen wie das Euro-Zeichen zu %E2%82%AC (drei UTF-8-Bytes, jeweils prozentkodiert).

// Beispiele für URL-Encoding in JavaScript
encodeURIComponent('hello world');   // "hello%20world"
encodeURIComponent('price=10&qty=2'); // "price%3D10%26qty%3D2"
encodeURIComponent('cafe');         // "caf%C3%A9"

URL-Encoding ist speziell darauf ausgelegt, URLs sicher und gültig zu machen. Es kodiert nur Zeichen, die in URIs nicht zulässig sind oder eine reservierte Bedeutung haben, und lässt alphanumerische Zeichen sowie einige wenige sichere Symbole unverändert.

Was ist Base64-Encoding?

Base64-Encoding, definiert in RFC 4648, ist ein Binär-zu-Text-Kodierungsverfahren, das Binärdaten mithilfe eines Satzes von 64 ASCII-Zeichen darstellt: A-Z, a-z, 0-9, + und /, wobei = zur Auffüllung (Padding) verwendet wird. Aus jeweils drei Eingabebytes entstehen vier Ausgabezeichen.

Base64 wurde entwickelt, um Binärdaten über Kanäle zu übertragen, die nur Text zuverlässig unterstützen, etwa E-Mail (MIME) oder das Einbetten von Daten in XML/JSON. Es ist nicht auf URLs beschränkt und kodiert sämtliche Eingabebytes, nicht nur Sonderzeichen.

// Beispiele für Base64-Encoding in JavaScript
btoa('hello world');         // "aGVsbG8gd29ybGQ="
btoa('price=10&qty=2');      // "cHJpY2U9MTAmcXR5PTI="

// Bei Unicode-Zeichenketten zuerst nach UTF-8 kodieren
function toBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}
toBase64('cafe');           // "Y2Fmw6k="

Es gibt außerdem eine URL-sichere Variante von Base64 (Base64url), die + durch - und / durch _ ersetzt und häufig das =-Padding weglässt. Diese Variante wird in JWTs, in Data-URIs innerhalb von URLs und in anderen Kontexten verwendet, in denen die Standard-Base64-Zeichen mit der URL-Syntax kollidieren würden.

Die wichtigsten Unterschiede

Merkmal	URL-Encoding	Base64-Encoding
Standard	RFC 3986	RFC 4648
Zweck	URLs sicher machen	Binärdaten als Text darstellen
Kodiert	Nur Sonder-/reservierte Zeichen	Alle Eingabebytes
Ausgabeformat	%XX-Hex-Sequenzen	A-Z, a-z, 0-9, +, /, =
Größenzunahme	Variabel (nur kodierte Zeichen wachsen)	Immer ca. 33 % größer
Umkehrbar	Ja	Ja
Menschenlesbar	Teilweise (nicht reservierte Zeichen bleiben)	Nein
Standardmäßig URL-sicher	Ja (per Design)	Nein (enthält +, /, =)

Wann welches Verfahren verwenden

Verwende URL-Encoding, wenn du Sonderzeichen in eine URL einbinden musst, etwa in Werten von Query-Parametern, Pfadsegmenten oder Fragment-Bezeichnern. URL-Encoding ist die richtige Wahl für jede Situation, in der Daten innerhalb einer URL-Struktur eingebettet werden müssen.

Verwende Base64-Encoding, wenn du Binärdaten (Bilder, Dateien, verschlüsselte Nutzdaten) als Text darstellen, Binärinhalte in JSON oder XML einbetten oder Daten über reine Textkanäle übertragen musst. Base64 kommt außerdem in HTTP-Basic-Authentication-Headern und JSON Web Tokens (JWTs) zum Einsatz.

// URL-Encoding: einen Suchbegriff in eine URL einbetten
const searchUrl = 'https://example.com/search?q=' +
  encodeURIComponent('C++ & Java');
// "https://example.com/search?q=C%2B%2B%20%26%20Java"

// Base64: ein Bild in CSS oder HTML einbetten
const imageData = 'data:image/png;base64,iVBORw0KGgoAAAANS...';

// Base64: HTTP-Basic-Auth-Header
const credentials = btoa('username:password');
const header = 'Authorization: Basic ' + credentials;

Lassen sie sich kombinieren?

Ja, und in manchen Fällen musst du das sogar. Wenn du Base64-kodierte Daten als URL-Parameter übergeben musst, kann die Standard-Base64-Ausgabe die Zeichen +, / und = enthalten, die in URLs eine besondere Bedeutung haben. Du hast zwei Möglichkeiten:

Option 1: URL-kodiere die Base64-Zeichenkette, bevor du sie in die URL einfügst. Aus + wird %2B, aus / wird %2F und aus = wird %3D.

Option 2: Verwende die Base64url-Variante (RFC 4648 Abschnitt 5), die + durch - und / durch _ ersetzt und das Padding entfernt. Diesen Ansatz nutzen JWTs und viele moderne APIs.

// Option 1: Standard-Base64 URL-kodieren
const base64 = btoa('binary data here'); // "YmluYXJ5IGRhdGEgaGVyZQ=="
const urlSafe = encodeURIComponent(base64);
// "YmluYXJ5IGRhdGEgaGVyZQ%3D%3D"

// Option 2: Base64url-Kodierung
function toBase64url(str) {
  return btoa(str)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}
toBase64url('binary data here');
// "YmluYXJ5IGRhdGEgaGVyZQ"