Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).
Data URLs, URLs prefixed with the data:
scheme, allow content creators to embed small files inline in documents.
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 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>
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>
data:text/html,<script>alert('hi');</script>
- An HTML document 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 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
- 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, thedata
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 limitsdata
URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plaindata:
, 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.
-
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 (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://
URIs 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 for more details.
Specifications
Specification | Title |
---|---|
RFC 2397 | The "data" URL scheme |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support Yes | Edge
Full support
12
| Firefox Full support Yes | IE
Full support
8
| Opera Full support 7.2 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile
Full support
Yes
| Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
CSS files | Chrome Full support Yes | Edge
Full support
12
| Firefox Full support Yes | IE
Full support
8
| Opera Full support 7.2 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile
Full support
Yes
| Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
HTML files | Chrome ? | Edge No support No | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile No support No | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
JavaScript files | Chrome Full support Yes | Edge
Full support
12
| Firefox Full support Yes | IE
Full support
9
| Opera Full support 7.2 | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile
Full support
Yes
| Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Top-level navigation blocked to data:// URIs | Chrome Full support 60 | Edge ? | Firefox Full support 59 | IE No support No | Opera Full support 47 | Safari ? | WebView Android No support No | Chrome Android Full support 60 | Edge Mobile ? | Firefox Android Full support 59 | Opera Android Full support 47 | Safari iOS ? | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.