Data-URL

Data-URL

Die Data-URL ist ein URI-Schema, welches ermöglicht, Daten so im (HTML-)Quelltext einzubetten, als wären es externe Ressourcen. Sie tendiert dazu, einfacher zu sein als andere Einbettungsmethoden, wie MIME mit cid- oder mid-URIs. Data-URLs werden oft als Uniform Resource Locators bezeichnet, obwohl sie keinen externen Inhalt referenzieren. In Wirklichkeit sind sie Uniform Resource Identifier. Die Data-URL wird im RFC 2397 der Internet Engineering Task Force (IETF) definiert.

Obwohl die IETF die Data-URL-Spezifikation 1998 veröffentlichte,[1] wurde diese niemals formell als Standard erhoben.[2] Aber die Spezifikation von HTML 4.01 verweist auf die Definition der Data-URL[3], und die meisten aktuellen Webbrowser unterstützen Data-URLs.

Inhaltsverzeichnis

Webbrowser-Unterstützung

Aktuell werden Data-URLs unterstützt von folgenden Webbrowsern:

Vorteile

  • Eingebettete Daten benötigen keinen HTTP-Request und sparen Traffic und Bandbreite, wenn der Overhead der Kodierung kleiner ist als der HTTP-Overhead. Beispielsweise ist ein 600 Byte großes Bild Base64-kodiert 800 Bytes groß. 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. TCP-Verbindungen tendieren zu langsamem Start. Wenn jede Datei eine neue TCP-Verbindung benötigt, ist die Transportgeschwindigkeit mehr begrenzt durch die Laufzeit als durch die verfügbare Bandbreite. Das Benutzen des HTTP-Keepalive verbessert die Situation, aber beseitigt nicht völlig den Engpass.
  • Wenn die Webseite über HTTPS aufgerufen wird, erwarten die meisten Webbrowser, dass alle Elemente der 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,[6] 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.
  • Es ist möglich, eine Multimediaseite als eine einzige Datei zu verwalten.
  • Obwohl es selten passiert, kann es vorkommen, dass die Integrität der Dateien verletzt wird, wenn sie 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 HTML- oder CSS-Dateien) gecacht werden, somit werden die Daten erneut heruntergeladen, wenn das Dokument neu geladen wird.
  • Die Data-URL muss erneut kodiert und eingebettet werden, wenn eine Änderung durchgeführt wurde.
  • Beim immer noch häufig benutzten Internet Explorer bis Version 7 fehlt die Unterstützung für Data-URLs.
  • Der Internet Explorer begrenzt in Version 8 die Länge der Data-URLs auf 32 Kilobyte.[4][5]
  • Die Daten werden als einfacher Datenstrom eingebunden, und viele Laufzeitumgebungen wie Webbrowser unterstützen keine Containerformate (wie multipart/alternative oder message/rfc822), um Daten größerer Komplexität wie Metadaten, komprimierte Daten oder Content Negotiation zu speichern.
  • Base64-kodierte Daten sind um ein Drittel größer als ihr binäres Äquivalent. Dieser Nachteil relativiert sich, wenn der Server die Antwort mit Hilfe des Content-Encoding-HTTP-Headers komprimiert.
  • Data-URLs machen es Sicherheitssoftware schwerer, Inhalte zu filtern.[7]

Format

data:[<MIME-Typ>][;charset="<Zeichensatz>"][;base64],<Daten>

Die Kodierung wird durch ;base64 gekennzeichnet. Wenn vorhanden, bedeutet das, dass die nachfolgenden Daten Base64-kodiert sind. Anderenfalls, bei Fehlen des base64-Parameters, werden die Daten durch URL Encoding kodiert. Wenn die Angabe des MIME-Typs fehlt, wird als MIME-Typ text/plain;charset=US-ASCII angenommen. Bei abweichendem Zeichensatz kann als Abkürzung der MIME-Typ bei Plain text weggelassen, aber der Zeichensatz-Parameter benutzt werden.

Beispiele

HTML

Ein HTML-Fragment, welches das Bild eines kleinen roten Punktes einbindet:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Roter Punkt" />

Wie oben gezeigt, kann die Data-URL Whitespace zur besseren Lesbarkeit enthalten.

CSS

Eine CSS-Regel, welche ein Hintergrundbild einbindet:

ul.checklist  li.complete { margin-left: 20px; background:
  url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
  top left no-repeat; }

JavaScript

Ein JavaScript-Beispiel, welches ein neues, eingebettetes Fenster öffnet, zum Beispiel für eine Fußnote:

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');

Dieses Beispiel funktioniert nicht im Internet Explorer 8. Seine Sicherheitseinstellungen verbieten navigierbare Dateitypen in Data-URLs.[4]

