data: URLs

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Data URLs, URLs, die mit dem data:-Schema versehen sind, ermöglichen es Inhaltsautoren, kleine Dateien direkt in Dokumente einzubetten. Sie wurden früher als "data URIs" bezeichnet, bis dieser Name durch die WHATWG zurückgezogen wurde.

Hinweis: Data URLs werden von modernen Browsern als einzigartige opake Ursprünge behandelt, anstatt den Ursprung des für die Navigation verantwortlichen Einstellungselements zu erben.

Syntax

url

data:[<media-type>][;base64],<data>

data:: Das Schema der URL.
<media-type> Optional: Der MIME-Typ, der den Datentyp angibt, wie z.B. image/jpeg für eine JPEG-Bilddatei. Wenn weggelassen, wird standardmäßig text/plain;charset=US-ASCII verwendet. Sie können eine umfassende Darstellung der MIME-Typ-Struktur und eine Tabelle der gängigen MIME-Typen im Web finden.
;base64 Optional: Gibt an, dass die Daten base64-dekodiert werden sollten; siehe Kodierung von Daten im Base64-Format.
<data>: Die Daten selbst. Wenn die Daten Zeichen enthalten, die in RFC 3986 als reservierte Zeichen definiert sind, oder Leerzeichen, Zeilenumbrüche oder andere nicht druckbare Zeichen enthalten, müssen diese Zeichen prozentcodiert werden. Wenn die Daten textuell sind, können Sie den Text einbetten (unter Verwendung der entsprechenden Entitäten oder Escape-Sequenzen, basierend auf dem Typ des umgebenden Dokuments). Andernfalls können Sie base64 angeben, um base64-kodierte Binärdaten einzubetten.

Einige Beispiele:

data:,Hello%2C%20World%21: Die text/plain-Daten Hello, World!. Beachten Sie, wie das Komma als %2C prozentkodiert und das Leerzeichen als %20 dargestellt wird.
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==: Base64-kodierte Version des obigen Beispiels
data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E: Ein HTML-Dokument mit <h1>Hello, World!</h1>
data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E: Ein HTML-Dokument mit <script>alert('hi');</script>, das eine JavaScript-Warnung ausführt. Beachten Sie, dass das schließende Script-Tag erforderlich ist.

Kodierung von Daten im Base64-Format

Base64 ist eine Gruppe von Binär-zu-Text-Kodierungsschemata, die Binärdaten in einem ASCII-String-Format darstellen, indem sie in eine Radix-64-Darstellung übersetzt werden. Da es nur aus Zeichen besteht, die von der URL-Syntax erlaubt sind ("URL-sicher"), können wir Binärdaten sicher in Data URLs kodieren. Base64 verwendet die Zeichen + und /, die in URLs spezielle Bedeutungen haben können. Da Data URLs keine URL-Pfadsegmente oder Abfrageparameter haben, ist diese Kodierung in diesem Kontext sicher.

Kodierung in JavaScript

Die Web-APIs haben native Methoden, um in Base64 zu kodieren oder zu dekodieren: Base64.

Kodierung auf einem Unix-System

Die Base64-Kodierung einer Datei oder eines Strings auf Linux- und macOS-Systemen kann mit dem Befehlszeilen-Tool base64 (oder alternativ dem uuencode-Dienstprogramm mit dem Argument -m) erreicht werden.

bash

echo -n hello|base64
# outputs to console: aGVsbG8=

echo -n hello>a.txt
base64 a.txt
# outputs to console: aGVsbG8=

base64 a.txt>b.txt
# outputs to file b.txt: aGVsbG8=

Kodierung auf Microsoft Windows

Auf Windows kann Convert.ToBase64String von PowerShell verwendet werden, um die Base64-Kodierung durchzuführen:

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
# outputs to console: aGVsbG8=

Alternativ bietet eine GNU/Linux-Shell (wie WSL) das Dienstprogramm base64:

bash

bash$ echo -n hello | base64
# outputs to console: aGVsbG8=

Häufige Probleme

Dieser Abschnitt beschreibt Probleme, die häufig beim Erstellen und Verwenden von data URLs auftreten.

data:text/html,lots of text…<p><a name%3D"bottom">bottom</a>?arg=val</p>

Dies stellt eine HTML-Ressource dar, deren Inhalt ist:

html

lots of text…
<p><a name="bottom">bottom</a>?arg=val</p>

Syntax: Das Format für data URLs ist sehr einfach, aber es ist leicht zu vergessen, ein Komma vor dem "data"-Segment zu setzen oder die Daten falsch im Base64-Format zu kodieren.
Formatierung in HTML: Eine data URL bietet eine Datei innerhalb einer Datei, die potenziell sehr breit im Verhältnis zur Breite des umgebenden Dokuments sein kann. Als URL sollte die data mit Leerzeichen (Zeilenumbruch, Tabulator oder Leerzeichen) formatiert sein, aber es gibt praktische Probleme, die bei der Verwendung der Base64-Kodierung auftreten.
Längenbeschränkungen: Browser sind nicht verpflichtet, eine bestimmte maximale Datenlänge zu unterstützen. Chromium und Firefox begrenzen data URLs auf 512MB, und Safari (WebKit) begrenzt sie auf 2048MB. Beachten Sie, dass Firefox 97 das Limit von 256KB auf 32MB erhöht hat und Firefox 136 es auf 512MB erhöht hat.
Fehlende Fehlerbehandlung: Ungültige Parameter im Medium oder Tippfehler beim Spezifizieren von 'base64' werden ignoriert, aber es wird kein Fehler ausgegeben.
Keine Unterstützung von Abfragezeichenfolgen, etc.: Der Datenbereich einer Daten-URL ist opak, daher wird ein Versuch, eine Abfragezeichenfolge (seitenbezogene Parameter, mit der Syntax <url>?parameter-data) mit einer Daten-URL zu verwenden, die Abfragezeichenfolge einfach in die Daten einbeziehen, die die URL darstellt.
Sicherheitsprobleme: Eine Reihe von Sicherheitsproblemen (zum Beispiel Phishing) wurden mit Daten-URLs in Verbindung gebracht, insbesondere wenn sie in der obersten Ebene des Browsers geladen werden. Um solche Probleme zu mindern, wird das Laden von data: URLs auf oberster Ebene in allen modernen Browsern blockiert. Siehe diesen Blogbeitrag des Mozilla Security Teams für mehr Details.

Spezifikationen

Specification
The "data" URL scheme # section-2