19

I ran into an interesting problem while creating a hosted API that relies on web workers. I was hoping to get a little community feedback on it.

My server is set up with the appropriate CORS headers to deliver the worker JS files and can be retrieved with an XMLHttpRequest object. However, when the URL is given to new Worker() it fails to build, citing the origin being the problem. This seems to be an issue on both Firefox and Chrome. Check it out for yourself, and my workaround, here: http://jsfiddle.net/5ag42hb1/11/

Is this not odd behaviour? Mozilla docs say that Web Workers must obey same-origin policy and to use CORS to allow cross-origin access.

The fiddle has a workaround of storing the file in a blob and passing that to the worker instead. It seems less than ideal though, introducing a lot of unnecessary complexity. Can anyone think of a cleaner solution? Is there a good channel to get this implemented properly?

JScott
  • 451
  • 1
  • 3
  • 9
  • So what's meant to happen in your fiddle? I get 2 successful messages. – spender Aug 23 '14 at 03:16
  • 3 successful messages. It gets it just fine by AJAX, and if you pass it in as a blob it works, but if you pass the URL to the worker then it seems to ignore CORS and fail. I wanted a separate fiddle for the workaround but I don't have enough reputation so I crammed it all into one. – JScott Aug 24 '14 at 06:30

2 Answers2

16

I did a lot of digging and asked around on IRC channels. I got some pretty good answers thanks to the guys in #developers on the Mozilla network. Hopefully this will help anyone in the same situation as me.

To sum it up, the HTML spec outlines that running new Worker('http://remoteorigin.com/worker.js') should execute the worker with the remote origin's security context. Something that's like CORS but not quite because it's execution rights instead of reading rights.

So why isn't that how it works right now? Because browsers haven't implemented the full spec yet. Chalk it up as something to look forward to.

Until then, there are actually 2 workarounds. I outlined the blob method above but we also can use importScripts(). If you can't modify the Worker itself, you could probably make a shell Worker that simply implements the Worker you actually want.

JScott
  • 451
  • 1
  • 3
  • 9
  • 2
    Looks like in 2022 the situation hasn't changed much. Unfortunately, the blob solution cannot be used in environments where the Content Security Policy is strict. I didn't get the second solution with the importScripts. Can you share an example? – Petar D. Feb 21 '22 at 11:31
1

I encountered similar problem and partially fixed it with data: URLs: https://www.npmjs.com/package/crossoriginworker

For some solutions that will be good enough, but when we are going to use some more advanced APIs like BarcodeDetector - things are getting harder.

Cezary Daniel Nowak
  • 1,096
  • 13
  • 21