Fetch from web worker does not send (same) Origin

Question

I'm trying to create a web worker that stores the access token and handles API calls. The first thing I want to do is a get request from the web worker to get the access token.

The user uses cookies; httpOnly and SameSite are on, secure not yet because I'm running it locally on http. This cookies is where the tokens or identities of the tokens are stored.

I have an endpoint in my api, which I want to address to obtain the access token. I can then address the required resources with this. Token stays in the web worker and is not exposed.

I have a web worker (in base64 string) from that web worker I want to reach the endpoint to get the access token. I do this with fetch. However, when I want to send credentials. The CORS can not be set to '*'. I can specify the url of my website (in this case localhost) as origin in the server.

Within my web worker:

const tryFetch = await fetch(authUrl, {
  credentials: "include",
});

However, it seems that the origin passed to the server is 'null'. Is there a way to fix this or am I trying something wrong?

Access to fetch at 'http://localhost:3000/api/auth' from origin 'null' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

See the answer at https://stackoverflow.com/a/42242802/441757. Not sure what you mean by _“I have a web worker (in base64 string)”_ but I’m guessing that’s what’s causing the browser to set the origin to null. — sideshowbarker, May 02 '22 at 23:44
I was pretty confident there were already an exact dupe but I can't find it anymore... If someone finds it and doesn't have a dupe-hammer, let me know please. — Kaiido, May 03 '22 at 01:24

score 3 · Accepted Answer · answered May 03 '22 at 01:23

data: URLs for Workers are considered opaque origins (specs). This means that the origin of your Worker will be set to null.

To circumvent that if you really need to create your Worker script dynamically (instead of using a static file), then you can use a blob: URL, which will share the origin of the context where the URL has been created.

const content = `
  // your worker script content
`;
const getWorkerURL = () => {
  return URL.createObjectURL(new Blob([content], {type: "text/javascript"}));
};
const worker = new Worker(getWorkerURL());

Live example as a codepen, because StackSnippets iframes are null origined anyway.

However beware that even though the Worker does share the same origin, its baseURI will be different, so you need to special handle relative URLs.

Fetch from web worker does not send (same) Origin

1 Answers1