[feature request] Cross domain blob building fallback

I tried to publish 3rd party script with webpack and worker-plugin.

https://cdn.example.com/main.js <- entry
https://cdn.example.com/sub.js <- chunk
https://cdn.example.com/0.worker.js <- worker

I set output.publicPath to “https://cdn.example.com/” in this case;

But I can not exec worker because of cross domain restriction.

> new Worker("http://localhost:8080/0.worker.js")
VM84:1 Uncaught DOMException: Failed to construct 'Worker': Script at 'http://localhost:8080/0.worker.js' cannot be accessed from origin 'https://www.google.com'.

I know this fallback works to avoid it.

// ASSET_HOST="https://cdn.example.com/" webpack --mode production
if (process.env.ASSET_HOST === location.protocol + "//" + location.host) {
    return new Worker(process.env.ASSET_HOST + "0.worker.js")
} else {
    const code = await fetch(process.env.ASSET_HOST + "0.worker.js").then(res =>
      res.text()
    );
    // console.log(t);
    const blob = new Blob([code], { type: "text/javascript" });
    const url = URL.createObjectURL(blob);
    return worker = new Worker(url);
}

but publisher need to add CORS header to fetch. (Most CDN have CORS header)

I will fork and try it at first in my hand.

[developit]

Note for folks finding this: this is a proposal, inline doesn’t yet exist

This isn’t because of CORS, but rather because sites like google.com tend to disallow all subresources using something like a Content Security Policy. The issue with CSP is that most configurations you find in the wild also block Blob and Data URL sources, so none of these solutions would work.

CSP issues aside, I wonder if your use-case an inline Blob would work? It would be easy to add an option for this in worker-plugin. It would look something like this:

input: (your source code)

const w = new Worker('./my-worker.js', {
  type: 'module',
  inline: true  // <-- special property observed by the plugin
})

compiled output:

var w = new Worker(URL.createObjectURL(
    new Blob(["onmessage=e=>postMessage('pong')"])
));
            // ^ bundled worker code compiled into main JS as a string

[maksnester]

I didn’t make it work from the first time, so just wanted to clarify that it’s not necessary to add that script directly to HTML. It’s a hack where you just replace native Worker with your own implementation (with importScript that won’t suffer from CORS). So it’s ok to just have that in your code:

const _Worker = window.Worker;
window.Worker = function (url, opts) {
  const blob = new Blob(["importScripts(" + JSON.stringify(url) + ")"], {
    type: "text/javascript"
  });
  return new _Worker(URL.createObjectURL(blob), opts);
}
// worker-plugin magic still works, 
// but now you can use CORS, you can specify webpack's publicPath pointing to CDN
new Worker("./my-worker.js", {
  type: "module"
});
window.Worker = _Worker // put it back to not break any other worker usage