data URIs

  • Revision slug: data_URIs
  • Revision title: data URIs
  • Revision id: 5683
  • Created:
  • Creator: nK0de
  • Is current revision? No
  • Comment 890 words added, 12 words removed

Revision Content

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

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>

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 URI will use the encoded data after the initial header line.

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

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;
}

Security

{{ gecko_callout_heading("6.0") }}

Prior to Gecko 6.0 {{ geckoRelease("6.0") }}, data URIs inherited the security context of the page currently in the browser window if the user enters a data URI into the location bar. Now data URIs get a new, empty, security context.

Common problems

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

Syntax
The format for data URIs 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 URI 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 URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits data URIs to around 65000 characters. 
Lack of error handling
Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.
No support for query strings, etc.

The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <url>?parameter-data) with a data URI will just include the query string in the data the URI represents. For example:

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

This represents an HTML resource whose contents are:

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

Note: as of Firefox 6, fragments (anchors) are processed consistent with other URI schemes, thus a bare "#" in the content needs to be escaped as '%23'.

Support in other browsers

The data scheme is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer 7 and below, however, do not currently support it. Internet Explorer 8 and above only supports data URIs for images in CSS.

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

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>

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 URI will use the encoded data after the initial header line.

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

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;
}

Security

{{ gecko_callout_heading("6.0") }}

Prior to Gecko 6.0 {{ geckoRelease("6.0") }}, data URIs inherited the security context of the page currently in the browser window if the user enters a data URI into the location bar. Now data URIs get a new, empty, security context.

Common problems

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

Syntax
The format for data URIs 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 URI 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 URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits data URIs to around 65000 characters. 
Lack of error handling
Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.
No support for query strings, etc.

The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <url>?parameter-data) with a data URI will just include the query string in the data the URI represents. For example:

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

This represents an HTML resource whose contents are:

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

Note: as of Firefox 6, fragments (anchors) are processed consistent with other URI schemes, thus a bare "#" in the content needs to be escaped as '%23'.

Support in other browsers

The data scheme is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer 7 and below, however, do not currently support it. Internet Explorer 8 and above only supports data URIs for images in CSS.

Resources

Revision Source

