base64 encoding codec web

Base64-Kodierung erklärt: Der ultimative Leitfaden für Entwickler

Meistern Sie die Base64-Kodierung und -Dekodierung. Erfahren Sie, wie es funktioniert, wann man es in der Webentwicklung einsetzt und welche Sicherheitsaspekte wichtig sind.

Was ist Base64?

Base64 ist ein Kodierungsverfahren, das Binärdaten als eine Folge druckbarer ASCII-Zeichen darstellt. Es nimmt beliebige Bytefolgen — ob Bilder, PDFs oder rohe Binärdaten — und kodiert sie in eine Zeichenkette, die ausschließlich aus 64 sicheren Zeichen besteht: A–Z, a–z, 0–9, + und / (mit = als Füllzeichen).

Der Name „Base64" leitet sich davon ab, dass die Kodierung ein 64er-Zahlensystem verwendet.

Die 64 Zeichen

Gruppe Zeichen
Großbuchstaben A–Z (26)
Kleinbuchstaben a–z (26)
Ziffern 0–9 (10)
Sonderzeichen +, / (2)
Füllzeichen =

Es gibt auch URL-sichere Varianten, die + durch - und / durch _ ersetzen, um Konflikte mit URL-Sonderzeichen zu vermeiden.


Wie Base64-Kodierung funktioniert

Base64 wandelt jeweils 3 Bytes Binärdaten in 4 Base64-Zeichen um.

  1. 3 Bytes (24 Bit) der Eingabe nehmen
  2. In vier 6-Bit-Gruppen aufteilen
  3. Jeden 6-Bit-Wert einem Zeichen des Base64-Alphabets zuordnen

Beispiel: Kodierung der Zeichenkette „Man"

Zeichen M a n
ASCII 77 97 110
Binär 01001101 01100001 01101110

Kombiniert: 010011010110000101101110

In 6-Bit-Gruppen aufgeteilt: 010011 | 010110 | 000101 | 101110

Zugeordnet: T | W | F | u → „TWFu"

Wenn die Eingabe kein Vielfaches von 3 Bytes ist, werden = Zeichen als Füllzeichen verwendet, um die letzte Gruppe zu vervollständigen.

Größen-Overhead

Base64-Kodierung erhöht die Datengröße um etwa 33% (aus je 3 Bytes werden 4 Zeichen). Diesen Faktor sollte man berücksichtigen, wenn man Base64 für große Datenmengen einsetzen möchte.


Kurze Geschichte

Base64 wurde im Kontext von MIME (Multipurpose Internet Mail Extensions) entwickelt und 1992 durch RFC 1341 standardisiert. E-Mail-Systeme waren ursprünglich nur für die Übertragung von 7-Bit-ASCII-Text ausgelegt, aber Anhänge wie Bilder und Dokumente sind Binärdaten. Base64 löste dieses Problem, indem Binärdaten als Klartext kodiert wurden, der sicher durch die E-Mail-Infrastruktur übertragen werden konnte.

Der Name und das Konzept tauchten sogar noch früher in Unix-uuencode auf (ein anderes, aber verwandtes Verfahren), aber das MIME-Base64 wurde zum dauerhaften Standard.


Typische Anwendungsfälle

1. Bilder in HTML/CSS einbetten

Statt auf eine externe Bilddatei zu verweisen, kann man ein Bild direkt mithilfe einer Base64-kodierten Daten-URI einbetten:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

Sinnvoll bei: Kleinen Icons oder Bildern, die HTTP-Anfragen im kritischen Rendering-Pfad einsparen.

Nicht empfehlenswert bei: Großen Bildern — der 33%-Größen-Overhead plus die fehlende Möglichkeit, das Bild separat zu cachen, überwiegen die Vorteile.

2. HTTP-Basisauthentifizierung

HTTP Basic Auth sendet Anmeldedaten als Base64-kodierte Zeichenkette im Authorization-Header:

Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=

Das ist username:password in Base64 kodiert. Wichtig: Das ist KEINE Verschlüsselung — es kann trivial dekodiert werden. Verwende immer HTTPS zusammen mit Basic Auth.

3. JWT (JSON Web Tokens)

JWT-Token bestehen aus drei durch Punkte getrennten Base64URL-kodierten Abschnitten: Header, Payload und Signatur. Header und Payload sind lesbar (nicht verschlüsselt) — Base64 dient hier ausschließlich der Transportkodierung.

4. E-Mail-Anhänge (MIME)

