Why can I fetch this Cross origin file but I can't create a Worker from it?

Question

The file in question is this one: http://web-reports-static.s3.us-east-2.amazonaws.com/_next/e02d25753c0f34f5e22c.worker.js

The file is hosted from an s3 bucket that allows any domain to get the file. I also setup the following CORS policy:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

You can try it in the console of any website (open dev tools here on stackoverflow for example).

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:;
      console.log(xhttp.responseText)
    }
};
xhttp.open("GET", "http://web-reports-static.s3.us-east-2.amazonaws.com/_next/e02d25753c0f34f5e22c.worker.js", true)
xhttp.send()

However using it directly to construct a Worker results in an error:

> new Worker("http://web-reports-static.s3.us-east-2.amazonaws.com/_next/e02d25753c0f34f5e22c.worker.js")

VM1925:1 Uncaught DOMException: Failed to construct 'Worker': Script at 'http://web-reports-static.s3.us-east-2.amazonaws.com/_next/e02d25753c0f34f5e22c.worker.js' cannot be accessed from origin 'https://stackoverflow.com'.
    at <anonymous>:1:1
(anonymous) @ VM1925:1

The HTML spec requires fetching of a `new Worker(url)` URL to fail if the URL isn’t same-origin with the document it’s called from. The spec text which requires that is in https://html.spec.whatwg.org/multipage/#fetch-a-classic-worker-script, where is says the request mode is `same-origin`. For a request made in `same-origin` mode to a non-same-origin URL, browsers are required to throw. But if you first create a Blob with `importScripts(…)` and that same URL, create a blob URL from that, and call `new Worker(…)` with that blob URL, it’ll work. See https://stackoverflow.com/a/60252783/441757 — sideshowbarker, Mar 20 '20 at 07:52

score -1 · Answer 1 · answered Mar 20 '20 at 14:06

Remembered that the Content Security Policy controls which sources can be loaded by various browser mechanisms. In particular I needed to wildcard the worker-src directive: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src

Why can I fetch this Cross origin file but I can't create a Worker from it?

1 Answers1