Data URI scheme

From Wikipedia, the free encyclopedia
Jump to: navigation, search

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] Data URIs are sometimes referred to incorrectly as "data URLs".[citation needed] As of 2015, data URIs are fully supported by most major browsers, and partially supported in Internet Explorer and Microsoft Edge.[2]


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

 data:[<media type>][;base64],<data>
  • The scheme, data. It is followed by a colon (:).
  • An optional media type. If one is not specified, the media type of the data URI is assumed to be text/plain. It can contain an optional character set parameter, separated from the preceding part by a semicolon (;) . A character set parameter comprises the label charset, an equals sign (=), and a value from the IANA list of official character set names.[4] If this parameter is not present, the character set of the content is assumed to be US-ASCII (ASCII).
  • The 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. Data URIs encoded in Base64 may contain whitespace for human readability.
  • The data, separated from the preceding part by a comma (,). The data is a sequence of octets represented as characters. Permitted characters within a data URI are the ASCII characters for the lowercase and uppercase letters of the modern English alphabet, and the Arabic numerals. Octets represented by any other character must be percent-encoded, as in %26 for an ampersand (&).[5]



An HTML fragment embedding a picture of a small red dot: Red-dot-5px.png

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />


A Cascading Style Sheets (CSS) rule that includes a background image:

ul.checklist li.complete {
    padding-left: 20px;
    background:white  url('data:image/png;base64,iVBORw0KGgoAA\
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
<!-- Backslashes at end of line - to continue character string
     at new line. -->


A JavaScript statement that opens an embedded subwindow, as for a footnote link:'data:text/html;charset=utf-8,' +
    encodeURIComponent( // Escape for URL formatting
        '<!DOCTYPE html>'+
        '<html lang="en">'+
        '<head><title>Embedded Window</title></head>'+

Malware and phishing[edit]

The data URI can be utilized by criminals to construct attack pages that attempt to obtain usernames and passwords from unsuspecting web users. It can also be used to get around site cross-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 owned by the criminal. [6]


  1. ^ "Using Data URIs to Speed Up Your Website". Treehouse Blog. 27 March 2014. 
  2. ^ Deveria, Alexis (July 2015). "Can I use...". Retrieved 31 August 2015. 
  3. ^ Masinter, L (August 1998). "RFC 2397 - The "data" URL scheme". Internet Engineering Task Force. Retrieved 2008-08-12. 
  4. ^ Freed, Ned; Dürst, Martin, eds. (20 December 2013). "Character Sets". Internet Assigned Numbers Authority. Retrieved 31 August 2015. 
  5. ^ Berners-Lee, Tim; Fielding, Roy; Masinter, Larry (January 2005). "Uniform Resource Identifiers (URI): Generic Syntax". Internet Engineering Task Force. Retrieved 31 August 2015. 
  6. ^ Phishing without a webpage – researcher reveals how a link itself can be malicious, Naked Security by Sophos, 31 AUG 2012