← flaviocopes.com

What are Data URLs

Published Apr 07 2018

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

• Introduction
• How does a Data URL look
• Browser support
• Security

Introduction

A Data URL is a URI scheme that provides a way to inline data in an HTML document.

Say you want to embed a small image. You could go the usual way, upload it to a folder and use the img tag to make the browser reference it from the network:

<img src="image.png" />

or you can encode it in a special format, called Data URL, which makes it possible to embed the image directly in the HTML document, so the browser does not have to make a separate request to get it.

Data URLs might save some time for small files, but for bigger files there are downsides in the increased HTML file size, and they are especially a problem if the image reloads on all your pages, as you can’t take advantage of the browser caching capabilities.

Also, an image encoded as Data URL is generally a bit bigger than the same image in binary format.

They aren’t much practical if your images are frequently edited, since every time the image is changed, it must be encoded again.

That said, they have their place on the Web Platform.

How does a Data URL look

A Data URL is a string that starts with data: followed by the MIME type format. For example a PNG image has mime type image/png.

This is followed by a comma and then by the actual data.

Text is usually transferred in plain text, while binary data is usually base64 encoded.

Here is an example of how such Data URL will look like:

<img src="data:image/png,%89PNG%0D%0A..." />

And here is a small version of the banner image of this article encoded in a link

Here is how a base64 encoded Data URL looks like. Notice it starts with data:image/png;base64:

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

And here is a small version of the banner image of this article base64 encoded in a link.

This site has a very nice Data URL generator: https://dopiaza.org/tools/datauri/index.php which you can use to transform any image sitting in your desktop to a Data URL.

Data URLs can be used anywhere a URL can be used, as you saw you can use it for links, but it’s also common to use them in CSS:

.main {
    background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}

Browser support

They are supported in all modern browsers.

Security

Data URLs can encode any kind of information, not just images, and so they come with their set of security implications.

From Wikipedia:

The data URI can be utilized to construct attack pages that attempt to obtain usernames and passwords from unsuspecting web users. It can also be used to get around cross-site scripting (XSS) restrictions, embedding the attack payload fully inside the address bar, and hosted via URL shortening services rather than needing a full website that is controlled by a third party.

Check this article from the Mozilla Firefox Blog for more information on how Data URLs can be used by malicious users to do bad things, and how the Firefox browser mitigates such risks.

Data URLs are defined in RFC 2397.

I write books for developers 👇🏼