[SOLVED] Why can't I fetch an object URL (aka "blob URL") cross-site and cross-frame?

Why can't I fetch an object URL (aka "blob URL") cross-site and cross-frame?

I'm developing an iframeable component and have now stumbled over something that looks like a security problem.

I have two web sites:

site A, running at http://localhost:3002
site B, running at http://localhost:3000

Site A embeds site B in an IFrame. Site B needs data to work with, which is supposed to be provided by site A. However, right now site B only accepts data via URLs and since the original URL might need authentication, data is fetched by site A, converted to an object URL (with URL.createObjectURL) and then provided to site B via postMessage. Site B is now supposed to fetch the data from that URL and work with it.

However, fetching of the object URL by site B is getting blocked by the browser:

Chrome: Not allowed to load local resource: blob:http://localhost:3002/<UUID>
Firefox: Security Error: Content at http://localhost:3000/... may not load data from blob:http://localhost:3002/<UUID>

These message are, as far as I can see, not connected to either CSP or CORS. However, I can't understand what the problem is and whether it is fixable or not -- I have been under the impression that object URLs do not currently have any cross-site problems, which is exactly why the are being used.

So why does it happen and what can I do about it?

Solution

See https://github.com/w3c/FileAPI/issues/135 and the references therein. There is a same origin restriction in practice, but this isn't reflected in specifications as of yet. It's unlikely we'll remove that restriction as blob: URLs make it easy to create memory leaks. (In fact, we want to place more restrictions on them: https://github.com/w3c/FileAPI/issues/153 .)

If you have a postMessage() API you'll need to extend it whereby you either message a URL or an object. Messaging the Blob instance itself should work.