Als ursprünglicher Anwendungsfall von Base64: E-Mail-Clients kodieren binäre Anhänge (Bilder, PDFs usw.) in Base64, um sie sicher durch die E-Mail-Infrastruktur zu übertragen.

5. Binärdaten in JSON oder XML speichern

Da JSON und XML nur Text unterstützen, werden Binärdaten (z. B. Verschlüsselungsschlüssel oder kleine Bilder) häufig vor der Aufnahme Base64-kodiert.

6. Daten-URLs in CSS

Hintergrundbilder können direkt in CSS eingebettet werden:

background-image: url('data:image/svg+xml;base64,PHN2ZyB4...');

Base64-Varianten

Variante Zeichen Anwendungsfall
Standard-Base64 A–Z a–z 0–9 + / Allgemeiner Zweck
URL-sicheres Base64 A–Z a–z 0–9 - _ URLs, Dateinamen, JWTs
Base64 ohne Füllzeichen Lässt = weg Manche APIs bevorzugen dies
MIME-Base64 Standard + Zeilenumbrüche alle 76 Zeichen E-Mail

Sicherheitsaspekte

Base64 ist KEINE Verschlüsselung

Das ist der wichtigste Punkt: Base64 ist eine Kodierung, keine Verschlüsselung. Jeder, der eine Base64-Zeichenkette hat, kann sie sofort dekodieren — kein Schlüssel erforderlich. Verwende Base64 niemals zum „Verstecken" sensibler Informationen.

echo "dXNlcm5hbWU6cGFzc3dvcmQ=" | base64 --decode
# Ausgabe: username:password

Passwörter nicht in Base64 kodieren

Das Speichern von Passwörtern als Base64 bietet keinerlei Sicherheit. Verwende stattdessen geeignete Passwort-Hashing-Algorithmen wie bcrypt, Argon2 oder scrypt.

XSS-Risiken mit Daten-URIs

Obwohl Base64-Daten-URIs selbst sicher sind, kann bösartiges JavaScript in bestimmten Browser-Kontexten über data:text/html;base64,...-URIs kodiert und ausgeführt werden. Die meisten modernen Browser schränken dies für Link-Navigation und iframe-Quellen ein, aber bereinige immer vom Benutzer bereitgestellte Daten-URIs.


Base64 in Programmiersprachen

JavaScript

// Kodieren
const encoded = btoa("Hello, World!");  // "SGVsbG8sIFdvcmxkIQ=="

// Dekodieren
const decoded = atob("SGVsbG8sIFdvcmxkIQ==");  // "Hello, World!"

Hinweis: btoa/atob funktionieren in Browsern nur mit Latin-1-Zeichenketten. Für Unicode:

// Unicode-sicheres Kodieren
const encoded = btoa(unescape(encodeURIComponent("こんにちは")));

Oder Buffer in Node.js verwenden:

Buffer.from("Hello").toString("base64");
Buffer.from("SGVsbG8=", "base64").toString("utf8");

Python

import base64

# Kodieren
encoded = base64.b64encode(b"Hello, World!").decode("utf-8")
# "SGVsbG8sIFdvcmxkIQ=="

# Dekodieren
decoded = base64.b64decode("SGVsbG8sIFdvcmxkIQ==").decode("utf-8")
# "Hello, World!"

# URL-sichere Variante
url_safe = base64.urlsafe_b64encode(b"Hello+World/")

Leistungsaspekte

  • Kodierung/Dekodierung ist schnell: Für die meisten Anwendungsfälle ist der Base64-Overhead vernachlässigbar.
  • Größen-Overhead: ~33% größer als binär. Vermeiden bei großen Dateien (MB+), die häufig übertragen werden.
  • CPU-Cache-Druck: Das Kodieren großer Binärdateien im Speicher kann den CPU-Cache belasten.

Für große Binärübertragungen sollten Binärprotokolle (HTTP/2 mit Binär-Framing, WebSocket-Binär-Frames, gRPC mit protobuf) gegenüber Base64 bevorzugt werden.


Zusammenfassung

Base64 ist eine jener grundlegenden Technologien, die einen Großteil des modernen Webs unterstützen, ohne dass die meisten Entwickler darüber nachdenken. Es löst ein spezifisches Problem gut: die sichere Kodierung von Binärdaten als druckbaren Text für die Übertragung in textbasierten Systemen.

Base64 verwenden, wenn: Binärdaten in Textkontexten eingebettet werden müssen (HTML, JSON, E-Mail, Header).

Base64 nicht verwenden, wenn: Daten verschlüsselt oder gesichert werden sollen — Base64 ist vollständig umkehrbar, ohne dass ein Schlüssel benötigt wird.