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:
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....." />
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...