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 contents in a single HTML file for page saving.[2][3] As of 2022[update], data URIs are fully supported by most major browsers, and partially supported in Internet Explorer.[4]
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 extensionbase64, 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")
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:
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 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 (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.
In this example, the \ + <linefeed> 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('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>'));
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
^"Using Data URIs to Speed Up Your Website". Treehouse Blog. 27 March 2014.
^"SingleFile - Chrome Web Store". Chrome Web Store. Retrieved 25 August 2018.
^"SingleFile – Add-ons for Firefox". Firefox Add-ons. Retrieved 25 August 2018.
^Deveria, Alexis (July 2015). "Can I use..." Retrieved 31 August 2015.
^"Data URLs - HTTP | MDN". MDN Web Docs. Mozilla. Retrieved 11 May 2018.
February 07, 2023
data, scheme, uniform, resource, identifier, scheme, that, provides, include, data, line, pages, they, were, external, resources, form, file, literal, here, document, this, technique, allows, normally, separate, elements, such, images, style, sheets, fetched, . 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 contents in a single HTML file for page saving 2 3 As of 2022 update data URIs are fully supported by most major browsers and partially supported in Internet Explorer 4 Contents 1 Syntax 2 Examples of use 2 1 HTML 2 2 CSS 2 3 JavaScript 2 4 SVG 3 Malware and phishing 4 ReferencesSyntax EditThe 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 lt media type gt base64 lt data gt 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 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 EditHTML Edit An HTML fragment embedding a picture of a small red dot lt img src data image png base64 iVBORw0KGgoAAA ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 8 w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU 5ErkJggg alt Red dot gt 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 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 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 CSS Edit A Cascading Style Sheets CSS rule that includes a background image ul checklist li complete padding left 20 px 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 In this example the lt linefeed gt 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 Edit A JavaScript statement that opens an embedded subwindow as for a footnote link window open data text html charset utf 8 encodeURIComponent Escape for URL formatting lt DOCTYPE html gt lt html lang en gt lt head gt lt title gt Embedded Window lt title gt lt head gt lt body gt lt h1 gt 42 lt h1 gt lt body gt lt html gt SVG Edit Example of an SVG image with embedded JPEG images A Scalable Vector Graphic image containing an embedded JPEG image encoded in Base64 lt svg gt lt 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 gt lt svg gt Malware and phishing EditThe 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 Edit Using Data URIs to Speed Up Your Website Treehouse Blog 27 March 2014 SingleFile Chrome Web Store Chrome Web Store Retrieved 25 August 2018 SingleFile Add ons for Firefox Firefox Add ons Retrieved 25 August 2018 Deveria Alexis July 2015 Can I use Retrieved 31 August 2015 Masinter L August 1998 RFC 2397 The data URL scheme Internet Engineering Task Force Retrieved 2008 08 12 Freed Ned Durst Martin eds 20 December 2013 Character Sets Internet Assigned Numbers Authority Retrieved 31 August 2015 Berners Lee Tim Fielding Roy Masinter Larry January 2005 Uniform Resource Identifiers URI Generic Syntax Internet Engineering Task Force Retrieved 31 August 2015 Phishing without a webpage researcher reveals how a link itself can be malicious Naked Security by Sophos 31 AUG 2012 https nakedsecurity sophos com 2012 08 31 phishing without a webpage researcher reveals how a link itself can be malicious Data URLs HTTP MDN MDN Web Docs Mozilla Retrieved 11 May 2018 Retrieved from https en wikipedia org w index php title Data URI scheme amp oldid 1119450010, wikipedia, wiki, book, books, library,
