Base 64

Einleitung


Was zur Hölle ist Base 64?

Laut Wikipedia: "Base64 beschreibt ein Verfahren zur Kodierung von 8-Bit-Binärdaten (z. B. ausführbare Programme, ZIP-Dateien) in eine Zeichenfolge, die nur aus lesbaren Codepage-unabhängigen ASCII-Zeichen besteht."

So weit, so gut, bei Wikipedia finden Sie dann eine Tabelle mit Übersetzung der Base64- Zeichen - lernen Sie die bloß nicht auswendig!

Sie finden in ihrem Alltag ziemlich viel Base 64 und es ist eigentlich Schade, dass viele Menschen gar nicht merken, wo es überall Base 64 gibt. Im E-Mail-Programm z. B., egal ob Sie Thunderbird oder Outlook verwenden sind sämtliche Anhänge in das Base 64 Format verschlüsselt worden.

Weiterhin finden Sie Base 64 bei vielen Anwendungen, wenn Sie z. B. ihr Smartphone mit Apps von Phonegap benutzen.

Des weiteren können Sie Bilder in Base 64 in den HTML-Code z. B. einer Webseite integrieren und dann  HTMLSeiten mit Bildern ohne zusätzliche Bilddatei integrieren. Das ist ein kleines Bonus von Base 64 - die Hieroglyphen einer Bilddatei (*.jpg, *.png, *.gif...) werden auch in den Base64 Code umgesetzt. Dazu sämtliche *.exe, *.doc, *.pdf...

Dieses kleine Tutorial bietet einen soliden Einstieg in die Handhabung von Base 64, was für einige User eine Erweiterung ihrer Möglichkeiten bedeutet.

Der Sternenhimmelstuermer setzte übrigens Base64 bei bei seinem Verschlüsselungsprojekt NoNSA ein. Base64 ist keine Verschlüsselung, aber als Grundlage für die Verschlüsselung von Dateien unschlagbar...

Inhaltsangabe
Codieren und Decodieren mit Base64.exe
Lesen eines Bildes mit Browser
Base64: Handhabung mit Javascript
PDF in HTML-Seite einbinden (nur Chrome und Firefox)

Codieren und Decodieren mit Base64.exe

Erster Schritt Download

Am Anfang sollten Sie sich ein Tool zur Konvertierung herunterladen. Der Sternenhimmelstuermer stellt das Kommandozeilentool Base64.exe vor. Das Tool ist englischsprachig, aber mit den folgenden Ausführungen leicht verständlich.

Das Tool können Sie sich hier bei der Herstellerfirma runterladen (Freeware). Um genau zu sein ist es ein Zip-Ordner mit 72 KB Umfang. Eine Überprüfung bei Virus total ergab, dass zwei von 40 Virenscannern anschlugen: Kingsoft "erkannte" einen unbekannten Trojaner und Rising einen Trojaner. Zur Relativierung. Das Tool benötigt keine Adminrechte und 38 etablierte Scanner erkannten keinen Trojaner. Die Seite wird bei Heise gelistet und es spricht viel dafür, das die Datei clean ist. Einzelne Fehlalarme gehen durchaus in Ordnung...

Da drinnen (im Zip-Archiv) sind dann mehrere Ordner, von denen sie je nach Betriebssystem die Base64.exe zu ihrem Betriebssystem wählen, mit Windows (32 bit) und (64 bit) liegen Sie richtig - kann erstmal nichts passieren, da die Exe sonst nicht ausgeführt werden kann.

Das Tool ist wie gesagt ein Kommandozeilentool, also bring ein Doppelklick zum Ausführen nichts. Anmerkung: Es gibt Kommandozeilentools nicht erst seit gestern, warum hat die Microsoft-Corporation nicht die Ausführung eines Kommandozeilentools (öffnen der CMD) nach Sicherheitsabfrage nicht integriert?

Zweiter Schritt: Vorbereitung für Codierung

Nehmen Sie irgendein Bild - vielleicht ein JPG und bringen es per Drag und Drop in den  entpackten Ordner (!)  der Base64.exe  ihres Betriebssystems. Vorteil: Sie sparen sich  lange Pfade.

