Data-URLs
Data-URLs, URLs mit dem Präfix data:
, ermöglichen es Inhaltsanbietern, kleine Dateien direkt in Dokumente einzubetten. Sie wurden früher als "Data URIs" bezeichnet, bis dieser Name von der WHATWG zurückgezogen wurde.
Hinweis: Data-URLs werden von modernen Browsern als einzigartige, undurchsichtige Ursprünge behandelt, anstatt den Ursprung des für die Navigation verantwortlichen Einstellungsobjekts zu erben.
Syntax
Data-URLs bestehen aus vier Teilen: einem Präfix (data:
), einem MIME-Typ, der den Datentyp angibt, einem optionalen base64
-Token, wenn nicht-textuell, und den Daten selbst:
data:[<media-type>][;base64],<data>
Der media-type
ist ein MIME-Typ String, wie zum Beispiel 'image/jpeg'
für eine JPEG-Bilddatei. Wenn weggelassen, ist der Standardwert text/plain;charset=US-ASCII
.
Wenn die Daten in RFC 3986 als reserviert definierte Zeichen enthalten 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 geeigneter Entitäten oder Escape-Sequenzen, basierend auf dem Typ des umgebenden Dokuments). Andernfalls können Sie base64
angeben, um base64-codierte Binärdaten einzubetten. Weitere Informationen zu MIME-Typen finden Sie hier und hier.
Einige Beispiele:
data:,Hello%2C%20World%21
-
Die
text/plain
DatenHello, World!
. Beachten Sie, wie das Komma als%2C
und das Leerzeichen als%20
prozentcodiert ist. data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
-
Base64-codierte 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 einen JavaScript-Alert ausführt. Beachten Sie, dass das schließende Script-Tag erforderlich ist.
Daten in das Base64-Format kodieren
Base64 ist eine Gruppe von Binär-zu-Text-Codierungsschemata, 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 durch die URL-Syntax erlaubt sind ("URL-sicher"), können wir Binärdaten sicher in Data-URLs codieren. Base64 verwendet die Zeichen +
und /
, die möglicherweise spezielle Bedeutungen in URLs haben. Da Data-URLs keine URL-Pfadsegmente oder Abfrageparameter haben, ist diese Codierung in diesem Kontext sicher.
Kodierung in JavaScript
Die Web-APIs haben native Methoden zum Codieren oder Dekodieren von Base64: Base64.
Kodierung auf einem Unix-System
Base64-Kodierung einer Datei oder eines Strings auf Linux- und macOS-Systemen kann mit dem Kommandozeilenbefehl base64
erfolgen (oder alternativ mit dem uuencode
Dienstprogramm mit dem Argument -m
).
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
Unter Windows kann Convert.ToBase64String aus 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$ 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:
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 "Daten"-Segment zu setzen oder die Daten falsch in das Base64-Format zu kodieren. - Formatierung in HTML
-
Eine
data
URL liefert eine Datei innerhalb einer Datei, die relativ zur Breite des umgebenden Dokuments potenziell sehr breit sein kann. Als URL sollte diedata
mit Leerzeichen (Zeilenumbruch, Tabulator oder Leerzeichen) formatiert werden können, aber es gibt praktische Probleme, die bei der Verwendung der Base64-Kodierung auftreten. - Längenbeschränkungen
-
Browser sind nicht verpflichtet, irgendeine bestimmte maximale Länge der Daten zu unterstützen. Zum Beispiel begrenzte der Opera 11 Browser URLs auf 65.535 Zeichen, was
data
URLs auf 65.529 Zeichen begrenzt (65.529 Zeichen sind die Länge der kodierten Daten, nicht der Quelle, wenn Sie das einfachedata:
verwenden, ohne einen MIME-Typ anzugeben). Firefox Version 97 und neuer unterstütztdata
URLs bis zu 32MB (vor Version 97 lag das Limit bei fast 256MB). Chromium lehnt URLs über 512MB ab und Webkit (Safari) URLs über 2048MB. - Fehlende Fehlerbehandlung
-
Ungültige Parameter in Medien oder Tippfehler bei der Angabe von
'base64'
werden ignoriert, aber es wird kein Fehler angezeigt. - Keine Unterstützung für Abfragezeichenfolgen, usw.
-
Der Datenteil einer Data-URL ist undurchsichtig, daher wird ein Versuch, eine Abfragezeichenfolge (seiten-spezifische Parameter mit der Syntax
<url>?parameter-data
) mit einer Data-URL zu verwenden, die Abfragezeichenfolge einfach in die Daten einschließen, die die URL darstellt. - Sicherheitsprobleme
-
Eine Reihe von Sicherheitsproblemen (zum Beispiel Phishing) wurde mit Data-URLs und deren Navigation im obersten Browserlevel in Verbindung gebracht. Um solche Probleme zu mildern, wird die Navigation auf der obersten Ebene zu
data:
URLs in allen modernen Browsern blockiert. Weitere Einzelheiten finden Sie in diesem Blogbeitrag des Mozilla-Sicherheitsteams.
Spezifikationen
Specification |
---|
The "data" URL scheme # section-2 |
Browser-Kompatibilität
BCD tables only load in the browser