Thedata URI scheme is auniform resource identifier (URI) scheme that provides a way to include data in-line inWeb pages as if they were external resources. It is a form of file literal orhere document. This technique allows normally separate elements such as images and style sheets to be fetched in a singleHypertext 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 2024[update], data URIs are fully supported by all major browsers.[4]
The syntax of data URIs is defined inRequest for Comments (RFC) 2397, published in August 1998,[5] and follows theURI scheme syntax. A data URI consists of:
data:content/type;base64,
data. It is followed by a colon (:).attribute=value, separated by semicolons (;) . A common media type parameter ischarset, specifying the character set of the media type, where the value is from the IANA list ofcharacter set names.[6] If one is not specified, themedia type of the data URI is assumed to betext/plain;charset=US-ASCII.base64, separated from the preceding part by a semicolon. When present, this indicates that the data content of the URI isbinary data, encoded inASCII format using theBase64 scheme forbinary-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 supportsHTTP compression or embedded files are smaller than 1KB.,). The data is a sequence of zero or moreoctets 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 bepercent-encoded. If the data is Base64-encoded, then the data part may contain only valid Base64 characters.[7] Note that Base64-encodeddata: 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 isdata:,, consisting of thescheme, no media-type, and zero-length data.
Thus, within the overall URI syntax, a data URI consists of ascheme and apath, with noauthority part,query string, orfragment. The optionalmedia type, the optionalbase64 indicator, and the data are all parts of theURI path.
AnHTML fragment embedding abase64 encodedPNG picture of a small red dot:
<imgalt=""src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="style="width:36pt;height:36pt"/>
In this example, the lines are broken for formatting purposes. In actual URIs,including data URIs, control characters (ASCII 0 to 31, and 127) and spaces (ASCII 32) are "excluded characters". This means thatwhitespace characters are not permitted in data URIs. However, in the context of HTML 4 and HTML 5, linefeeds within an element attribute value (such as the "src" above) are ignored[citation needed]. 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.
AnHTML fragment embedding autf8 encodedSVG picture of a small red dot:
<imgalt="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>"/>
In this example, the image data is encoded with utf8 and hence the image data can broken into multiple lines for easy reading. Single quote has to be used in the SVG data as double quote is used for encapsulating the image source.
Afavicon can also be made with utf8 encoding and SVG data which has to appear in the 'head' section of the HTML:
<linkrel="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>'/>
ACascading Style Sheets (CSS) rule that includes a background image:
ul.checklistli.complete{padding-left:20px;background:whiteurl('data:image/png;base64,iVB\ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\AAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\FTkSuQmCC')no-repeatscrolllefttop;}
In this example, the\ + <linefeed> line terminatorsare 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.
AJavaScript statement that opens an embedded subwindow, as for a footnote link:
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>'));
AScalable Vector Graphic image containing an embedded JPEG image encoded in Base64:
<svg><imagewidth="64"height="24"href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kfr6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////////////////////////////////////////////////////////////////wAARCAAYAEADAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIRAAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYyJLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k="/></svg>
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 aroundcross-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]