The data URI scheme is a uniform resource identifier (URI) 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 (HTTP) request, which may be more efficient than multiple HTTP requests,^[1] and used by several browser extensions to package images as well as other multimedia content in a single HTML file for page saving.^[2][3] As of 2022, data URIs are fully supported by most major browsers, and partially supported in Internet Explorer.^[4]

Syntax

The syntax of data URIs is defined in Request for Comments (RFC) 2397, published in August 1998,^[5] and follows the URI scheme syntax. A data URI consists of:

data:content/type;base64,

• The scheme, data. It is followed by a colon (:).
• An optional media type. The media type part may include one or more parameters, in the format attribute=value, separated by semicolons (;) . A common media type parameter is charset, specifying the character set of the media type, where the value is from the IANA list of character set names.^[6] If one is not specified, the media type of the data URI is assumed to be text/plain;charset=US-ASCII.
• An optional base64 extension base64, separated from the preceding part by a semicolon. When present, this indicates that the data content of the URI is binary data, encoded in ASCII format using the Base64 scheme for binary-to-text encoding. The base64 extension is distinguished from any media type parameters by virtue of not having a =value component and by coming after any media type parameters. Since Base64 encoded data is approximately 33% larger than original data, it is recommended to use Base64 data URIs only if the server supports HTTP compression or embedded files are smaller than 1KB.
• The data, separated from the preceding part by a comma (,). The data is a sequence of zero or more octets represented as characters. The comma is required in a data URI, even when the data part has zero length. The characters permitted within the data part include ASCII upper and lowercase letters, digits, and many ASCII punctuation and special characters. Note that this may include characters, such as colon, semicolon, and comma which are delimiters in the URI components preceding the data part. Other octets must be percent-encoded. If the data is Base64-encoded, then the data part may contain only valid Base64 characters.^[7] Note that Base64-encoded data: URIs use the standard Base64 character set (with '+' and '/' as characters 62 and 63) rather than the so-called "URL-safe Base64" character set.

Examples of data URIs showing most of the features are:

data:text/vnd-example+xyz;foo=bar;base64,R0lGODdh

data:text/plain;charset=UTF-8;page=21,the%20data:1234,5678

(outputs: "the data:1234,5678")

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD

data:image/svg+xml;utf8,<svg width='10'... </svg>

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

<img alt="" src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" style="width:36pt;height:36pt" />

<img alt="Red dot" src="data:image/svg+xml;utf8,
<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'>
 <circle style='fill:red' cx='5' cy='5' r='5'/>
</svg>"/>

<link rel="icon" href='data:image/svg+xml;utf8,
<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg">
 <circle style="fill:red" cx="5" cy="5" r="5"/>
</svg>'/>

ul.checklist li.complete {
    padding-left: 20px;
    background: white url('data:image/png;base64,iVB\
ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\
AAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\
yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\
FTkSuQmCC') no-repeat scroll left top;
}

window.open('data:text/html;charset=utf-8,' +
    encodeURIComponent( // Escape for URL formatting
        '<!DOCTYPE html>'+
        '<html lang="en">'+
        '<head><title>Embedded Window</title></head>'+
        '<body><h1>42</h1></body>'+
        '</html>'
    )
);

SVG

Example of an SVG image with embedded JPEG images

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

<svg>
<image width="64" height="24" href="data:image/jpeg;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="/>
</svg>

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 (XSS) 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.^[8] As a result, some browsers now block webpages from navigating to data URIs.^[9]

References