HTML in Base64: Markup für Data-URIs kodieren

So kodieren Sie HTML in Base64

1. Fügen Sie Ihr Markup in Eingabe · Text ein, oder drücken Sie Beispiel für ein kleines Dokument.
2. Kopieren Sie das Base64 aus Ausgabe · Base64.
3. Lassen Sie Zeichensatz auf UTF-8 und deklarieren Sie UTF-8 in der Data-URI oder im Dokument (siehe unten).
4. Stellen Sie data:text/html;charset=utf-8;base64, voran, wenn Sie eine Data-URI brauchen, oder fügen Sie das reine Base64 in das API-Feld ein, das danach verlangt.

Das Beispiel <!doctype html> plus <h1>Hello from base64hub</h1> in zwei Zeilen wird zu PCFkb2N0eXBlIGh0bWw+CjxoMT5IZWxsbyBmcm9tIGJhc2U2NGh1YjwvaDE+ kodiert. Base64 in HTML macht es rückgängig.

Beispiele

Entities wie € sind für Base64 einfach Text und bleiben unverändert; der Browser löst sie nach dem Dekodieren auf. Eine Zeichenkette, die mit PCFkb2N0eXBl oder PCFET0NUWVBF beginnt, ist ein HTML-Dokument (<!doctype oder <!DOCTYPE), und PGh0bWw ist <html.

Eine data:text/html-URI zusammensetzen

Eine vollständige Data-URI hat vier Teile: das Schema, den Medientyp, einen optionalen Zeichensatz und das Base64-Kennzeichen.

data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+

Ohne charset=utf-8 in der URI oder ein <meta charset="utf-8"> im Dokument liest ein Browser die Bytes womöglich in einer Altkodierung, und café erscheint als café. Das Meta-Tag im HTML schützt das Dokument, wo auch immer es landet.

Typische Einsatzzwecke:

• In einem iframe zeigt <iframe src="data:text/html;base64,..."> ein in sich geschlossenes Snippet ohne separate Datei. Für HTML, das Sie von Hand schreiben, ist das Attribut srcdoc oft einfacher, da es gar keine Kodierung braucht.
• Browser-Tests und andere Automatisierung können eine Fixture-Seite ohne Webserver aus einer Data-URI laden.
• Manche E-Mail-, PDF-Rendering- und Dokument-APIs nehmen einen HTML-Body als Base64-Feld an, damit Anführungszeichen und Zeilenumbrüche kein JSON-Escaping brauchen.

Browser erlauben einer Webseite nicht, das Hauptfenster zu einer data:text/html-URL zu navigieren. Links und Weiterleitungen dorthin scheitern daher stillschweigend oder zeigen einen Fehler. Iframes sind davon nicht betroffen.

Größe und Alternativen

Base64 macht Markup um etwa ein Drittel größer: Das 49 Bytes große Dokument <!doctype html><meta charset="utf-8"><p>café</p> wird zu 68 Zeichen. Bei HTML, das überwiegend aus ASCII besteht, ist eine prozentkodierte Data-URI oft kürzer, weil nur eine Handvoll Zeichen wie #, % und Nicht-ASCII-Bytes maskiert werden müssen. Base64 ist die sicherere Wahl, wenn das Markup groß ist, viele Sonderzeichen enthält oder in ein Feld kommt, das nur Base64 annimmt. Der Data-URI-Generator baut data:-Links für HTML, CSS und Bilder, und Performance von Data-URIs behandelt Caching und Größenabwägungen.

HTML in Base64 im Code

import base64

html = '<!doctype html><meta charset="utf-8"><p>café</p>'
uri = "data:text/html;charset=utf-8;base64," + base64.b64encode(html.encode("utf-8")).decode()

// Node.js
const html = "<p>café</p>";
const uri = "data:text/html;charset=utf-8;base64," + Buffer.from(html, "utf8").toString("base64");
// "data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+"

Im Browser verwenden Sie den Ansatz mit TextEncoder aus Base64 in JavaScript, denn btoa allein verstümmelt Nicht-ASCII-Zeichen oder lehnt sie ab. Siehe auch Base64 in Python.

Häufige Fragen