Einschub: Sie sollten auf ihrem Betriebssystem die Einstellung Erweiterungen bei bekannten Dateitypen ausblenden deaktivieren, da egal was Sie für ein Dokument oder Bild  konvertieren, immer die Dateiendung in der Kommandozeile gebrauchen: 
Beliebigen Ordner öffnen: Organisieren - Layout - Menüleiste auswählen. In der Menüleiste: Extras - Ordneroptionen - Reiterkarte Ansicht: Dort Häkchen entfernen bei: Erweiterungen bei bekannten Dateitypen ausblenden.
Einschubende

Dann gehen Sie auf eine leere Fläche des Ordners mit dem irgendein.jpg, betätigen  die Großschreibtaste und  rechte Maustaste und wählen im Kontextmenü  Eingabeaufforderung hier öffnen aus.

So, nun haben Sie die Eingabeaufforderung, Bild und Base64.exe in einem Ordner, alle Vorbereitungen sind abgeschlossen und jetzt trennen Sie noch zwei Befehle vom Ziel der Konvertierung.

Konvertierung in Base64.exe

Nun geben Sie einfach Base64.exe ein und landen gleich beim Hilfebild. Das wurde übrigens auch mit Base64 in diese Webseite eingebettet - schauen Sie sich den Quelltext dieser Seite ruhig an:



Embedded Image
  Quelle : Hilfedarstellung von base64, Screenshot

Aha, zwei Befehle sind eigentlich nur von Bedeutung. Wollen Sie ein Bild ins base64-Format bringen, dann greift der Befehl:

base64.exe -e irgendeinbild.jpg  irgendeneinText.txt

 Also wird zuerst die Exe aufgerufen mit dem Parameter -e, damit irgendeinbild.jpg in irgendeinenText.txt konvertiert wird. Im Textdokument befindet sich dann das Bild im Base64-Format.

Der Sternenhimmelstuermer empfiehlt, als Ausgabedokument immer ein  *.txt zu wählen. Das können Sie immer mit dem Editor  öffnen und bei Bedarf kopieren.

Andersrum wird der Parameter -d verwendet. Konvertieren Sie das Bild doch zurück in ein Bilddokument mit anderen Namen, da sonst nur ihr altes Bild überschrieben wird, also

base64.exe -d irgendeinText.txt anderesBild.jpg

In anderesBild.jpg ist nur das konvertierte Bild mit regulären Kauderwelsch...

Das können Sie nun mit jeder Datei auf ihrem Computer durchexerzieren. Base64 zerlegt alles und setzt es wieder zusammen.



Lesen eines Bildes mit Browser

Der Base64 - Code wird von allen Browsern  als Bild interpretiert, aber nur wenn der Code als Bild (Image) interpretiert wird und dafür benötigen Sie einen HTML-Grundgerüst und fügen den Code ein - ja, der Code des Bildes ist im HTML-Dokument und das ist toll! Sie werden inzwischen vielleicht festgestellt haben, dass der Code von Base64 in der Größe fast dem der regulären Datei entspricht. Das ist toll! Dennoch sollte man eine 30 KB-Grenze eigentlich einhalten.

JPG einbinden ist kein Problem, Gif wohl auch, bei PNG scheint es problematisch zu werden...

Erstmal ein einfaches HTML Grundgerüst mit ein wenig Code zum Einbinden eines JPG:

<html>
 <head>
    <title>Test </title>
  </head>
 <body>
<div><img alt="Embedded Image" src="data:image/jpg;base64,
Hier der eingefügte Base64-Code
" />

</div>
</body>
</html>


Also, wichtig ist der rote Text. Den können Sie bei einem JPG genauso übernehmen. Es wird also im Prinzip das normale img-Tag verwendet, nur das als scr (Url) auf den folgenden Datensalat hingewiesen wird. Nicht vergessen, das rote Ende einzufügen " /> . Damit wird der img-Tag geschlossen - die Anführungszeichen sind zum Schließen von src und > um das img-Tag zu schließen.

In Base64 gibt es nicht diese Zeichen, deshalb brauchen Sie auch keine Angst zu haben, dass Base64 den Tag schließt!


Data Url

Andere Dateien können Sie mit Hilfe dieser englischsprachigen Seite als Link einbinden, obwohl die Seite von Mozilla schon älter ist - vieles funktioniert! Ob MP3 oder html...vieles können sie als Hyperlink prima einbinden...

