SharedArrayBuffer, Github pages and DNS

Question

Buon giorno, here is the situation:

• A git repo hosted through Github pages: https://github.com/ossia/score-web ; I configured Github to put it behind the domain https://ossia.io thus at the address https://ossia.io/score-web

• A WASM app which requires SharedArrayBuffer

As you can check, the website https://ossia.io/score-web returns an error:

ReferenceError: SharedArrayBuffer is not defined

Which from what the inspector of chrome says:

SharedArrayBuffers (SABs) can be used to construct high-resolution timers. High-resolution timers simplify Spectre attacks on cross-origin resources.

To mitigate security risks across browsers, SharedArrayBuffers are gated behind cross-origin isolated contexts starting with Chrome 92 (July 2021). 

To continue using SharedArrayBuffers, please ensure that this page opts-into cross-origin isolation by setting Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy appropriately.

Note that for each iframe, only the first issue is reported for performance reasons.

is a CORS issue.

How can I fix this without:

• Having to change the URL
• Having to move off GH pages

?

Answer 1

I managed to fix it with the following library which apparently reloads the page and injects the missing CORS headers:

https://github.com/gzuidhof/coi-serviceworker

I just added

<script src="coi-serviceworker.min.js"></script>

to the index.html served by the Github Pages website and the JS script next to it and it worked.