data: URI Scheme – Part 2

In Part 1, I discussed what the data: URI scheme is all about, its various usage scenarios and available browser support. Let’s see few examples in this post. Just copy and paste the following HTML code into a HTML file and open it any of Firefox, Safari, IE8, Google Chrome or Opera. Since today’s browsers are very forgiving, this bare HTML tag should work without any fuss!


<img src=’data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QByRXhpZgAASUkqAAgAAAAFABoBBQABAAAASgAAABsBBQABAAAAUgAAACgBAwABAAAAAgAAADEBAgAQ
AAAAWgAAAABRBAABAAAAAAAAAAAAAABgAAAAAQAAAGAAAAABAAAAUGFpbnQuTkVUIHYzLjM2AP/bAEMAEAsMDgwKEA4NDhIREBMYKBoYFhYYMSMlHSg6Mz08OTM4N0BIXE5ARFdFNzhQ
bVFXX2JnaGc+TXF5cGR4XGVnY//bAEMBERISGBUYLxoaL2NCOEJjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY//AABEIAC4AQQMBIgACEQED
EQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygp
KjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy 8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXx
FxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl
5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AGnFRx8k049KbF3NcB6BbgGag1K/WxTAAaRvuj+tWLbqawNZBfU3iHzO20KPwqqcVKWpE5OK0Kt1qN1dALJIfLU52jjJqDzPmyOK6YeH
Y4bL52Lykc+xrl7hRbysj8FTjFdatsjnkmtWbuka6d6wXR+UnAf0+tdUBla8ziPz5HTNeh6VJ52mwsTk7cH8OK5a8EtUb05t6MsYop2Peiue5qc+/ApsNPK5FRx/K5FasRdt/vVC9usN
9JfmIO21Rgn7p/xxip7f7wrSQ2+yXdjb97n1q6RM0ZUetpPI0MkJVl4JB4FZWqtp05ZX4k9QK3IfsS75SI0JyULd/esOazs7q5fDDLHduHINb6GbTtYyHs2jVWt281GOPcGu60m1Nnp8
ULHLYy31PWsBLGKONo0+bOO/bvXTWilLeJT1CgVjXeiKpxtqS7aKfiiuQ1OeIxVcf6w1ZIqhcXCWxLOGI9q3tcTdjUtzUkw3xNGRw3Fc1LrswG2BAnueTVvQJ57y8mE0ztiEsMngHcvb
8a1hRktTKVWOxoXo2WojmkDY+6WAGP0rCcsgzuREB+XaMEmtXUNV2IUeMErxkVjoTqFyqDCA881srsmUkjV0RBPuZ2JwRxmunj6CvO0vpbO+eS3JUK2MHoQOOa6bS/Ei3U0cMtuUZztD
KcjNYVqctyqdRPQ6SijFFchsf//Z’ alt=’data: URI for images’ />

If your browser supports data: protocol, the above puzzling lines should show a small picture (actually, the CEO of my company). OK, here is his name!


<!– IE8 won’t render this as it supports data: for image type OBJECT only –>
<object type=”text/html” data=”data:text/html,%3C%73%70%61%6E%20%73%74%79%6C%65%3D%27%63%6F%6C%6F%72%3A%67%72%65%65%6E%3B%66%6F%6E%74%2D%77
    %65%69%67%68%74%3A%62%6F%6C%64%3B%27%3E%46%72%61%6E%63%3C%2F%73%70%61%6E%3E%69%73%63%6F%20%44%27%53%6F%75%7A%61″
    height=”40px”>
    You are probably running IE!
</object>

Note that I am not using Base64 encoding for the actual HTML markup data; rather I use URL escaping, the default data representation mechanism of the protocol, for the HTML bytes. As commented above, IE8 currently does not support data: protocol for HTML object contents, but others do. Stretching a bit more, the following example shows how CSS can be sourced from a data: URI.


<html>
<head>
    <title>The data: URI Scheme</title>
    <meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> <!– For IE8 only –>
    <link rel=”Stylesheet” href=”data:text/css;base64,LmNzc0RhdGFEZW1vIHtmb250LWZhbWlseTpCcnVzaCBTY3JpcHQgTVQ7IGZvbnQtc2l6ZTozMHB4OyBib3JkZXI6ZG90dGVkIDNweCBibHVlO30=” />
</head>
<body>
    <span class=”cssDataDemo”>Using style class from CSS embedded using data: protocol.</span>
</body>
</html>

The <meta> tag is required only for IE8. Other browsers don’s use it as they allow data: for CSS content also.


Here is a bit interesting one!


<html>
<head>
    <title>The data: URI Scheme</title>
    <script type=”text/javascript” src=”data:text/javascript;base64,ZnVuY3Rpb24gc2hvd1RpbWUoKSB7YWxlcnQgKG5ldyBEYXRlKCkpO30gZnVuY3Rpb24gdXNlRGF0YVVyaSgpIHthbGVydChjb25maXJtICgnV291bGQgeW91IGNvbnNpZGVyIGRhdGE6IFVSSSBzY2hlbWVzIGluIGZ1dHVyZSBwcm9qZWN0cz8nKSk7fSBmdW5jdGlvbiBzaG93QXBwVmVyc2lvbigpIHthbGVydCAobmF2aWdhdG9yLmFwcFZlcnNpb24pO30=”></script>
</head>
<body>
    <!– Embedded JS –>     <span>JavaScript embedded using data: URI scheme. Don’t try this on IE8…</span>
    <br />
    <form action=”dummy.cgi”>
    <input type=”button” onclick=”showTime();” value=”Show Date & Time” />&nbsp;&nbsp;
    <input type=”button” onclick=”useDataUri();” value=”Your Choice!” />&nbsp;&nbsp;
    <input type=”button” onclick=”showAppVersion();” value=”Browser Version” />
    </form>
</body>
</html>

Each button calls different JavaScript functions, all sourced from a base64-encoded script (you can decode it using an online base64 decoder or do Console.WriteLine (System.Text.Encoding.ASCII.GetString (System.Convert.FromBase64String (base64_encoded_data))), if you want to see the actual JavaScript code).


I hope now you’ve got a better understanding of data: and its several usage scenarios. But just keep in mind that overusing or using it in inappropriate contexts might negatively impact the web application performance.


UPDATE: Looks like the HTML markup code went haywire (likely due to Word 2007 which I use for blog posting) and a portion of the HTML got clipped off; fixed it and everything is fine now (in a scrollable view).