从web worker取回没有发送(相同的)Origin

Question

我正在尝试创建一个存储访问令牌并处理API调用的web工作者。我想做的第一件事是从web worker获取请求以获取访问令牌。

用户使用cookie;httpOnly和SameSite是安全的，还没有，因为我在本地运行它的http。这个cookie是存储令牌或令牌标识的地方。

我的api中有一个端点，我想对它进行寻址以获得访问令牌。然后我就可以用它来处理所需的资源。令牌留在web worker中，不被暴露。

我有一个web工作者(在base64字符串)从该web工作者我想到达端点获得访问令牌。我用取回来做这个。但是，当我想发送证书时。CORS不能设置为"*"。我可以在服务器中指定我的网站的url(在本例中为localhost)作为origin。

Within my web worker:

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

然而，似乎传递给服务器的原点是'null'。有办法解决这个问题，还是我尝试错了什么?

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.

Answer 1

worker的data:url被认为是不透明的来源(spec)。这意味着你的Worker的原点将被设置为null。

如果你真的需要动态创建你的Worker脚本(而不是使用静态文件)，那么你可以使用blob:URL，它将共享创建URL的上下文的起源。

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

作为一个代码依赖的实例，因为StackSnippets iframes无论如何都是空的。

但是要注意，即使Worker共享相同的源，它的baseURI也会不同，所以你需要特别处理相对url。