Base64

Base64

Eine wenig bekannte Anwendung ist die direkte (Inline)-Einbettung von binären Bild- oder Audio-Daten in Webseiten.

Zielgruppe sind fortgeschrittene StudentInnen und ambitionierte Informatik-Amateure

Fortgeschrittene Kenntnisse der Informatik werden vorausgesetzt. Kenntnisse von Javascript sind hilfreich.



Live Codierung & Decodierung von Text


Eingabe

Länge: 0 Bytes
Tragen sie einen beliebigen Text in das grün unterlegte Eingabe-Feld ein. Starten sie die Codierung mit der return-Taste oder mit der Bildschirm-Taste Codieren.


Codierung zu Base64

Länge: 0 Bytes
Die mit Base64 codierten Daten bestehen zwar aus 'lesbaren' (ASCII)-Zeichen, sind jedoch nicht sinnvoll 'lesbar'. Die codierten Daten brauchen um ca. 1/3 mehr Platz als die Original-Daten.


Decodierung von Base64

Länge: 0 Bytes
Hier werden die mit Base64 codierten Daten wieder decodiert.
Dabei werden die Original-Daten wiederhergestellt.



Der → Unicode-Zeichensatz in der → UTF-8 Version codiert ASCII-Zeichen mit je 1 Byte, weitere 1920 Zeichen (darunter die deutschen Sonderzeichen ÄÖÜäöüß) mit je 2 Byte, weitere 63488 Zeichen (darunter das €-Zeichen) mit je 3 Byte.
Man muss daher vor der Base64 Codierung die Unicode-Zeichen in Bytes umwandeln bzw. nach der Base64 Decodierung die Bytes in Unicode-Zeichen umwandeln.
Das wurde in diesem Beispiel berücksichtigt, man kann in diesem Beispiel alle Unicode-Zeichen verwenden.
Beispiele: Schöne Grüße, 123€, π=3.1416, αβγ,
(Beachten sie den Unterschied zwischen der Anzahl der Zeichen und der Bytes !)

Details zu den Themen Zeichensatz, ASCII, ISO-8859, Unicode, UTF-8

Codierung und Decodierung von Binär-Daten


Das Beispiel wird zwar Live berechnet, es bietet jedoch keine Optionen, um interaktiv einzugreifen.

Im nächsten Kapitel ↓ Algorithmus können sie sowohl mit Text-Daten als auch mit beliebigen Binär-Daten experimentieren.


Vorgabe

Länge: 256 Bytes
Hier werden alle möglichen Binär-Daten vorgegeben, d.h. alle Bytes mit numerischen Werten 0...255
Darunter werden die Vorgabe-Daten als Zeichen dargestellt, nicht lesbare Zeichen sind durch Punkte ersetzt, nach je 8 Zeichen ist 1 Leerzeichen eingefügt.


Codierung zu Base64

Länge: 0 Bytes
Die mit Base64 codierten Daten bestehen durchwegs aus lesbaren Zeichen.
Hier wurde nach je 8 Zeichen 1 Leerzeichen eingefügt - Das wird bei der Decodierung ignoriert.


Decodierung von Base64

Länge: 0 Bytes
Hier werden die mit Base64 codierten Daten wieder decodiert.

Da binäre Daten nicht als Zeichen darstellbar sind, werden an ihrer Stelle die dezimalen Werte der Daten angezeigt. Wenn richtig codiert und decodiert wurde, dann werden links alle ganzen Zahlen 0...255 angezeigt.

Wenn man lediglich die Bitmuster der Daten betrachtet (und ihre Darstellung sowie den dazu verwendeten Zeichensatz ignoriert), dann ist die Codierung und Decodierung in jedem Fall exakt und umkehrbar.

Der Base64 Algorithmus


Bei der Codierung werden die 3x8=24 Bits von 3 Vorgabe-Bytes zusammengefasst, danach werden je 6 Bits auf 4 codierte Bytes aufgeteilt.


Vorgabe-Daten

Byte0
Byte1
Byte2



Geben sie dezimale Werte 0..255 oder hexadezimale Werte #00..#FF oder binäre Werte b0...b11111111 oder Zeichen A...Za...z in die 3 Vorgabe-Bytes ein.


Die Verweis-Tabelle verknüpft 64 Zahlen mit 64 verschiedenen → ASCII-Zeichen. Die Tabelle ist leider nur teilweise systematisch aufgebaut, daher ist der Zusammenhang zwischen der jeweiligen LUT-Zahl (hellgelb) und dem verknüpften Zeichen (orange) ohne die Tabelle nur bedingt erkennbar.
Das verknüpfte Zeichen wird in das Ausgabe-Byte (orange) kopiert.
Bei der Codierung wird das Schema von oben nach unten durchlaufen, bei der Decodierung von unten nach oben.


