files/en-us/web/uri/reference/schemes/data/index.md
Data URLs, URLs prefixed with the data: 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.
data:[<media-type>][;base64],<data>
data:
<media-type> {{optional_inline}}
image/jpeg for a JPEG image file. If omitted, defaults to text/plain;charset=US-ASCII. You can find a full dissection of MIME type structure and a table of common MIME types on the web.;base64 {{optional_inline}}
<data>
base64 to embed base64-encoded binary data.A few examples:
data:,Hello%2C%20World%21
Hello, World!. Note how the comma is {{Glossary("Percent-encoding", "percent-encoded")}} as %2C, and the space character as %20.data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E
<h1>Hello, World!</h1>data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E
<script>alert('hi');</script> that executes a JavaScript alert. Note that the closing script tag is required.Base64 is a group of binary-to-text encoding schemes that represent binary data in an {{Glossary("ASCII")}} 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.
The Web APIs have native methods to encode or decode to base64: Base64.
Base64 encoding of a file or string on Linux and macOS systems can be achieved using the command-line base64 (or, as an alternative, the uuencode utility with -m argument).
echo -n hello|base64
# outputs to console: aGVsbG8=
echo -n hello>a.txt
base64 a.txt
# outputs to console: aGVsbG8=
base64 a.txt>b.txt
# outputs to file b.txt: aGVsbG8=
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 as WSL) provides the utility base64:
bash$ echo -n hello | base64
# outputs to console: aGVsbG8=
This section describes problems that commonly occur when creating and using data URLs.
data:text/html,lots of text…<p><span class%3D"bottom">bottom</span>?arg=val</p>
This represents an HTML resource whose contents are:
lots of text…
<p><span class="bottom">bottom</span>?arg=val</p>
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.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 formattable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding.data URLs to 512MB, and Safari (WebKit) limits them to 2048MB.
Note that Firefox 97 increased the limit from 256KB to 32MB, and Firefox 136 increased it to 512MB.'base64', are ignored, but no error is provided.<url>?parameter-data) with a data URL will just include the query string in the data the URL represents.data: URLs is blocked in all modern browsers. See this blog post from the Mozilla Security Team for more details.{{Specifications}}
{{Compat}}