Data URI Tutorial

We use URIs to link current file to the external files. If external files are very small then its a waste to load them as a new request. We can embed the external URIs response data as inline to the current document using Data URIs. We can use data URIs wherever we use external URIs.

Format of Data URIs

• mime type: If not specified then defaults to text/plain
• charset: If not specified then defaults to charset=US-ASCII
• If the data is textual, you can simply embed the text. Otherwise, you can specify base64 to embed base64-encoded binary data.

Examples of Using URLs

Here instead of providing a URI to an external image file we are providing image data here itself.

Here instead of providing URI to an another HTML document we are providing the HTML code here itself. Therefore whenever user click on the link, the browser loads the HTML code in that window.

You can also use insert data URIs to the browser address bar. Add this code to the browser address bar to make it a text editor.

Therefore we can use Data URIs anywhere we want. It can be a replacement for URI’s pointing to external resources.

Limitations

Data URI has a length limit. Its length limit depends on browser to browser.

Data URIs are not supported in many old browser. Test your application in all browser before publishing it.

Data URIs are not good if you want to SEO optimize your website. Search engines will not crawl img tags which has Data URI set to its src attribute. Even search engines won’t crawl anchor links with Data URIs.

CSRF Attacks

When we load a HTML page using Data URI, the web browser doesn’t send HTTP referer header. And some website check for CSRF protection only if referer is present therefore it leads to bypass CSRF.
Check this article for more information on it.

Conclusion

Data URIs are very handy for mobile website and for embedding small images directly into the main document. Thanks for reading.