Einfügen in HTML oder CSS mit PHP

Weil Base64-kodierte Data-URLs nicht menschenlesbar sind, könnte ein Webseitenersteller bevorzugen, dass die kodierten Daten mit einer Skriptsprache wie PHP eingefügt werden. Das hat den Vorteil, dass bei einer Änderung der eingebundenen Datei der HTML-Quelltext nicht geändert werden muss, sowie dass binäre Daten vom Text getrennt werden. Der Nachteil ist eine höhere Belastung der Server-CPU, wenn kein server-seitiger Cache benutzt wird.

<?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" />

Die oben abgebildete Funktion kann auch auf CSS-Daten angewendet werden:

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

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

Konvertierungswerkzeuge

Siehe auch

Weblinks

Einzelnachweise

  1. Masinter, L (August 1998): RFC 2397 - The "data" URL scheme. Internet Engineering Task Force. Abgerufen am 12. August 2008.
  2. Proposed Standards. Official Internet Protocol Standards. Internet Society (4. Januar 2009). Abgerufen am 4. Januar 2009.
  3. Dave Raggett; Le Hors, Arnaud; Jacobs, Ian (24. Dezember 1999): Objects, Images, and Applets: Rules for rendering objects. HTML 4.01 Specification. W3C. Abgerufen am 20. März 2008.
  4. a b c data Protocol. MSDN. Abgerufen am 5. Januar 2009.
  5. a b IE9 Beta Minor Changes List. Eric Law. Abgerufen am 28. Oktober 2010.
  6. RFC 2616. RFC 2616 Section 8. Internet Engineering Task Force. Abgerufen am 19. Dezember 2010.
  7. Masinter, L (August 1998): Security. RFC 2397 - The "data" URL scheme S. 2. Internet Engineering Task Force. Abgerufen am 12. August 2008.

Wikimedia Foundation.

Игры ⚽ Нужно сделать НИР?

Schlagen Sie auch in anderen Wörterbüchern nach:

  • Data: URL — data: URL  это определённая стандартом RFC 2397 схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. Она гораздо проще альтернативных методов включения, таких как MIME с… …   Википедия

  • data: URL — data: URL  это определённая стандартом RFC 2397 схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. Она гораздо проще альтернативных методов включения, таких как MIME с… …   Википедия

  • Data: URL — Saltar a navegación, búsqueda El esquema data: URI definido en las normas IETF RFC 2397 en un esquema URI que permite la inclusión de pequeños elementos de datos en línea, como si fueran referenciados hacia una fuente externa. Suelen ser mucho… …   Wikipedia Español

  • Data — bezeichnet: ein Android im Star Trek Universum, gespielt von Brent Spiner, siehe Figuren im Star Trek Universum #Lieutenant Commander Data ein URI Schema, siehe Data URL DATA steht für: Debt, AIDS, Trade in Africa, eine multinationale… …   Deutsch Wikipedia

  • Data URI scheme — The data URI scheme is a URI scheme (Uniform Resource Identifier scheme) that provides a way to include data in line in web pages as if they were external resources. It tends to be simpler than other inclusion methods, such as MIME with cid or… …   Wikipedia

  • URL — Единый указатель ресурсов (англ. URL Uniform Resource Locator)  единообразный локатор (определитель местонахождения) ресурса. По английски «URL» целиком произносится как /ɜː(ɹ)l/, по русски чаще говорят [у эр эл], [ю ар эл] или [урл]… …   Википедия

  • Url — Единый указатель ресурсов (англ. URL Uniform Resource Locator) единообразный локатор (определитель местонахождения) ресурса. По‐английски «URL» целиком произносится как /ɜː(ɹ)l/, по‐русски чаще говорят [у эр эл], [ю эр эл] или [урла] (сленг).… …   Википедия

  • Data URI scheme — Le Data URI scheme est un Schéma d URI, dans le contexte d Internet, qui contient directement des données. L IETF décrit ce schéma dans le RFC 2397[1]. Le schéma est le suivant : data:[<mediatype>][;base64],<data> Un… …   Wikipédia en Français

  • Data-link switching — (DLSw) is a tunneling protocol designed to tunnel unroutable, non IP based protocols such as IBM Systems Network Architecture (SNA) and NBF over an IP network.DLSw was initially documented in IETF RFC 1434 in 1993. In 1995 it was further… …   Wikipedia

  • URL normalization — (or URL canonicalization) is the process by which URLs are modified and standardized in a consistent manner. The goal of the normalization process is to transform a URL into a normalized or canonical URL so it is possible to determine if two… …   Wikipedia

Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”