Base64 in HTML

So dekodieren Sie Base64 in HTML

1. Fügen Sie das Base64 in Base64 oder Data-URI ein. Eine URI data:text/html;base64, funktioniert ebenfalls. Für einen großen, als Text gespeicherten E-Mail-Body nutzen Sie .txt-Datei öffnen.
2. Die Infoliste zeigt Zeichensatz und Anzahl der Zeilen. Darunter zeigt ein Sandbox-Frame die gerenderte Seite, mit dem Hinweis „Vorschau in der Sandbox: Skripte, Formulare und externe Ressourcen werden blockiert. Der Quelltext steht unten.“
3. Das Feld Text unter der Vorschau enthält den Quelltext. Text kopieren kopiert alles.
4. Drücken Sie Datei herunterladen, um decoded.html zu speichern.

Nichts wird irgendwohin gesendet. Das Dekodieren findet in Ihrem Browser statt, und die Seite darf außer dem Seitenaufrufzähler von Cloudflare keine Netzwerkanfragen stellen.

Warum die Vorschau in einer Sandbox läuft

HTML aus unbekannter Quelle kann mehr als Text anzeigen. Ein E-Mail-Body kann ein Tracking-Pixel enthalten, das meldet, wann und wo er geöffnet wurde, eine Phishing-Seite kann ein Login-Formular enthalten, das an den Angreifer sendet, und jede Seite kann Skripte ausführen. Die Vorschau blockiert all das:

Die Richtlinie blockiert auch Inline-Styles, daher zeigt die Vorschau Text, Links und Struktur der Nachricht schlichter, als ein Mailprogramm es täte. Als data:-URIs eingebettete Bilder sind erlaubt und erscheinen normal.

Seiten über 2 MB werden nicht in der Vorschau gezeigt („Zu groß für eine Vorschau. Sehen Sie sich den Quelltext unten an oder laden Sie die Datei herunter.“). Das Quelltextfeld zeigt die ersten 256 KB jedes Dokuments; Text kopieren kopiert bei Dokumenten bis 8 MB den vollständigen Quelltext.

HTML in Base64 erkennen

Der Zeichensatz wird anhand der Bytes erkannt: ein Byte Order Mark, UTF-16, gültiges UTF-8 oder ersatzweise Windows-1252. Ein <meta charset>-Tag im Dokument wird nicht ausgewertet, eine Seite in einer anderen alten Kodierung kann in der Vorschau daher falsche Umlaute zeigen, während die heruntergeladene Datei ihre Original-Bytes behält.

Woher Base64-HTML kommt

In E-Mails ist die HTML-Version einer Nachricht oft ein MIME-Teil mit Content-Type: text/html und Content-Transfer-Encoding: base64. Fügen Sie nur die kodierten Zeilen dieses Teils hier ein, oder öffnen Sie die ganze Rohnachricht im EML-Decoder, der jeden Teil und jeden Anhang zeigt. Base64 in E-Mails erklärt die Struktur.

Manche Dienste, die E-Mails empfangen oder rendern, liefern den HTML-Body als Base64-Feld im JSON eines Webhooks oder einer API, und Template- und PDF-Rendering-APIs geben das erzeugte HTML manchmal ebenso zurück. Base64 in JSON dekodieren verarbeitet eine ganze Payload auf einmal.

Phishing-Kampagnen nutzen data:text/html-URIs, um eine komplette gefälschte Login-Seite in einem Link oder Anhang zu transportieren. Fügen Sie die URI hier ein, sehen Sie die Seite, ohne sie auszuführen. Wie man solche URIs baut, steht unter HTML in Base64.

Nicht vertrauenswürdiges HTML in Ihrer eigenen App anzeigen

Derselbe Ansatz funktioniert auf jeder Webseite: dekodieren, dann das Ergebnis in einen iframe mit leerem sandbox-Attribut setzen. Die Sandbox allein verhindert nicht, dass externe Bilder und Stylesheets geladen werden, stellen Sie also eine Content Security Policy für den Frame voran:

function previewHtml(b64, container) {
  const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
  const html = new TextDecoder().decode(bytes);
  const csp = `<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src data:; style-src 'unsafe-inline'">`;
  const frame = document.createElement("iframe");
  frame.setAttribute("sandbox", "");
  frame.srcdoc = csp + html;
  container.append(frame);
}

In Chrome führte eine Testseite mit einem Skript, einem externen Stylesheet und einem externen Bild mit dieser Funktion kein Skript aus und stellte keine Anfrage; ohne die <meta>-Zeile wurden Bild und Stylesheet geladen. Anders als die Vorschau auf dieser Seite behält sie Inline-Styles bei. Mehr unter Base64 in JavaScript.

Häufige Fragen