Entwicklertools · Base64-Encoder und -Decoder
Daten-URIs erklärt: Wie data:image/png;base64 funktioniert und woher es kommt
· Hintergrund
base64 Kodierung
Das Daten-URL-Schema wurde in 1998 angegeben, um kleine Ressourcen direkt in eine Seite einzubetten. Dieser Beitrag erklärt seine Grammatik, warum Base64 optional ist und wo Browser Grenzen ziehen.
Das Favicon, das eine 1,300-Zeichen-URL war – traf auf einen data: URI in freier Wildbahn und las seine Teile
Ein Daten-URI bettet eine kleine Ressource direkt in eine URL ein und vermeidet so eine separate HTTP-Anfrage. Das Format ist in RFC 2397 (definiert in 1998) angegeben und verwendet eine Grammatik mit einem Schema, einem optionalen Medientyp, einem optionalen Codierungsflag und der Nutzlast selbst. Beispielsweise ist data:text/plain,hello ein Klartext-Daten-URI, der das Wort hallo enthält. Der Browser verarbeitet dies auf die gleiche Weise wie eine HTTP-Anfrage, aber anstatt den Inhalt über das Netzwerk abzurufen, dekodiert er ihn aus der URL selbst.
Daten-URIs werden am häufigsten für kleine Bilder, CSS-Symbole und Testvorrichtungen verwendet. Ein data:-URI mit Base64-Codierung sieht folgendermaßen aus: data:image/png;base64,iVBORw0K.... Die Aufschlüsselung ist: data: ist das Schema; image/png ist der Medientyp; ;base64 ist das Codierungsflag; Die lange Zeichenfolge besteht aus den Base64-codierten Bildbytes. Wenn ein Browser diese URL sieht, dekodiert er Base64, um die ursprünglichen Bytes wiederherzustellen, und rendert dann das Bild mit diesen Bytes.
Lesen eines Daten-URI aus seiner sichtbaren Grammatik – Medientyp, optionaler Base64-Marker und Nutzlast
Wenn das Codierungsflag weggelassen wird (data:text/html,<p>hello</p>), ist die Nutzlast prozentcodierter UTF-8 Text, nicht base64. Das Vorhandensein von ;base64 teilt dem Browser mit, welche Decodierungsregel anzuwenden ist. Der Medientyp in einem data: URI ist ein MIME-Typ, derselbe Typstring, der in HTTP Content-Type-Headern verwendet wird. image/png, text/plain, application/json und image/svg+xml sind gängige Beispiele. Wenn kein Medientyp angegeben ist, ist der Standardwert text/plain;charset=US-ASCII..
Ein Browser muss basierend auf dem Medientyp bestimmen, wie die Bytes gerendert werden: Wenn image/png, angezeigt wird, sind die Bytes PNG; Wenn dort text/html, steht, ist der Inhalt HTML. Die Angabe des falschen Medientyps kann zu verwirrenden Ergebnissen führen. Eine PNG-Datei mit der Bezeichnung text/plain wird als fehlerhafte Zeichen anstelle eines Bildes angezeigt. Base64 ist in einem Daten-URI optional. Bei Textinhalten ist die Prozentkodierung (die gleiche Kodierung, die auch in URL-Abfragezeichenfolgen verwendet wird) oft kompakter als base64. Ein Daten-URI-Consumer entscheidet anhand des Medientyps und der Markierung vor dem Komma, wie die Nutzlast interpretiert wird. Der Base64-Encoder liefert nur die Payload-Zeichen. Es wird weder ein MIME-Typ hinzugefügt, noch wird ausgewählt, ob die Bytes PNG oder SVG beschreiben, noch wird die zusammengesetzte Adresse validiert.
Warum Base64 optional ist – prozentual codierte Textnutzdaten für SVG und Klartext im Vergleich zu Base64 für Binärdateien
Der URI data:text/html,<p>Hello</p> enthält den HTML-Code als Literalzeichen (mit Prozentkodierung für alle Sonderzeichen wie Anführungszeichen oder spitze Klammern). Base64 ist nützlich für Binärdaten, die nicht als Text dargestellt werden können, und für Fälle, in denen die Nutzlast viele Sonderzeichen enthält, die durch Prozentkodierung aufgebläht würden. Eine kleine SVG- oder Textdatei kann kleiner prozentual kodiert sein; Eine Binärdatei muss Base64 sein. Für die manuelle Erstellung eines data: URI ist die Kenntnis des Medientyps und der Codierung erforderlich.
Für ein SVG-Symbol können Sie data:image/svg+xml verwenden, gefolgt von entweder prozentcodiertem SVG-Markup oder ;base64 und base64-codierten Bytes. Für die prozentuale Kodierung schließen Sie das SVG in data:image/svg+xml, ein und kodieren dann alle spitzen Klammern, Anführungszeichen und anderen Sonderzeichen prozentual. Das Ergebnis ist lang, aber für Menschen lesbar. Nehmen Sie für Base64 die SVG-Bytes, codieren Sie sie in Base64, erzeugen Sie data:image/svg+xml;base64, und hängen Sie dann die Base64-Zeichenfolge an. Base64 ist für Binärdateien normalerweise kompakter, für SVG-Text kann die prozentcodierte Form jedoch kürzer sein.
Arbeitsbeispiel: Erstellen eines data: URI für ein kleines SVG von Hand – Codieren des Markups als Text und Zusammensetzen der Zeichenfolge
Browser und konsumierende Anwendungen können Grenzwerte oder Richtlinienbeschränkungen für Daten-URIs festlegen, dieses Repository legt jedoch keine tragbare numerische Obergrenze fest. Speichernutzung, Parser-Verhalten und Sicherheitsrichtlinien hängen auch davon ab, wo der Wert angezeigt wird. Testen Sie daher den genauen Zielbrowser und Einbettungskontext, anstatt sich auf einen gespeicherten Grenzwert zu verlassen.
Ein 5 MB eingebettetes Bild in jeder HTML-Datei würde die Seitengröße aufblähen. Daten-URIs eignen sich am besten für kleine Ressourcen: CSS-Symbole, kleine Bilder oder Testdaten. Bei großen Dateien ist eine externe Anfrage schneller, da der Browser die Antwort zwischenspeichern und auf mehreren Seiten wiederverwenden kann; a data: URI wird jedes Mal eingefügt, wenn die Seite geladen wird.
Browser- und Sicherheitsgrenzen, die in der nutzenden Anwendung überprüft und nicht angenommen werden müssen
Ein üblicher Schwellenwert liegt bei einigen Kilobyte; darunter Daten: URIs sind effizient; Darüber hinaus sind externe Dateien normalerweise schneller. Sicherheits- und Browserrichtlinien schränken die Datennutzung ein: URI-Nutzung in bestimmten Kontexten. Eine Navigation auf oberster Ebene (Klicken auf einen Link, der auf einen Daten-URI mit HTML-Inhalt verweist) wird häufig blockiert, um Phishing zu verhindern. Ein Daten-URI in einem Skript-SRC-Attribut kann beliebiges JavaScript ausführen, was ein Sicherheitsrisiko darstellt.
Browser wenden CSP-Regeln (Content Security Policy) auf folgende Daten an: URIs; ein strenger CSP kann sie vollständig verbieten. Ein Daten-URI in einer IMG-Quelle oder einer Iframe-Quelle ist normalerweise zulässig, die Einbettung in einen Stil- oder Skriptkontext kann jedoch eingeschränkt sein. Überprüfen Sie stets die Browserkompatibilität und Sicherheitsrichtlinien Ihrer Zielumgebung. Daten-URIs in CSS sind für kleine Hintergrundbilder üblich. Die Syntax ist dieselbe: url(data:image/png;base64,...).
Wo Daten: URIs sind immer noch das richtige Werkzeug – CSS-Symbole, E-Mail-sichere Inline-Bilder und Test-Fixtures
Eine CSS-Datei mit eingebetteten Daten: URIs können als einzelne Datei mit allen enthaltenen Bildern versendet werden, wodurch HTTP-Anfragen reduziert werden. Dies ist nützlich für kleine Icon-Sets oder einfache Grafiken. Große, in CSS eingebettete Bilder blähen die Datei auf und verlangsamen ihre Analyse. Moderne Build-Tools (wie Webpack) können kleine Bilder automatisch in Daten konvertieren: URIs in CSS und externe Bilder in normale URLs, wodurch die Leistung ausgeglichen wird.
Das Daten-URI-Format wird durch RFC 2397 definiert, ein kurzes Dokument, das die Grammatik angibt, aber nicht definiert, wo Daten-URIs verwendet werden können oder nicht. Browser-Anbieter haben aufgrund von Sicherheits- und Leistungsbedenken ihre eigenen Einschränkungen hinzugefügt.
Was hiervon nicht abgedeckt wird – Blob: URLs, Objekt-URLs und Dateisystemzugriff
Einige Systeme verfügen über veraltete Daten: URI-Unterstützung in bestimmten Kontexten (z. B. Formularaktion in CSP-Ebene 3), um Missbrauch zu verhindern. Wenn Sie einen Daten-URI verwenden, testen Sie ihn in Ihrem Zielbrowser. Laut RFC ist das Format gültig, die Sicherheitsrichtlinie des Browsers blockiert es jedoch möglicherweise.
Das manuelle Erstellen eines Daten-URI ist in der Produktion ungewöhnlich; Die meisten Build-Tools und Bibliotheken übernehmen die Konvertierung. Für das Debuggen ist es jedoch hilfreich, das Format zu verstehen. Wenn Sie in Ihrem CSS oder HTML eine lange data:image/...-URL sehen, können Sie diese mit dem Base64-Encoder- und Decoder-Tool dekodieren: Entfernen Sie das Präfix data:image/...;base64,, fügen Sie die verbleibende Zeichenfolge in das Tool ein und dekodieren Sie sie, um die tatsächlichen Bytes anzuzeigen.
Takeaway: ein kleines Format mit strenger Grammatik – wie der Base64-Encoder und -Decoder den Textkodierungsschritt handhabt, damit Sie einen gültigen URI zusammenstellen können
Für SVG-Daten: URIs können Sie die Textform prozentual dekodieren und das XML-Markup lesen. Die Anatomie von Daten verstehen: URI erleichtert die Fehlerbehebung bei eingebetteten Ressourcen. Daten-URIs sind ein Webstandard (RFC 2397), der die direkte Einbettung von Ressourcen als URLs ermöglicht. Sie sind am effizientesten für kleine, stabile Ressourcen, die nicht von separatem Caching profitieren. Das Format umfasst eine optionale Angabe des Medientyps und ein Codierungsflag (Base64 oder implizite Prozentcodierung).
Base64-Kodierung ist für Binärdaten erforderlich, für Text jedoch optional; Prozentcodiertes SVG kann besser lesbar sein. Browser-Sicherheitsrichtlinien schränken ein, wo Daten verwendet werden können: URIs. Daher ist es wichtig, die Einschränkungen in Ihrer Zielumgebung zu kennen. Mit dem Base64-Encoder- und Decoder-Tool können Sie eine Ressource manuell codieren oder einen eingebetteten URI decodieren, um deren Inhalt zu überprüfen.