QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Data URI Tutorial

Data URI Tutorial

data-attributes

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

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  • 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.

data:text/html, <html style='background-color: grey' contenteditable>

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.

May 11, 2014Narayan Prusty
Changing CSS Style using JavaScriptImage Slider Using HTML And CSS Only

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Format of Data URIs
  • Examples of Using URLs
  • Limitations
Related Articles
  • Understanding HTML img tag
  • Image Slider Using HTML And CSS Only
  • HTML Script Tag Tutorial with Examples
  • Passing Arguments To JavaScript Files
  • Javascript Create File Object From URL
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license