0

Why does fetch() work on Data URIs?

A while ago, when I was learning how to use XMLHttpRequest and fetch, I saw absolutely no documentation that stated these methods could be used on anything but HTTP requests. I have tried this on both Firefox and Chrome and yielded the same result. Try for yourself.

(async function() {
  let dataURI = 'data:text/plain,' + encodeURIComponent('Why does this work?'),
  fetchResponse = await fetch(dataURI),
  fetchBlob = await fetchResponse.blob();
  console.log(URL.createObjectURL(fetchBlob));
})()

This below ends up simplifying Data URI to blob conversion rather than doing something like this question:

await(await fetch('data:text/plain,42').blob()
quicVO
  • 778
  • 4
  • 13
  • 2
    They work on *all* schemes that the browser supports, including `file`, `data` and `blob`. – Bergi Mar 10 '21 at 22:00
  • Oh cool. Thanks for letting me know :) – quicVO Mar 10 '21 at 22:01
  • @Bergi not *all*, no. `ftp:` `tel:` `mailto:` etc.for instance are not allowed, `about:` can only be the unique URI `about:blank`, and this not to mention that [you can register your own custom schemes](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler). – Kaiido Mar 10 '21 at 23:03
  • @Kaiido ftp, telephone and email are not supported by a *web* browser, and the latter two don't even address content. I'm also not counting `chrome://` schemes and similar internals, or anything that's referred to the OS to open. But files the browser can open can in general be fetched, and that translates to new protocols like `ipfs` (e.g. [in Brave](https://github.com/brave/brave-core/pull/7068)). – Bergi Mar 10 '21 at 23:13
  • @Bergi doesn't your browser have an ftp client integrated? What browser are you using? Doesn't it have an rss reader? Doesn't it correctly open your mail manager when you click a mailto link? All these are schemes supported by the web browser. Schemes like ipfs or onion are still not part of the specs, so while some browsers may deviate from the specs to support fetching these, that doesn't change that only a very limited set of schemes are allowed. – Kaiido Mar 10 '21 at 23:37
  • @Kaiido FTP [could in theory work](https://stackoverflow.com/a/15100922/1048572) but is problematic since it's not a stateless protocol, and no browser vendor has implemented it yet (also the SOP would have some say in that). RSS can be fetched since it uses http (I assume you didn't mean [`feed://`](https://en.wikipedia.org/wiki/Feed_URI_scheme)). Mail is a completely different animal - opening my mail manager is handled by my operating system, not my browser. But you're right, the spec details precisely what is implemented in current browsers, which don't allow anything but the listed ones. – Bergi Mar 11 '21 at 02:26

1 Answers1

1

The fetch algorithm allows requests made to about:blank, blob: if the request method is GET, data:, file:, and http[s]:. source

Since XMLHTTPRequest performs same-origin requests it even has further limitations, irrelevant for data:, but that I describe in this answer.

So fetching a data: URI is perfectly valid, and it's even a common way of converting such an URI to a Blob.

Kaiido
  • 123,334
  • 13
  • 219
  • 285