Der Hyperlink verweist dann auf den Base64-Code, der in demselben HTML-Document wie der Link liegt  - hört sich verwirrend an, aber bei dem Einbinden des PDF-Dokumentes wird das erklärt - mit einer lauffähigen Demo...

In eine ähnliche Richtung geht Wikipedia mitein paar guten Beispielen.






Base64: Handhabung mit Javascript

So schön der Code von Base64 auch ist, da sind jede Menge Zeichen drin, die es fast unmöglich machen Base64 in ein Javascript einzubinden. Findige Programmierer tauschen diese Zeichen mit einem Javascript aus. Danach müssen umgekehrt  die ausgetauschten Zeichen  im Code wieder rekonvertiert werden  - zeitaufwendig  und nicht unbedingt  nötig, da man mit ein wenig CSS3  zumindest die Bilder ein- und ausblenden kann - vielmehr brauchen die Profis nicht...

Doch vielleicht erst Mal ein paar Erklärungen:

Base64 und der direkte Zugriff darauf ist ein wenig problematisch. Sie können zwar mit der document.getElementById-Methode einen String ziehen, aber wer sich ein wenig mit Javascript auskennt, weiß, dass das eingebettete Base64 als Objekt behandelt wird und spätestens bei der Ausgabe nur eine kurze Meldung über das Objekt angezeigt wird - nicht sehr hilfreich...

Dann sprechen viele Menschen darüber, dass es mit der create/appendchild-Methode aus dem DOM-Modell möglich sei, ein Base64 Bild als Variable zu ziehen, aber so wirklich findet man kein valides Beispiel, da der Code irgendwann doch in das Javascript eingertragen werden müsste, was wegen der Sonderzeichen doch nicht funktioniert...

Der Sternenhimmelstuermer hingegen kreierte eine lauffähige Demo mit indirekter Beeinflussung mit CSS3, die hier fast vollständig erklärt wird.

<html>
 <head>
  <meta name="generator" content="HTML Studio">
  <title>Beispiel base64 mit Javascript</title>
  <style>
div.hidden {display:none;}
div.see {display}
</style>
<script>
function bild() {
var element = document.getElementById("zeige");
if (element.className == "hidden");
element.className = 'see';
    }

</script>
 </head>
 <body>
 <div id="zeige" class="hidden"><img alt="Embedded Image"
src="data:image/jpg;base64,....Hier der Code von Base64....." />
  &nbsp;
Quelle : Hilfedarstellung von base64, Screenshot<br><br>
 <INPUT TYPE="BUTTON" onClick="bild()" VALUE="Anzeigen">
 <br>
  </body>
</html>


Erklärung

Der gelbe Bereich ist CSS3. Im Head beschreibt der Autor  zwei Klassen.  Die Klasse  von einem DIV-Bereich  mit Namen hidden wird nicht angezeigt. Die Klasse  see hingegen wird angezeigt. Am Anfang  steht im Body ein Base64 Bild in einem DIV-Bereich mit der Klasse hidden, wird also nicht angezeigt.
In diesem Container könnten mehrere Bilder stehen oder es könnten mehrere Container angelegt werden, die mit css auf hidden gesetzt werden.

Jetzt können wir mit Javascript ein wenig tricksen:

Im Body wurde ein Button mit dem Verweis auf die Javascriptfunktion Bild gelegt. Wir können zwar nicht mit der document.getElementById-Methode direkt auf das Base64-Bild zugreifen, aber zumindest den Status von hidden auf see verändern:

if (element.className == "hidden");
element.className = 'see';

Sie wissen ja, dass der Container  im Status hidden ist, also wird nun durch die Änderung auf see der Containerinhalt angezeigt.

Sie sehen dann wieder das Hilfebild.

Vorteil: Sie können dazu Text schreiben. Amateure sehen nun die Möglichkeiten mit der Display-Methode und Anfänger werden jetzt genauso schlau sein wie zuvor-:).


Alternativ kann man in mehreren HTML-Seiten jeweils ein Bild im Base64-Code einbinden und z. B. mit einem Javascript aufrufen:

