Base64 Decoder

Was ist Base64?#

Base64 ist eine Methode, um Binärdaten als Klartext darzustellen, und verwendet dabei 64 ASCII-Zeichen: A–Z, a–z, 0–9 sowie + und /. Es ermöglicht die sichere Übertragung von Binärdaten wie Bildern, Schlüsseln und E-Mail-Anhängen durch Systeme, die für Text ausgelegt sind. Es handelt sich um Kodierung, nicht um Verschlüsselung.

Base64 verwendet ein festes Alphabet aus 64 Zeichen. Jeder Wert von 0 bis 63 entspricht genau einem davon – so werden aus je 3 Bytes Binärdaten 4 lesbare Zeichen:

Sie sind Base64 bereits fast sicher begegnet. Es taucht überall dort auf, wo Binärdaten in Texten transportiert werden müssen:

• Kleines Bild oder Symbol direkt in HTML oder CSS einbetten
• Binäre Blobs in einer JSON-API-Antwort zurückgeben
• E-Mail-Anhänge kodieren (MIME)
• Schlüssel und Zertifikate in PEM-Dateien speichern

Dieser Data-URI-Trick sieht folgendermaßen aus. Die lange Zeichenkette ist das vollständige Bild:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Warum existiert Base64?#

Frühe Netzwerkprotokolle waren für Text und nicht für rohe Bytes ausgelegt. ASCII verwendete 7 Bit und 128 Zeichen – für Englisch ausreichend, aber nicht für Binärdaten. Einige Systeme verstümmelten Steuerzeichen oder schrieben Zeilenenden um (LF zu CR + LF), was Bilder und Audiodaten beim Transport still beschädigte.

Base64 umgeht all das, indem es ausschließlich Zeichen ausgibt, auf die sich jedes System bereits einigt. Base16 und Base32 erledigen dieselbe Aufgabe mit kleineren Alphabeten, aber Base64 packt mehr Daten pro Zeichen, bleibt dabei aber sicher. Deshalb hat es sich durchgesetzt.

Wie Base64-Kodierung funktioniert#

Das gesamte Verfahren basiert auf einer einzigen, wiederholten Idee: 3 Bytes (24 Bit) nehmen, in vier 6-Bit-Gruppen aufteilen und jede Gruppe im Alphabet nachschlagen. Hier ist das Wort „Logto", von Hand kodiert.

1. Schreiben Sie jedes Zeichen als 8-Bit-Binärzahl anhand seines ASCII-Codes.
2. Nehmen Sie jeweils 3 Bytes. Das sind 24 Bit.
3. Teilen Sie die gleichen 24 Bit in vier Gruppen zu je 6 Bit auf.
4. Lesen Sie jede 6-Bit-Gruppe als Zahl von 0 bis 63.
5. Schlagen Sie diese Zahl im Alphabet nach, um ein Zeichen zu erhalten.
6. Wenn der letzte Bytechunk weniger als 3 Bytes enthält, füllen Sie die verbleibenden Bits mit Nullen auf und fügen Sie „=" hinzu, damit jeder Block 4 Zeichen hat.

Schritt 1. Jedes Zeichen in seine 8-Bit-Binärdarstellung umwandeln:

Schritt 2. Die ersten drei Bytes „Log" nehmen und die gleichen 24 Bit in vier 6-Bit-Gruppen aufteilen:

Schritt 3. Jede 6-Bit-Gruppe als Zahl lesen und diese Zahl dann im Alphabet nachschlagen:

„Logto" besteht aus 5 Bytes, kein Vielfaches von 3. Die letzten beiden Bytes „to" ergeben eine Aufteilung von 6 + 6 + 4. Die letzten 4 Bit mit Nullen auffüllen, um eine 6-Bit-Gruppe zu bilden, dann ein „=" hinzufügen, um den 4-Zeichen-Block zu vervollständigen:

Die Blöcke zusammensetzen:

