data: URLs
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Data URLs, URLs prefixed with thedata: scheme, allow content creators to embed small files inline in documents. They were formerly known as "data URIs" until that name was retired by the WHATWG.
Note:Data URLs are treated as unique opaque origins by modern browsers, rather than inheriting the origin of the settings object responsible for the navigation.
Syntax
data:[<media-type>][;base64],<data>data:The scheme of the URL.
<media-type>OptionalTheMIME type indicating the type of data, such as
image/jpegfor a JPEG image file. If omitted, defaults totext/plain;charset=US-ASCII. You can finda full dissection of MIME type structure anda table of common MIME types on the web.;base64OptionalIndicates that the data should be base64-decoded; seeencoding data into base64 format.
<data>The data itself. If the data containscharacters defined in RFC 3986 as reserved characters, or contains space characters, newline characters, or other non-printing characters, those characters must bepercent-encoded. If the data is textual, you can embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify
base64to embed base64-encoded binary data.
A few examples:
data:,Hello%2C%20World%21The text/plain data
Hello, World!. Note how the comma ispercent-encoded as%2C, and the space character as%20.data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==base64-encoded version of the above
data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3EAn HTML document with
<h1>Hello, World!</h1>data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3EAn HTML document with
<script>alert('hi');</script>that executes a JavaScript alert. Note that the closing script tag is required.
Encoding data into base64 format
Base64 is a group of binary-to-text encoding schemes that represent binary data in anASCII string format by translating it into a radix-64 representation. By consisting only of characters permitted by the URL syntax ("URL safe"), we can safely encode binary data in data URLs. Base64 uses the characters+ and/, which may have special meanings in URLs. Because Data URLs have no URL path segments or query parameters, this encoding is safe in this context.
Encoding in JavaScript
The Web APIs have native methods to encode or decode to base64:Base64.
Encoding on a Unix system
Base64 encoding of a file or string on Linux and macOS systems can be achieved using the command-linebase64 (or, as an alternative, theuuencode utility with-m argument).
echo -n hello|base64# outputs to console: aGVsbG8=echo -n hello>a.txtbase64 a.txt# outputs to console: aGVsbG8=base64 a.txt>b.txt# outputs to file b.txt: aGVsbG8=Encoding on Microsoft Windows
On Windows,Convert.ToBase64String from PowerShell can be used to perform the Base64 encoding:
[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))# outputs to console: aGVsbG8=Alternatively, a GNU/Linux shell (such asWSL) provides the utilitybase64:
bash$ echo -n hello | base64# outputs to console: aGVsbG8=Common problems
This section describes problems that commonly occur when creating and usingdata URLs.
data:text/html,lots of text…<p><a name%3D"bottom">bottom</a>?arg=val</p>
This represents an HTML resource whose contents are:
lots of text…<p><a name="bottom">bottom</a>?arg=val</p>- Syntax
The format for
dataURLs 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
dataURL provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, thedatashould be formattable with whitespace (linefeed, tab, or spaces), but there are practical issues that arisewhen using base64 encoding.- Length limitations
Browsers are not required to support any particular maximum length of data.Chromium and Firefox limit
dataURLs to 512MB, and Safari (WebKit) limits them to 2048MB.Note that Firefox 97 increased the limit from 256KB to 32MB, andFirefox 136 increased it to 512MB.- 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 URL is opaque, so an attempt to use a query string (page-specific parameters, with the syntax
<url>?parameter-data) with a data URL will just include the query string in the data the URL represents.- Security issues
A number of security issues (for example, phishing) have been associated with data URLs, and navigating to them in the browser's top level. To mitigate such issues, top-level navigation to
data:URLs is blocked in all modern browsers. Seethis blog post from the Mozilla Security Team for more details.
Specifications
| Specification |
|---|
| The "data" URL scheme # section-2 |