Skip to main content

Visit Mozilla.org

The data URL scheme

From MDC

The data: URIs, defined by RFC 2397, allow content creators to embed small files inline in documents.

Contents

[edit] Syntax

The data: URIs have the following syntax: 

data:[<mediatype>][;base64],<data>

The mediatype is a MIME type string, such as "image/jpeg" for a JPEG image file. If omitted, defaults to text/plain;charset=US-ASCII

If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify base64 to embed base64-encoded binary data.

A few examples: 

data:,Hello%2C%20World!                             (Simple text/plain data)
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D     (base64-encoded version of the above)
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E (An HTML document with <h1>Hello, World</h1>)

[edit] Encoding data into base64 format

This can be done easily using the command-line uuencode utility on Linux and Mac OS X systems: 

uuencode -m infile remotename

The infile parameter is the name of the file you wish to encode into base64 format, and remotename is the remote name for the file, which isn't actually used in data URLs.

The output will look something like this: 

begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====

The data: URL will use the encoded data after the initial header line.

You can experiment with data: URL construction using the data URI kitchen, which lets you provide the data and creates the data: URI for you.

[edit] Converting an nsIFile to a data URI

This function returns a base 64-encoded data URI from the passed nsIFile. 

function generateDataURI(file) {
  var contentType = Components.classes["@mozilla.org/mime;1"]
                              .getService(Components.interfaces.nsIMIMEService)
                              .getTypeFromFile(file);
  var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                              .createInstance(Components.interfaces.nsIFileInputStream);
  inputStream.init(file, 0x01, 0600, 0);
  var stream = Components.classes["@mozilla.org/binaryinputstream;1"]
                         .createInstance(Components.interfaces.nsIBinaryInputStream);
  stream.setInputStream(inputStream);
  var encoded = btoa(stream.readBytes(stream.available()));
  return "data:" + contentType + ";base64," + encoded;
}

[edit] Common problems

This section describes problems that commonly occur when creating and using data: URLs.

Syntax
The format for data: URLs is very simple, but it's easy to forget to put a comma before the <data> segment, or to incorrectly encode the data into base64 format.
Formatting in HTML
A data: URL provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the data: should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding.
Length limitations
Although Mozilla supports data: URLs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera browser limits data: URLs to around 4100 characters.
Lack of error handling
Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.
No support for anchors, query strings, etc.
The data portion of a data URL is opaque, so an attempt to use an anchor (a reference to a specific portion of a resource, usually a location in an HTML document, with the syntax <url>#identifier) or a query string (page-specific parameters, with the syntax <url>?parameter-data) with a data URL will just include the anchor or query string in the data the URL represents. For example, 
data:text/html,lots of text...<p><a name="bottom">bottom</a>?arg=val#bottom
represents an HTML resource whose contents are: 
lots of text...<p><a name="bottom">bottom</a>?arg=val#bottom

[edit] Support in other browsers

The data: protocol is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer, however, does not currently support it.

[edit] Resources

Retrieved from "http://developer.mozilla.org/en/docs/The_data_URL_scheme"