Data URI (GO)

The data URL was presented as early as 1995, when a number of versions of the data URL Schema definition appeared in the VRML , and shortly thereafter, one of the versions was put on the motion-making it an embedded resource placed in the HTML language. From the time of finalization of the RFC document (1998), it was a very popular invention.

The content defined by Data URIs can be inserted into other documents as small files. The URI is uniform resource identifier the abbreviation that defines the protocol that accepts the content and the accompanying content, and if the accompanying content is an address, the URI at this point is also a URL ( uniform resource locator ), such as:

ftp://10.1.1.10/path/to/filename.exthttp://example.com/source/id   

After the protocol, you can tell the client an exact download resource address, and the URI does not necessarily contain an address information, such as (demo):

data:image/gif;base64,r0lgodlheaaoalmaaoaztoehh0tls/7lzv/0jvb29t/f3//ub//ge8wslf/rhf/3kdbw1mxsbp//mf/// Yh5baaaaaaalaaaaaaqaa4aaare8l1ekyky67qz1hlnjm5uude0ecwljoexkcppv0accgcmtiheiueqjgaorcmxic6e0ccguww6afjsvmkkir7g77zkpjjpzq Iyd7sjagvgoegv2xsbxqngypj/gawxeqa7

The protocol is data and tells the client to parse the content as a image/gif format, using base64 encoding for the content to parse. It contains content directly but does not have a definite resource address.

? Format

The format of the Data URI is simple, as follows:

Data:[<mime type>][;charset=<charset>][;base64],<encoded data>

• The first part is the data: protocol header, which identifies the content as a data URI resource.

• The second part is the MIME type, which indicates how this string of content is presented, such as: it is displayed as a text/plain text type, image/jpeg shown as a JPEG image, and the client parses the data with this MIME type.

• The third part is the encoding settings, the default encoding is that the charset=US-ASCII data part of each character is automatically encoded as %xx , about the encoding of the test, you can enter the browser address box to enter the following two string of content, to see the effect:

  output:ä½å¥½-> Use the default encoding display, so garbled data:text/html, hello  /      /////

• Part IV is the Base64 encoding setting, which is an optional, base64 encoding that contains only 0-9,a-z,a-z,+,/,=, where = is used to encode the filler.

• The last part is the content hosted by this Data URI, which can be written in plain text or base64 encoded content.

Many times we use the data URI to render something longer, such as a string of binary data encodings, images, and so on, with Base64 encoding to make the content shorter. For the picture, after gzip compression, the Base64 picture is actually larger than the original gzip compression, the volume increase is about one-third, so the use of the time need to weigh.

? Compatibility

Due to the early emergence of the current mainstream browsers basically support the data URI:

• Firefox
• Opera 7.2+
• Chrome (all editions)
• Safari (all editions)
• Internet Explorer 8+

However, some browsers have restrictions on the use of the data URI:

• Length limit, long length, in some applications can cause memory overflow, program crashes

  4100,768 characters (32KB), IE9 remove this limit after 

• Under IE, the data URI is only allowed to be used in the following places:

  • Object (images only)
  • IMG, input type=image, link
  • Where URL declarations are allowed in CSS, such as background
• Under IE, the contents of the Data URI must be encoded and converted, such as "#", "%", non-us-ascii characters, multibyte characters, etc., which must be encoded

? The solution to the low version of IE-MHTML

MHTML is the MIME HTML, the abbreviation for "Multipurpose Internet Mail Extensions hypertext Markup Language", which is like a message with an attachment, as shown below:

/** filepath:http://example.com/test.css *//*[email protected]content-type:multipart/ Related; boundary= "_any_separator"--_any_separatorcontent-location:myidbackgroundcontent-transfer-encoding: base64ivborw0kggoaaaansuheugaaaauaaaafcayaaacnbyblaaaaheleqvqi12p4//8/ W38giaxdibke0dhxgljnbaao9txl0y4ohwaaaabjru5erkjggg==--_any_separator--*/.myid { Background-image: URL (" Data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnbyblaaaaheleqvqi12p4//8/ w38giaxdibke0dhxgljnbaao9txl0y4ohwaaaabjru5erkjggg== "); *background-image: URL (mhtml:http://example.com/test.css!myidbackground);   

myidBackgroundbase64myidUse it in CSS. Here are a few things to note:

• _ANY_SEPARATORcan be any Content
• You need to add a terminator at the end of the attachment _ANY_SEPARATOR , otherwise there will be an error in Vista and Win7 IE7.
• Attachment code take care not to get killed by the compression tool.

There is a pit: IE8 in the partial system compatibility mode also knows the hack symbol in CSS * , but it is not supported mhtml , so the above content will not take effect. The process estimate is only annotated with the conditions of IE.

? Security Tips under HTTPS

HTTPS opens the page, when using data URIs under IE6, 7, you will see the following reminder:

The explanation of MS is:

The site you are viewing is a secure website. It uses security protocols such as SSL (Secure Sockets Layer) or PCT (confidential communications technology) to ensure the security of the information you send and receive. When a site uses a security protocol, the information you provide, such as your name or credit card number, is encrypted and cannot be read by others. However, this page also contains items that are not using the security protocol .

Obviously, IE sniffed "items that are not using security protocols."

When the browser resolves to a URI, it will first judge the protocol header, and if it http(s) starts, it will establish a network link download resource, and if it finds the protocol header, it will data: parse it as a Data URI resource.

But from the waterfall stream of chrome, we can make such guesses:

Each Data URI in the diagram initiates a request, although the state is data(from cache) , after disabling the cache, still. So it can be concluded that the browser in the download source parsing into the DOM, the data URI will be parsed out of the resources, and cached locally, the last data URI each corresponding location will initiate a request, but this request has not established a link, was found in the cache browser to shoot dead.

? Safety Valves

The data URI has many security restrictions under IE, and in fact, many XSS injections can also use the data URI to bypass the browser's filtering, using the source of the data URI as a portal.

Bypass browser filtering http://example.com/text.php?t= "><src=" Data:text/html,<script>alert ("Xss") </script><!--     

Here can be a large degree of divergence, very interesting, worthy of readers to delve into.

? Extended Reading

• RFC 2397 RFC Documentation
• Mdn-data_uris MDN Documentation
• Msdn-data protocal MSDN Documentation
• nc-data_uris_explained
• Phpied-mhtml

Http://www.cnblogs.com/hustskyking/p/data-uri.html

Data URI (GO)