Cross-origin Web Workers

[gburlet]

Your environment

• Version used: dev branch
• Platform used: JavaScript
• Rendering engine used: SVG
• Browser Name and Version: Firefox 71.0 (64-bit)
• Operating System and version (desktop or mobile): desktop mac os x Mojave

Expected Results

Render the score and setup AlphaSynth player using workers loading cross-origin script. This is a fairly common production setting, where assets are stored on a 3rd party cloud storage system (Amazon S3), and the client origin (domain running on a server instance: e.g., Amazon EC2) is instantiating the worker.

Observed Results

Chrome, Opera, and Safari seem to all currently allow cross-origin worker scripts and do not fail the underlying GET request in this._synth = new Worker(alphaSynthScriptFile); in AlphaSynthWebWorkerApi or this._worker = new Worker(settings.scriptFile); in AlphaTabWorkerScoreRenderer. However, Firefox allows the worker to be setup without an exception but fails the cross-origin get request.

This is not a CORS issue. Even if the script file is setup properly in CORS this worker will fail the GET request. Unfortunately, it fails asynchronously and therefore it never falls through to the backup method of kicking off a Worker using importScripts and Blobs.

Reading material:

• https://bugzilla.mozilla.org/show_bug.cgi?id=1241888
• https://gist.github.com/willywongi/5780151

Steps to Reproduce (for bugs)

1. Import the JS file in HTML from some 3rd party cloud storage with domain different than website domain serving user
   <script language="JavaScript" type="text/javascript" src="https://someotherdomain/AlphaTab.min.js">

2. Ensure web workers enabled in AlphaTab settings useWorker: True. As far as I can see, AlphaSynth player always uses a web worker and can't be toggled to be synchronous, probably for the better.

3. try to load on Firefox and nothing with render. It will also annoyingly fail without many leads to go on. This took me about 4-6 hours to figure out where the error was coming from.

Possible Solution

All browsers seem to work properly with the importScripts method of starting a worker rather than the new Worker(scriptURL) method, even with cross-origin script URLs so I've just changed the precedence for it to work properly across all browsers in our min.js script.

[Danielku15]

I really start to hate all CORS related topics in browsers. Not sure who specified all these features but they are so terribly inconsistent across browsers and all the features that it hurts.

But back to topic: I will need to check in detail about how new Worker(), importScripts etc undergo CORS restrictions and what browsers might behave different.
I remember already reworking the worker creation so many times and still bugs are popping up.