Data URLs - HTTP

在此页

句法
Encoding data into base64 format
Common problems
规范
浏览器兼容性
另请参阅
相关话题

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.

注意 : 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 URLs are composed of four parts: a prefix ( data: ), a MIME type indicating the type of data, an optional base64 token if non-textual, and the data itself:

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

mediatype 是 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. You can find more info on MIME types here and here .

A few examples:

data:,Hello%2C%20World!: Simple text/plain data. Note the use of percent-encoding (URL-encoding) for the quote and space characters. Also, for CSV data (MIME type "text/csv"), percent-encoding is needed to preserve the line endings that delimit rows of the spreadsheet.
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E: An HTML document with <h1>Hello, World!</h1>
data:text/html,<script>alert('hi');</script>

Encoding data into base64 format

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. By consisting only in ASCII characters, base64 strings are generally url-safe, and that's why they can be used to encode data in Data URLs.

Encoding in Javascript

The Web APIs have native methods to encode or decode to base64: Base64 encoding and decoding .

Encoding on a Unix system

Base64 encoding of a file or string on Linux and Mac OS X 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=

Encoding on Microsoft Windows

Encoding on Windows can be done through powershell or some dedicated tool. It can even be done via bash base64 utility (see section Encoding on a Unix system) if WSL is activated.

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
# outputs to console: aGVsbG8=
bash -c "echo -n hello`|base64"
# outputs to console: aGVsbG8=
# the backtick (`) is used to escape the piping (|) character here

Common problems

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

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

句法: 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 Firefox supports data URLs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited URLs to 65535 characters long which limits data URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data: , without specifying a MIME type).
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.
Security issues: A number of security issues (e.g. 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 has been blocked in Firefox 59+ (release version, Nightly/Beta from 58), and we hope to see other browsers follow suit soon. See Blocking Top-Level Navigations to data URLs for Firefox 58 了解更多细节。

规范

规范	Title
RFC 2397	The "data" URL scheme

浏览器兼容性

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
data URL scheme	Chrome 完整支持 Yes	Edge 完整支持 12 注意事项完整支持 12 注意事项注意事项 The maximum size supported is 4GB	Firefox 完整支持 Yes	IE 完整支持 8 注意事项完整支持 8 注意事项注意事项 The maximum size supported is 32kB	Opera 完整支持 7.2	Safari 完整支持 Yes	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 完整支持 Yes	Opera Android 完整支持 Yes	Safari iOS 完整支持 Yes	Samsung Internet Android 完整支持 Yes
CSS files	Chrome 完整支持 Yes	Edge 完整支持 12 注意事项完整支持 12 注意事项注意事项 The maximum size supported is 4GB	Firefox 完整支持 Yes	IE 完整支持 8 注意事项完整支持 8 注意事项注意事项 The maximum size supported is 32kB 完整支持 9 注意事项注意事项 The maximum size supported is 4GB	Opera 完整支持 7.2	Safari 完整支持 Yes	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 完整支持 Yes	Opera Android 完整支持 Yes	Safari iOS 完整支持 Yes	Samsung Internet Android 完整支持 Yes
HTML files	Chrome 完整支持 Yes	Edge 完整支持 79	Firefox 完整支持 Yes	IE 不支持 No	Opera 完整支持 Yes	Safari 完整支持 Yes	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 完整支持 Yes	Opera Android 完整支持 Yes	Safari iOS 完整支持 Yes	Samsung Internet Android 完整支持 Yes
JavaScript files	Chrome 完整支持 Yes	Edge 完整支持 12 注意事项完整支持 12 注意事项注意事项 The maximum size supported is 4GB	Firefox 完整支持 Yes	IE 完整支持 9 注意事项完整支持 9 注意事项注意事项 The maximum size supported is 4GB	Opera 完整支持 7.2	Safari 完整支持 Yes	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 完整支持 Yes	Opera Android 完整支持 Yes	Safari iOS 完整支持 Yes	Samsung Internet Android 完整支持 Yes
Top-level navigation blocked to data:// URIs	Chrome 完整支持 60	Edge 完整支持 ≤79	Firefox 完整支持 59	IE 不支持 No	Opera 完整支持 47	Safari ?	WebView Android 不支持 No	Chrome Android 完整支持 60	Firefox Android 完整支持 59	Opera Android 完整支持 44	Safari iOS ?	Samsung Internet Android 完整支持 8.0

在此页

句法