if ((Monat == 1 && Tag > 30) || (Monat == 2 && Tag < 11))
self.location.href = ["base64_1.htm"];

Im oben angeführten Beispiel ist ein Textauszug von einem Javascript des Sternenhimmelstuermers. Die erste Zeile ist uninteressant, da hier nur die zeitliche Auswahl einer HTML Seite definiert wird.

Die zweite Zeile ist hingegen sehr interessant. Wir setzen einen self.location.href , den alte Javascripthasen aus der Frametechnologie kennen. Nein, wir brauchen kein Frameset, sondern nur den Befehl, der nun ähnlich wie ein redirect-Befehl einfach eine neue Seite anzeigt, die eben im Beispiel base64_1.htm  heißt und wo dann der Code von Base64 drin ist. Klappt zu 100 %, daher keine Demo, da eindeutig...

Sie können also in diversen html-Seiten den Base64 - Code von Bildern eintragen und hinterher mit Javascript ganz normal weiterbearbeiten.

Der Vorteil dieser Methode ist, dass auch wirklich nur der Code der aktuellen Seite geladen wird und bei Bedarf die anderen Seiten mit dem Base64-Code nachgeladen werden. Ist eine Entwicklung vom Überflieger Sternenhimmelstuermer...


PDF in HTML-Seite einbinden (nur Chrome und Firefox)

Der folgende Tip bezieht sich nicht auf den Internet Explorer, da die Microsoft Corporation es mal wieder verpennte einen eigenen PDF-Reader in den supermordernen Internet Explorer zu integrieren, dann hätten die vielleicht auch mal über base64 nachgedacht...

Dabei ist die Integration von PDF-Dokumenten in eine HTML-Seite eine durchaus sinnvolle Angelegenheit, gerade, wenn man nicht dutzende von PDF-Dokumenten auf dem Server herumliegen haben will.

Der Sternenhimmelstuermer stellte auch hier eine Demo her, von einem PDF über den Mindestlohn, erstellt vom Autor dieser Abhandlung. Normalerweise herrscht strikte Thementrennung, da der Mindestlohn in Deutschland aber eine Herzenssache des Autors ist, sei ihm verziehen : Demo

Einbettungscode in HTML:

<a href="data:application/pdf;base64,
Base64-Code
">"Mindestlohn.pdf"</a><br>

Der neue Firefox schafft es auch. Anmerkung: Ein Blick auf Thunderbird im Quelltext (Menüleiste: Ansicht - Quelltext) zeigt ihnen bei einer e-mail mit PDF-Anhang an, was Sie nach data: eintragen, so weit es unterstützt wird. Die entscheidende Zeile ist:

Content-Type: application/pdf;

Der Content-Type ist erstmal ihr Orientierungspunkt, was nach data: eingetragen wird. Akzeptiert der Browser es, dann klappt es bei diesem Dateityp vielleicht. Da Thundebird von Mozilla ist, klappt das dann auch bei Firefox meistens...

Vorsicht: Das PDF hatte ursprünglich eine Größe von 211 KB, die HTML-Demo-Seite 289 KB. Die Verwendung von Base64 für PDF's geht also ein wenig zu ungunsten der Größe, aber bei heutigen Downloadgeschwindigkeiten und Speicherkapazitäten dürfte das Problem nicht so riesig sein...


Abschließende Bemerkungen


Sie können das Erlernte auf Phonegap übertragen.

Anhänge von E-Mails können Sie im Quelltext mal anschauen und mit Base64.exe umwandeln, einfach ein wenig herumprobieren.

Sie brauchen nur den Base64-Code in ein Textdokument zu kopieren und das mit der passenden Endung mit base64 zu decodieren (*.jpg, *.exe...).

In QR-Code können Sie absolut kleine Bildchen einbauen, aber der Base64-Code sprengt in der Regel die Kapazität des QR-Codes - 6 KB waren in einem Test schon zuviel und der Autor brach dann weitere Versuche ab.

Der Sternenhimmelstuermer sieht viel Potential für base64. Beispielsweise könnte eine Speicherung von Webseiten in einem Dokument implementiert werden - ähnlich den mhtml von Microsoft...

Das soll es dann auch schon von Base64 gewesen sein...






 
Impressum
Datenschutz