imported>PerfektesChaos: tk k

2023-07-17T17:22:13Z

tk k

Neue Seite

Ein '''Data-URL''' ist ein [[Uniform Resource Identifier#Schema (Scheme)|URI-Schema]], das es ermöglicht, Daten in ([[Hypertext Markup Language|HTML]]-)[[Quelltext]] so einzubetten, als wären es externe Ressourcen. Damit können die Daten, beispielsweise für eine Grafik, innerhalb eines HTML-Dokuments direkt im HTML-Quelltext untergebracht werden, statt sie, wie sonst üblich, aus einer Datei anzufordern.

Dies ist tendenziell einfacher als andere Einbettungsmethoden wie [[Multipurpose Internet Mail Extensions|MIME]] mit <code>cid</code>- oder <code>mid</code>-[[Uniform Resource Identifier|URIs]] (siehe dazu <nowiki>RFC 2111</nowiki><ref>{{RFC-Internet |RFC=2111 |Titel=Content-ID and Message-ID Uniform Resource Locators |Datum=1997-03}}</ref>). Data-URLs werden oft als [[Uniform Resource Locator]]s bezeichnet, obwohl sie keinen externen Inhalt referenzieren. In Wirklichkeit sind sie [[Uniform Resource Identifier]]s. Die Data-URL wird im <nowiki>RFC 2397</nowiki><ref name="RFC2397" /> der [[Internet Engineering Task Force]] (IETF) definiert.

Obwohl die IETF die Data-URL-Spezifikation 1998 veröffentlichte,<ref name="RFC2397" /> wurde diese niemals formell zum Standard erhoben.<ref>{{Internetquelle |url=https://www.rfc-editor.org/rfcxx00.html#Proposed |titel=Proposed Standards |werk=Official Internet Protocol Standards |hrsg=[[Internet Society]] |datum=2009-01-04 |abruf=2009-01-04}}</ref> Die Spezifikation von HTML 4.01 (Dezember 1999) verweist jedoch auf die Definition des Data-URL,<ref name="h-13.3.1">{{Internetquelle |autor=Dave Raggett, Arnaud Le Hors, Ian Jacobs |url=https://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.3.1 |titel=Objects, Images, and Applets: Rules for rendering objects |werk=HTML 4.01 Specification |hrsg=[[World Wide Web Consortium|W3C]] |datum=1999-12-24 |abruf=2008-03-20}}</ref> und die meisten aktuellen [[Webbrowser]] unterstützen Data-URLs.

== Webbrowser-Unterstützung ==
Aktuell unterstützen folgende [[Webbrowser]] Data-URLs:
* [[Gecko (Software)|Gecko]]-basierte Browser, wie [[Mozilla Firefox]]
* [[Opera (Browser)|Opera]]
* Microsoft Edge
* [[KDE]] durch das [[KDE Input/Output]]-System. Dies erlaubt dem KDE-Browser, [[Konqueror]], Data-URLs zu unterstützen.
* [[Apple Safari]]; obwohl Safaris [[HTML-Rendering]]-Engine, [[WebKit]], auf [[KHTML]] basiert, teilt [[Mac OS X]] nicht die [[KDE Input/Output|KDE-Input/Output]]-Architektur und die Implementation.
* Apple Safari für das [[iPhone]]
* [[Google Chrome]]
* [[Microsoft]] [[Internet Explorer]] bis einschließlich Version 7 unterstützt Data-URLs nicht. [[Internet Explorer#Internet Explorer 8|Internet Explorer 8]] begrenzt die Unterstützung aus Sicherheitsgründen auf ''nicht navigierbaren Inhalt'', wie in <code><nowiki><img></nowiki></code>-[[Tag (Informatik)|Tags]] und CSS-Regeln, damit in Data-URLs eingebettetes [[JavaScript]] nicht trotz Scriptfilter, wie sie bei [[Webmail]]-Clients verwendet werden, ausführbar ist.<ref name="MSDN">{{Internetquelle |url=http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx |titel=data Protocol |hrsg=[[Microsoft Developer Network|MSDN]] |abruf=2009-01-05}}</ref> Data-URLs müssen kleiner als 32 Kilobytes sein. Die Einschränkung wurde im IE9 aufgehoben.<ref name="ieinternalsblog">{{Internetquelle |autor=Eric Law |url=https://blogs.msdn.com/b/ieinternals/archive/2010/09/15/ie9-beta-minor-change-list.aspx |titel=IE9 Beta Minor Changes List |werk=blogs.msdn.com |abruf=2010-10-28}}</ref>

== Format ==
data:[<[[Internet Media Type|MIME-Typ]]>][;charset=<[[Zeichensatz]]>][;[[base64]]],<Daten>

Die Kodierung wird durch <code>;base64</code> gekennzeichnet. Wenn vorhanden, bedeutet das, dass die nachfolgenden Daten [[Base64]]-kodiert sind. Anderenfalls, bei Fehlen des <code>base64</code>-Parameters, werden die Daten durch [[URL-Encoding]] kodiert. Wenn die Angabe des MIME-Typs fehlt, wird als MIME-Typ <code style="white-space:nowrap">[[Plain text|text/plain]];charset=[[American Standard Code for Information Interchange|US-ASCII]]</code> angenommen. Bei abweichendem Zeichensatz kann als Abkürzung der MIME-Typ bei [[Plain text]] weggelassen, aber der Zeichensatz-Parameter benutzt werden.

== Vorteile ==
* Eingebettete Daten benötigen keinen [[Hypertext Transfer Protocol|HTTP]]-Request und sparen [[Datenverkehr|Traffic]] und [[Bandbreite]], wenn der [[Overhead (EDV)|Overhead]] der Kodierung kleiner ist als der HTTP-Overhead. Beispielsweise ist ein 600 [[Byte]] großes Bild [[Base64]]-kodiert 800 Bytes groß (wenn es unkomprimiert übertragen wird; HTML und CSS werden zumeist komprimiert übertragen). Wenn nun der HTTP-Overhead mehr als 200 Bytes beträgt, ist die Data-URL effizienter.
* Für das Transportieren von vielen kleinen Dateien kann die Data-URL im Transport schneller sein. [[Transmission Control Protocol|TCP-Verbindungen]] tendieren zu langsamem Start. Wenn jede Datei eine neue TCP-Verbindung benötigt, ist die Transportgeschwindigkeit mehr durch die [[Laufzeit (Elektrotechnik)|Laufzeit]] begrenzt als durch die verfügbare Bandbreite. Das Benutzen von HTTP-[[Keepalive]] verbessert die Situation, beseitigt aber den Engpass nicht völlig.
* Wenn die Webseite über [[Hypertext Transfer Protocol Secure|HTTPS]] aufgerufen wird, erwarten die meisten Webbrowser, dass alle Elemente dieser Webseite ebenfalls über eine sichere Verbindung nachgeladen werden, ansonsten wird der Benutzer benachrichtigt, dass durch die Mischung von sicheren und unsicheren Elementen die Sicherheit reduziert ist. HTTPS hat einen signifikant höheren Overhead als normales HTTP, somit erhöht die Einbettung von Webseitenelementen in Data-URLs die Geschwindigkeit in diesem Fall und verhindert, dass Sicherheitswarnungen ausgegeben werden.
* [[Webbrowser]] sind gewöhnlich so konfiguriert, dass nur eine bestimmte Maximalanzahl an HTTP-Verbindungen zum gleichen Webserver aufgebaut werden,<ref>{{RFC-Internet |RFC=2616 |Titel=Hypertext Transfer Protocol – HTTP/1.1 |Datum=1999-06 |Abschnitt=8}}</ref> somit sparen eingebettete Daten zu Gunsten anderer Inhalte HTTP-Verbindungen ein.
* Umgebungen mit eingeschränktem oder gesperrten Zugang zu externen Ressourcen können Inhalte einbetten, wenn es nicht erlaubt oder unpraktisch ist, diese extern zu referenzieren. Zum Beispiel könnte ein erweitertes HTML-Editorfeld ein eingefügtes Bild akzeptieren und es zu einer Data-URL umwandeln, um die Komplexität der externen Referenzierung vor dem Benutzer zu verstecken.
* Eine Multimediaseite kann als eine einzige Datei verwaltet werden.
* Obwohl es selten passiert, kann es vorkommen, dass die [[Integrität (Informationssicherheit)|Integrität der Dateien]] verletzt wird, wenn sie [[Hochladen|hochgeladen]] werden. Das kann Data-URLs nur passieren, wenn die Integrität der gesamten Seite verletzt ist.

== Nachteile ==
* Data-URLs können nicht separat von den sie enthaltenden Dokumenten (beispielsweise [[Hypertext Markup Language|HTML]]- oder [[Cascading Style Sheets|CSS]]-Dateien) [[HTTP Caching|gecacht]] werden, somit werden die Daten erneut heruntergeladen, wenn (je nach Einbettungsort) entweder das Dokument neu geladen wird oder sich die CSS-Datei an anderer Stelle geändert hat.
* Die Data-URL muss erneut kodiert und eingebettet werden, wenn eine Änderung durchgeführt wurde.
* Die Daten werden als einfacher [[Datenstrom]] eingebunden, und viele [[Laufzeitumgebung]]en wie [[Webbrowser]] unterstützen keine [[Containerformat]]e (wie <code>multipart/alternative</code> oder <code>message/rfc822</code>), um Daten größerer Komplexität wie [[Metadaten]], [[Datenkompression|komprimierte Daten]] oder [[Content Negotiation]] zu speichern.
* [[Base64]]-kodierte Daten sind um ein Drittel größer als ihr [[Binärdatei|binäres Äquivalent]]. Dieser Nachteil relativiert sich, wenn der Server die Antwort mit Hilfe des <code>Content-Encoding</code>-[[Hypertext Transfer Protocol|HTTP]]-Headers [[Datenkompression|komprimiert]].
* Data-URLs machen es [[Sicherheitssoftware]] schwerer, Inhalte zu filtern.<ref name="RFC2397" />
* Webbrowser auf mobilen Geräten (z. B. [[Smartphone]]s) haben in der Regel eine Funktion, mit der das Laden von Bildern deaktiviert werden kann, um Datenvolumen zu sparen. Das direkte Einbetten in das Dokument verhindert die Nutzung einer solchen Funktion.

== Beispiele ==
=== HTML ===
{| class="wikitable float-right" style="width:15em"
|style="text-align:center;border-bottom: 0pt white solid"|[[Datei:Kleiner roter Punkt.png]]
|-
|style="border-top: 0pt white solid"| Der rote Punkt aus dem Beispiel links
|}
Ein [[Hypertext Markup Language|HTML]]-Fragment, welches das Bild eines kleinen roten Punktes einbindet:
<syntaxhighlight lang="html">
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAXUlEQVQY073M
vQ2CUADE8R90tOzgFkzgMg7gLs7BCDYmhD0sTV7F2Vi8EF5nuOpyH3/+rW4f
hMvPDh3r4Stcwxxe4dbEh3co4ROedddXowmlyrYwtoj3sIRHc3S+vgySGhd7
StmKAAAAAElFTkSuQmCC" alt="Roter Punkt" />
</syntaxhighlight>
Wie oben gezeigt, kann die Data-URL [[Leerraum|Whitespace]] zur [[Quelltextformatierung|besseren Lesbarkeit]] enthalten. Der geneigte Leser kann den zwischen den Gänsefüßchen stehenden Text ausschneiden und in die Adresszeile eines unterstützenden Browsers eingeben.

=== CSS ===
Eine [[Cascading Style Sheets|CSS]]-Regel, welche ein Hintergrundbild einbindet:
<syntaxhighlight lang="css" style="overflow:auto;">
ul.checklist li.complete { margin-left: 20px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat;}
</syntaxhighlight>

=== JavaScript ===
Ein [[JavaScript]]-Beispiel, welches ein neues, eingebettetes [[Fenster (Computer)|Fenster]] öffnet, zum Beispiel für eine [[Fußnote]]:

<syntaxhighlight lang="javascript">
window.open('data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Cht'+
'ml%20lang%3D%22en%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2F'+
'title%3E%3C%2Fhead%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0'+
'A%3C%2Fhtml%3E%0A%0D%0A','_blank','height=300,width=400');
</syntaxhighlight>

Dieses Beispiel funktioniert nicht im [[Internet Explorer#Internet Explorer 8|Internet Explorer 8]]. Seine Sicherheitseinstellungen verbieten navigierbare Dateitypen in Data-URLs.<ref name="MSDN" />

=== Einfügen in HTML oder CSS mit PHP ===
Weil [[Base64]]-kodierte Data-URLs nicht [[Menschenlesbarkeit|menschenlesbar]] sind, könnte ein Webseitenersteller kodierte Daten vorzugsweise mit einer [[Skriptsprache]] wie [[PHP]] einfügen. Das hat den Vorteil, dass bei einer Änderung der eingebundenen Datei der HTML-Quelltext nicht geändert werden muss sowie [[Binärdatei|binäre]] Daten vom [[Textdatei|Text]] getrennt werden. Der Nachteil ist eine höhere Belastung der [[Webserver|Server]]-[[Hauptprozessor|CPU]], wenn kein serverseitiger [[Cache]] benutzt wird.

<syntaxhighlight lang="php">
<?php
function data_uri($file, $mime)
{
$contents = file_get_contents($file);
$base64 = base64_encode($contents);
return ('data:' . $mime . ';base64,' . $base64);
}
?>

<img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="Ein Elefant" />
</syntaxhighlight>

Die oben abgebildete Funktion kann auch auf [[Cascading Style Sheets|CSS]]-Daten angewendet werden:

<syntaxhighlight lang="php">
<?php header('Content-type: text/css');?>

div.menu
{
background-image:url('<?php echo data_uri('menu_background.png','image/png'); ?>');
}
</syntaxhighlight>

Client- oder serverseitige Funktionen wie [[Conditional Comments]] oder [[User Agent|User-Agent]]-Abfragen können benutzt werden, um alternative [[Uniform Resource Locator|URLs]] für ältere Browser wie den [[Internet Explorer]] bis Version 7 anzubieten.

== Konvertierungswerkzeuge ==
* alles2DataURL ist ein kostenloses Online-Werkzeug für die Umwandlung beliebiger Dateiformate (bis zu einer Maximalgröße von ca. 3 MB) in eine Data-URL.<ref>[https://quizdidaktik.de/alles2dataurl/index.html alles2DataURL]</ref>
* DataURL2Text ist ein kostenloses Online-Werkzeug für die Rückumwandlung einer beliebigen Data-URL in die Originaldaten.<ref>[https://quizdidaktik.de/dataurl2text/index.html DataURL2Text]</ref>
* Clipboard Observer ist ein kostenloses [[Java (Programmiersprache)|Java]]-Werkzeug für einfaches Konvertieren von [[Portable Network Graphics|PNG]]-Dateien zu einer Data-URL.<ref>[http://www.lubino.sk/?goto=pngToBase64&lng=en Clipboard Observer]</ref>

== Siehe auch ==
* Ein alternatives Verfahren für das Einbetten von Ressourcen ist [[MIME Encapsulation of Aggregate HTML Documents|MHTML]], meist benutzt in [[Multipurpose Internet Mail Extensions|HTML-E-Mails]].
* [[Internet Media Type]] für die benutzten Dateitypen

== Weblinks ==
* {{RFC-Internet |RFC=2397 |Titel=The “data” URL scheme |Datum=1998}}
* [https://developer.mozilla.org/en/The_data_URL_scheme Über Data-URLs.] [[Mozilla Developer Center]] (englisch).
* [https://www-archive.mozilla.org/quality/networking/testing/datatests.html Data-URL-Tests.] (englisch).
* [http://www.sveinbjorn.org/dataurls_css Data-URLs effektiv mit Cascading Style Sheets nutzen.] sveinbjorn.org (englisch).
* [https://caniuse.com/#feat=datauri Übersicht zur Browserunterstützung von Data-URL.] caniuse.com

== Einzelnachweise ==
<references>
<ref name="RFC2397">
{{RFC-Internet |RFC=2397 |Titel=The “data” URL scheme |Datum=1998}}
</ref>
</references>

[[Kategorie:URI]]

Data-URL - Versionsgeschichte

imported>PerfektesChaos: tk k