Data-URI-Parser

So analysieren Sie eine Data-URI

1. Fügen Sie die URI in das Feld ein. Sie kann auch in Code stecken: eine CSS-Regel mit url("data:..."), ein Tag <img src="data:..."> oder ein Markdown-Bild. Die erste data:-URI wird extrahiert, und die Statuszeile weist darauf hin.
2. Lesen Sie das Ergebnis: MIME, Parameter, Kodierung (Base64 oder prozentkodiert), Länge des Datenteils in Zeichen, Dekodierte Größe und wonach der Inhalt aussieht.
3. Darunter werden die Nutzdaten mit ihrem SHA-256 und einem Hex-Dump angezeigt: Bilder, SVG, PDF, Audio, Video, Schriften, Text, JSON, ZIP-Archive und mehr.
4. Mit Ausgabekodierung lassen Sie die URI unverändert oder wandeln sie in Base64 oder URL-kodiert um, wählen ein Ausgabeformat wie CSS-url() oder ein HTML-Tag und kopieren das Ergebnis. Datei herunterladen speichert die Nutzdaten.

Was der Parser akzeptiert

Der Parser folgt den Regeln für Data-URLs aus dem Fetch-Standard, die Browser umsetzen und die nachsichtiger sind als das ursprüngliche RFC 2397. Daher akzeptiert er, was ein Browser akzeptiert:

Zeilenumbrüche und Tabs in der URI werden vor dem Parsen entfernt, wie Browser es tun, eine in einem Stylesheet über mehrere Zeilen umbrochene URI lässt sich also trotzdem parsen. ;base64 unterscheidet nicht zwischen Groß- und Kleinschreibung, Parameterwerte in Anführungszeichen werden entpackt, und URL-sicheres Base64 wird akzeptiert. Prozent-Escapes werden zuerst zu Bytes dekodiert, sodass sogar ein Base64-Body funktioniert, der als %2B%2F geschrieben ist.

Angegebener Typ und tatsächlicher Inhalt

Der MIME-Typ in einer Data-URI ist nur ein Etikett. Der Parser prüft die dekodierten Bytes gegen bekannte Dateisignaturen und warnt, wenn sie nicht übereinstimmen:

• data:image/jpeg;base64,iVBORw0KGgo... ergibt „Angegeben ist image/jpeg, der Inhalt sieht aber nach PNG aus.“ Browser erkennen Rasterbilder am Inhalt, daher wird so etwas oft trotzdem angezeigt, strengere Software lehnt es aber ab.
• Ein Typ, der kein gültiger MIME-Typ ist, etwa image png mit Leerzeichen, ergibt eine eigene Warnung.

Um ein Etikett zu korrigieren, dekodieren Sie die Datei mit Datei herunterladen und bauen eine saubere URI mit dem Data-URI-Generator, oder Sie fügen den Base64-Teil in Base64 in Datei ein, das die richtige Endung und den richtigen MIME-Typ anbietet.

Verdächtige data:-Links untersuchen

URIs vom Typ data:text/html wurden für Phishing genutzt, weil die ganze gefälschte Seite im Link mitreist, ohne Server dahinter, den man sperren könnte. Chrome und Firefox weigern sich inzwischen, einen Tab über einen Link dorthin zu navigieren, aber solche Links tauchen weiterhin in E-Mails, QR-Codes, Dokumenten und Chatnachrichten auf.

Einen solchen Link hier einzufügen ist ein sicherer Weg zu sehen, was er anzeigen würde. Ein vollständiges HTML-Dokument wird in einem Sandbox-Frame dargestellt, der Skripte, Formulare und externe Ressourcen blockiert, mit dem vollständigen Quelltext darunter. Anderes HTML oder Skripte werden nur als Text gezeigt. SVG-Nutzdaten werden als Bilder gezeichnet, die keine Skripte ausführen, und ihr Markup wird aufgelistet, damit Sie nach <script>-Elementen oder on...-Handlern suchen können. Die Content Security Policy der Seite erlaubt Skripten nur Verbindungen zum Seitenaufrufzähler von Cloudflare und lädt Bilder nur von der Website selbst oder aus data:- und blob:-URLs, ein Tracking-Pixel oder entferntes Skript in den Nutzdaten wird also nie abgerufen.

Umkodieren und umwandeln

Ausgabekodierung wandelt eine URI in die andere Kodierung um, ohne die Nutzdaten anzurühren:

• Unverändert lassen gibt die URI ohne Zeilenumbrüche zurück.
• Base64 passt zu Binärdaten und zu Umgebungen, in denen Sonderzeichen Ärger machen.
• URL-kodiert ist bei reinem ASCII-Text und SVG kürzer und im Quelltext lesbar.

Nutzdaten, URI-Länge und Overhead unter der Ausgabe zeigen, welche Kodierung für Ihre Daten kürzer ist. Speziell für SVG bietet SVG in Data-URI zusätzlich eine optimierte Kodierung und vergleicht alle drei, gzip eingeschlossen.

Häufige Fragen