Search code examples
javascriptwebcorsfetchweb-worker

Fetch from web worker does not send (same) Origin

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.
Solution

  • 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.