"Logto"  →  TG9ndG8=

Jede Programmiersprache hat dies eingebaut. In Node.js:

const text = 'Logto';
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // TG9ndG8=

Aus diesem Prozess ergeben sich drei Regeln, die man im Hinterkopf behalten sollte:

• 3 rein, 4 raus: Die Ausgabelänge ist die Eingabe aufgerundet auf ein Vielfaches von 4 Zeichen, daher sind kodierte Daten stets etwa 33 % größer.
• „=" bedeutet Padding: Es erscheint nur, wenn die Eingabe kein Vielfaches von 3 Bytes ist.
• Padding zählt die Reste: Kein „=" bedeutet ein Vielfaches von 3 Bytes, ein „=" bedeutet 2 verbleibende Bytes, zwei „=" bedeuten 1 verbleibendes Byte.

Wann sollten Sie Base64 verwenden?#

Greifen Sie auf Base64 zurück, wenn Binärdaten durch einen nur-Text-Kanal übertragen werden müssen:

• Eingebettete Assets: Ein kleines Bild oder eine Schriftart in HTML/CSS einbetten, um eine Anfrage zu sparen.
• Nur-Text-Transporte: Binärdaten in JSON, XML oder einen URL-Abfrageparameter packen.
• Eingeschränkte Zeichen: Daten durch Systeme übertragen, die an Steuerzeichen scheitern.

Was Sie dafür erhalten:

• Es funktioniert überall: Jedes ASCII-fähige System kann es lesen, ohne Zeichensatzverhandlung.
• Nichts wird beschädigt: Die Ausgabe übersteht Kanäle, die rohe Bytes andernfalls beschädigen würden.

URL-sicheres Base64 (Base64URL)#

Standard-Base64 stützt sich auf drei Zeichen, die mit der Funktionsweise von URLs, Abfragezeichenketten und Dateinamen kollidieren: +, / und das =-Padding. Ein normaler Base64-String in einen Link einzufügen kann auf stille Weise zu Fehlern führen:

• + wird zu einem Leerzeichen. In einer Abfragezeichenkette interpretieren viele Server + als Leerzeichen. So kommt ?data=ab+cd still als „ab cd" an, und die Bytes sind falsch.
• / ist ein Pfadtrennzeichen. Ein / innerhalb eines Werts kann als neues Pfadsegment interpretiert werden, und die meisten Dateisysteme lehnen es in Dateinamen vollständig ab.
• = ist ebenfalls reserviert. Es trennt Schlüssel von Werten in einer Abfragezeichenkette, daher wird abschließendes =-Padding abgeschnitten oder falsch interpretiert.

Sie können sie prozentual kodieren (+ wird %2B, / wird %2F, = wird %3D), aber das bläht die Zeichenkette auf und führt leicht zu doppelter Kodierung.

Base64URL (RFC 4648 §5) behebt dies an der Quelle: + wird durch - ersetzt, / durch _, und das =-Padding entfällt. Das Ergebnis lässt sich direkt in eine URL, einen Abfrageparameter oder einen Dateinamen einfügen, ohne etwas maskieren zu müssen. Sie finden es in URLs, Dateinamen und vielen Web-APIs.

const base64 = 'TG9ndG8=';
const urlSafe = base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
console.log(urlSafe); // TG9ndG8

Einschränkungen (und ein weit verbreitetes Missverständnis)#

Base64 ist eine Darstellungsform, kein Allheilmittel. Drei Dinge sollten beachtet werden:

• Ca. 33 % größer: Aus 3 Bytes werden 4 Zeichen, sodass kodierte Daten um etwa ein Drittel anwachsen.
• Kostet CPU: Kodieren und Dekodieren sind bei hohem Volumen oder großen Nutzdaten nicht kostenfrei.
• Nicht lesbar: Undurchsichtige Zeichenketten erschweren Logs und das Debugging.

Häufig gestellte Fragen#