Verweis-Tabelle

 LUT-Zahl  01234567 89101112131415 1617181920212223 2425262728293031
Zeichen ABCDEFGH IJKLMNOP QRSTUVWX YZabcdef
 LUT-Zahl  3233343536373839 4041424344454647 4849505152535455 5657585960616263
Zeichen ghijklmn opqrstuv wxyz0123 456789+/
Bei der Base64-Codierung wird eine Zahl 0...63 durch das darunter angegebene Zeichen ersetzt, bei der Decodierung das Zeichen durch die darüber angegebene Zahl.


Man kann beliebige (Unicode)-Zeichen eingeben. Nur das erste Zeichen wird verwendet, alle weiteren werden ignoriert.
Alle Zeichen werden mit dem → UTF8 Zeichensatz übersetzt:
ASCII-Zeichen A...Za...z brauchen daher je 1 Byte, deutsche Umlaute 2 Byte, das €-Zeichen 3 Byte. Je nach Eingabe werden daher auch die folgenden Bytes verwendet und die darin enthaltenen Werte überschrieben.

Die interaktive ObjektGrafik wurde mit → SVG programmiert (↗ SVG-Quelltext). Sie zeigt von oben nach unten den Fluss der Daten bei der Base64 Codierung. Die Decodierung verfolgt den gleichen Weg von unten nach oben.



Die Anwendung von Bitwise-Operatoren setzt fortgeschrittene Kenntnisse der Informatik voraus, insbesondere der binären, dezimalen und hexadezimalen Zahlensysteme sowie der Bool'schen Algebra.

Bitwise-Operatoren allgemein (Wikipedia) sowie in C/C++, Javascript, Perl, PHP



Bei der Codierung wird das von der Verweis-Tabelle angegebene Zeichen in das Ausgabe-Byte kopiert. Bei der Decodierung wird das Zeichen in der Verweis-Tabelle gesucht und die damit verknüpfte LUT-Zahl zur weiteren Decodierung verwendet.



In diesem Fall werden die codierten Daten durch 1 oder 2 = Zeichen ergänzt. Die Länge der Base64 codierten Daten ist daher immer durch 4 teilbar.



Dazu eignen sich im Prinzip alle Zeichen, die nicht in der Verweis-Tabelle enthalten sind. In der Praxis verwendet man dazu Leerzeichen oder eilen-Umbruch (LF). Diese Zeichen werden bei der Decodierung ignoriert.



Arndt Brünner (umfangreiche Erklärungen), Base64-Encode und -Decode, Base64-Encode und -Decode, Images, Android, Java-Klasse (Oracle), Linux-Konsolen-Programm (Fourmilab), kostenfreie Programme (Sourceforge)

Base64 Programmierung mit Javascript


Die Funktionen sind in der Bibliotheks-Datei ↗ base64.js enthalten. Die Anwendung ist frei, erfolgt jedoch auf eigenes Risiko.



Beispiel: Base64 Codierung des einfachen Strings 'ABC':
q = new Base64();
q.string_bin.set('ABC');
q.encode();
c = q.string_b64.get();
Ergebnis: c='QUJD'

Beispiel: Decodierung des Base64-Strings 'eHl6' zu ASCII-Zeichen:
q = new Base64();
q.string_b64.set('QUJD');
q.decode();
b = q.string_bin.get();
Ergebnis: b='xyz'

Beispiel: Base64 Codierung eines UTF8-Strings (-Zeichen)
q = new Base64();
q.utf8_to_bin(String.fromCharCode(0x20AC));
q.encode();
c = q.string_b64.get();
Ergebnis: c='4oKs'

Beispiel: Decodierung des Base64-Strings 'QUPimqFEQw==' zu Unicode-Zeichen:
q = new Base64();
q.string_b64.set('QUPimqFEQw==');
q.decode();
u = q.bin_to_utf8();
Ergebnis: u='AC⚡DC'




Ein HTML <img>-Element (PixelGrafik) mit Inline-Daten
<img src="data: image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAA8AAAAPAgMAAABGuH3ZAAAACVBMVEVdAAn
//wAAAAC7RmZyAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgF
HUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAABASURBVHjaY
2DQWsDAwDQ1ioGBMzS0gUE1NDSBQXVpZgLD1KWZEQxTQ0
ORiWmhYREMqlMjgUqyliZAdID1gkwBAOr5E/+yAy9XAAA
AAElFTkSuQmCC" alt=""/>
So wird das <img>-Objekt angezeigt:



Binäre Daten (z.B. von Pixel-Bildern) werden dabei meist Base64-codiert und lassen sich danach Inline in HTML- oder XML-Quelltext einbetten.

Die Details dieser Methoden erfordern fortgeschrittene Kenntnisse von Javascript.