Data URI scheme


The data URI scheme is a uniform resource identifier scheme that provides a way to include data in-line in Web pages as if they were external resources. It is a form of file literal or here document. This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol request, which may be more efficient than multiple HTTP requests, and used by several browser extensions to package images as well as other multimedia contents in a single HTML file for page saving., data URIs are fully supported by most major browsers, and partially supported in Internet Explorer and Microsoft Edge.

Syntax

The syntax of data URIs was defined in Request for Comments 2397, published in August 1998, and follows the URI scheme syntax. A data URI consists of:
data:,<data>
Examples of data URIs showing most of the features are:
The minimal data URI is data:,, consisting of the
scheme, no media-type, and zero-length data.
Thus, within the overall URI syntax, a data URI consists of a scheme and a path, with no authority part, query string, or fragment. The optional media type, the optional base64 indicator, and the data are all parts of the
URI path.

Examples of use

HTML

An HTML fragment embedding a picture of a small red dot:

ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg" alt="Red dot" />

In this example, the lines are broken for formatting purposes. In actual URIs,
including data URIs, control characters and spaces are "excluded characters". This means that whitespace characters are not permitted in data URIs. However, in the context of HTML 4 and HTML 5, linefeeds within an element attribute value are ignored. So the data URI above would be processed ignoring the linefeeds, giving the correct result. But note that this is an HTML feature, not a data URI feature, and in other contexts, it is not possible to rely on whitespace within the URI being ignored.

CSS

A Cascading Style Sheets rule that includes a background image:

ul.checklist li.complete

In this example, the \ + line terminators
are a feature of CSS, indicating continuation on the next line. These would be removed by the CSS stylesheet processor, and the data URI would be reconstituted without whitespace, making it correct, since whitespace is not allowed within the data component of a data:
URI.

JavaScript

A JavaScript statement that opens an embedded subwindow, as for a footnote link:

window.open;

SVG

A Scalable Vector Graphic image containing an embedded JPEG image encoded in Base64:


/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
////////////////////////////////////////////////////////////wAARCAAYAEADAREA
AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k="/>

Malware and phishing

The data URI can be utilized to construct attack pages that attempt to obtain usernames and passwords from unsuspecting web users. It can also be used to get around cross-site scripting restrictions, embedding the attack payload fully inside the address bar, and hosted via URL shortening services rather than needing a full website that is controlled by a third party. As a result, some browsers now block webpages from navigating to data URIs.