<p><code>data</code> URIs, defined by <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, allow content creators to embed small files inline in documents.</p>
<h2 name="Syntax">Syntax</h2>
<p>The <code>data</code> URIs have the following syntax:</p>
<pre class="eval">data:[&lt;mediatype&gt;][;base64],&lt;data&gt;
</pre>
<p>The <code>mediatype</code> is a MIME type string, such as "<code>image/jpeg</code>" for a JPEG image file. If omitted, defaults to <code>text/plain;charset=US-ASCII</code></p>
<p>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 <code>base64</code> to embed base64-encoded binary data.</p>
<p>A few examples:</p>
<dl> <dt>data:,Hello%2C%20World!</dt> <dd>Simple text/plain data</dd> <dt>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</dt> <dd>base64-encoded version of the above</dd> <dt>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</dt> <dd>An HTML document with <code>&lt;h1&gt;Hello, World&lt;/h1&gt;</code></dd>
</dl>
<h2 name="Encoding_data_into_base64_format">Encoding data into base64 format</h2>
<p>This can be done easily using the command-line <code>uuencode</code> utility on Linux and Mac OS X systems:</p>
<pre class="eval">uuencode -m <code>infile</code> <code>remotename</code>
</pre>
<p>The <code>infile</code> parameter is the name of the file you wish to encode into base64 format, and <code>remotename</code> is the remote name for the file, which isn't actually used in <code>data</code> URLs.</p>
<p>The output will look something like this:</p>
<pre class="eval">begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====
</pre>
<p>The <code>data</code> URI will use the encoded data after the initial header line.</p>
<p>You can experiment with <code>data</code> URI construction using <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">the data URI kitchen</a>, which lets you provide the data and creates the <code>data</code> URI for you.</p>
<h2 name="Converting_an_nsIFile_to_a_data_URI">Converting an nsIFile to a data URI</h2>
<p>This function returns a base 64-encoded data URI from the passed <a href="/en/XPCOM_Interface_Reference/nsIFile" title="en/nsIFile">nsIFile</a>.</p>
<pre>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;
}
</pre>
<h2>Security</h2>
<div class="geckoVersionNote"> <p>{{ gecko_callout_heading("6.0") }}</p> <p>Prior to Gecko 6.0 {{ geckoRelease("6.0") }}, <code>data</code> URIs inherited the security context of the page currently in the browser window if the user enters a <code>data</code> URI into the location bar. Now <code>data</code> URIs get a new, empty, security context.</p>
</div>
<h2 name="Common_problems">Common problems</h2>
<p>This section describes problems that commonly occur when creating and using <code>data</code> URIs.</p>
<dl> <dt>Syntax</dt> <dd>The format for <code>data</code> URIs 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.</dd> <dt>Formatting in HTML</dt> <dd>A <code>data</code> URI provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the <code>data</code> should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">when using base64 encoding</a>.</dd> <dt>Length limitations</dt> <dd>Although Mozilla supports <code>data</code> URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits <code>data</code> URIs to around 65000 characters. </dd> <dt>Lack of error handling</dt> <dd>Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.</dd> <dt>No support for query strings, etc.</dt> <dd> <p>The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <code><span style="font-style: italic;">&lt;url&gt;</span>?parameter-data</code>) with a data URI will just include the query string in the data the URI represents. For example:</p> <pre class="eval">data:text/html,lots of text...&lt;p&gt;&lt;a name%3D"bottom"&gt;bottom&lt;/a&gt;?arg=val
</pre> <p>This represents an HTML resource whose contents are:</p> <pre class="eval">lots of text...&lt;p&gt;&lt;a name="bottom"&gt;bottom&lt;/a&gt;?arg=val
</pre> <p>Note: as of Firefox 6, fragments (anchors) are processed consistent with other URI schemes, thus a bare "#" in the content needs to be escaped as '%23'.</p> </dd>
</dl>
<h2 name="Support_in_other_browsers">Support in other browsers</h2>
<p>The <code>data</code> scheme is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer 7 and below, however, do not currently support it. Internet Explorer 8 and above only supports <code>data</code> URIs for images in CSS.</p>
<p><code>data</code> URIs, defined by <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, allow content creators to embed small files inline in documents.</p>
<h2 name="Syntax">Syntax</h2>
<p>The <code>data</code> URIs have the following syntax:</p>
<pre class="eval">data:[&lt;mediatype&gt;][;base64],&lt;data&gt;
</pre>
<p>The <code>mediatype</code> is a MIME type string, such as "<code>image/jpeg</code>" for a JPEG image file. If omitted, defaults to <code>text/plain;charset=US-ASCII</code></p>
<p>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 <code>base64</code> to embed base64-encoded binary data.</p>
<p>A few examples:</p>
<dl> <dt>data:,Hello%2C%20World!</dt> <dd>Simple text/plain data</dd> <dt>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</dt> <dd>base64-encoded version of the above</dd> <dt>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</dt> <dd>An HTML document with <code>&lt;h1&gt;Hello, World&lt;/h1&gt;</code></dd>
</dl>
<h2 name="Encoding_data_into_base64_format">Encoding data into base64 format</h2>
<p>This can be done easily using the command-line <code>uuencode</code> utility on Linux and Mac OS X systems:</p>
<pre class="eval">uuencode -m <code>infile</code> <code>remotename</code>
</pre>
<p>The <code>infile</code> parameter is the name of the file you wish to encode into base64 format, and <code>remotename</code> is the remote name for the file, which isn't actually used in <code>data</code> URLs.</p>
<p>The output will look something like this:</p>
<pre class="eval">begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====
</pre>
<p>The <code>data</code> URI will use the encoded data after the initial header line.</p>
<p>You can experiment with <code>data</code> URI construction using <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">the data URI kitchen</a>, which lets you provide the data and creates the <code>data</code> URI for you.</p>
<h2 name="Converting_an_nsIFile_to_a_data_URI">Converting an nsIFile to a data URI</h2>
<p>This function returns a base 64-encoded data URI from the passed <a href="/en/XPCOM_Interface_Reference/nsIFile" title="en/nsIFile">nsIFile</a>.</p>
<pre>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;
}
</pre>
<h2>Security</h2>
<div class="geckoVersionNote"> <p>{{ gecko_callout_heading("6.0") }}</p> <p>Prior to Gecko 6.0 {{ geckoRelease("6.0") }}, <code>data</code> URIs inherited the security context of the page currently in the browser window if the user enters a <code>data</code> URI into the location bar. Now <code>data</code> URIs get a new, empty, security context.</p>
</div>
<h2 name="Common_problems">Common problems</h2>
<p>This section describes problems that commonly occur when creating and using <code>data</code> URIs.</p>
<dl> <dt>Syntax</dt> <dd>The format for <code>data</code> URIs 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.</dd> <dt>Formatting in HTML</dt> <dd>A <code>data</code> URI provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the <code>data</code> should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise <a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">when using base64 encoding</a>.</dd> <dt>Length limitations</dt> <dd>Although Mozilla supports <code>data</code> URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits <code>data</code> URIs to around 65000 characters. </dd> <dt>Lack of error handling</dt> <dd>Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.</dd> <dt>No support for query strings, etc.</dt> <dd> <p>The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <code><span style="font-style: italic;">&lt;url&gt;</span>?parameter-data</code>) with a data URI will just include the query string in the data the URI represents. For example:</p> <pre class="eval">data:text/html,lots of text...&lt;p&gt;&lt;a name%3D"bottom"&gt;bottom&lt;/a&gt;?arg=val
</pre> <p>This represents an HTML resource whose contents are:</p> <pre class="eval">lots of text...&lt;p&gt;&lt;a name="bottom"&gt;bottom&lt;/a&gt;?arg=val
</pre> <p>Note: as of Firefox 6, fragments (anchors) are processed consistent with other URI schemes, thus a bare "#" in the content needs to be escaped as '%23'.</p> </dd>
</dl>
<h2 name="Support_in_other_browsers">Support in other browsers</h2>
<p>The <code>data</code> scheme is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer 7 and below, however, do not currently support it. Internet Explorer 8 and above only supports <code>data</code> URIs for images in CSS.</p>
<h2 name="Resources">Resources</h2>
<ul> <li><a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a> -- The "data" URL scheme"</li> <li><a class="external" href="http://www.packetgram.com/pktg/docs/std/urls/techrfc2397.html">Technical review of <span class="nowiki">RFC 2397</span></a></li> <li><a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The data URI kitchen</a></li>
</ul>
Revert to this revision