21/03/2023
Most everyone is familiar with the "http" and "https" URLs. Maybe you've heard about "ftp" and "file", too, but few know about the "data" URL. The "data" URL provides a way to include small data items directly into HTML and CSS documents. The idea is that small images, for example, could be included in a document without the browser having to fetch them from the 'net. (I'm using 'URL' here instead of the more technically accurate 'URI' because this is not a technical document and most people are used to 'URL'.)
What does the data URL look like?
The general format of a "data" URL is:
data:[<mediatype>][;base64],<data>
That means the word data and the colon are required, the mediatype and ;base64 are optional and the data is required. Here is a simple example to give you an idea of how something might be encoded:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAA
AC0Ujn1AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAA
DsMAAA7DAcdvqGQAAAEDSURBVEhLtZJBEoMwDAP7lr6nn+0LqUGChsVOwoG
dvTSSNRz6Wh7jxvT7+wn9Y4LZae0e+rXLeBqjh45rBtOYgy4V9KYxlOpqRj
mNiY4+uJBP41gOI5BM40w620AknTVwGgfSWQMK0tnOaRpV6ewCatLZxn8aJ
emsAGXp7JhGLBX1wYlUtE4jkIpnwKGM9xeepG7mwblMpl2/CUbCJ7+6CnQz
Aw5lvD/8DxGIpbMClKWzdjpASTq7gJp0tnGaDlCVzhpQkM52OB3gQDrbQCS
dNSTTAc7kMAL5dIDjjj64UE4HmEh1NaM3HWAIulQwmA4wd+i4ZjwdYDR00G
qWsyPrizLD76QCPOHqP2cAAAAAElFTkSuQmCC
The media type is image/png (it is a png image), and it is base64 encoded. (Base64 is a way of encoding raw data into printable characters.) The image is this little icon:
The data don't have to be base64 encoded, although that is a common use. Here is an example of just some plain text:
data:,Some%20text%20here
In this case, the type is text/plain (the default), and the data is plain text, except that some entities, such as spaces, have to be encoded (%20 is a space). I could have specified a character set so I could include, for example, Greek characters.
data:text/plain;charset=iso-8859-7,%eb%fc%e3%ef%f2
This example (patterned after an example in the data URL RFC), specifies a character set called "Latin/Greek". The %xx sequences are the representations of the Greek characters and need the % symbols to let the browser know they are in hexadecimal (hex). This example refers to the string "logos".
The "data" URL can generally be used where any other URL can be used, except for some restrictions due to security that we will discuss below. Some examples might be:
<img src="data:image/png;base64,iVBORw0..."alt="Green diamond" />orbackground-image: url('data:image/png;base64,iVBORw0...");
orbackground-image: url('data:image/png;base64,iVBORw0...");
Where the ellipses represent the rest of the green diamond image above.
Why might this be used?
The "data" URL could be used to avoid having the browser access the web for a very small image. Since each request takes time, very small images can be included in a page or stylesheet with minimal overhead. This might be especially valuable in the Internet of Things or IoT.
Another possible use is when an HTML file isn't served over the web but viewed locally. A document describing a piece of software or perhaps a help file, for instance. In this case the icons and other small images could be included inline to avoid having to package and distribute multiple files.
A note about security
Scammers and phishers began using the "data" URL maliciously soon after it was added to browsers. This leads browser writers to block it in some cases. Chrome, Edge, and Firefox now all block some uses of it. That's a good step toward protecting users.
Mozilla, for example, blocked the potentially-dangerous use of the "data" URL when the media type is HTML, JavaScript, or SVG (a graphic format that can be manipulated to be dangerous). Those formats are allowed in non-dangerous ways, such as in "img" tags, however.
The "data" URL can be a useful tool for web designers. Hopefully, this brief introduction will prompt designers to use it when it is appropriate.
This piece was originally posted on Sep 11, 2018, and has been refreshed with updated styling.
