Is there any way to use SharedArrayBuffer on GitHub Pages?

Question

To use SharedArrayBuffer, we have to add two response headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Is there any way to add those headers with GitHub Pages so SharedArrayBuffer will work?

Rata

Please consider marking the answer about using a service worker as the accepted answer. It solves the problem; for example, open browser devtools on validator.github.io/validator and inspect the response headers. – Dionne

With me it not working, have tested and the page keep loading again and again – Teal

Answer 1

You can get SharedArrayBuffer to work by setting the required COOP and COEP headers through a service worker (even on GitHub Pages).

I created a small library to make it easier: coi-serviceworker — based on the guide Enabling COOP/COEP without touching the server, which outlines the required steps:

1. When the page gets loaded for the first time, we register the worker.
2. Then we reload the page.
3. And finally, now that the worker is controlling everything, every request will now have the appropriate headers set.

The service worker which does that has to contain something along the lines of the following:

// sw.js
self.addEventListener("fetch", function (event) {
  if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
    return;
  }

  event.respondWith(
    fetch(event.request)
      .then(function (response) {
        const newHeaders = new Headers(response.headers);
        newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
        newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");

        const moddedResponse = new Response(response.body, {
          status: response.status,
          statusText: response.statusText,
          headers: newHeaders,
        });

        return moddedResponse;
      })
      .catch(function (e) {
        console.error(e);
      })
  );
});

Snooze

This does not work, the crossOriginIsolated is never true, and the page reloads continuosly – Capillary

@Snooze So the OP and another commenter have reported that when they use the coi-serviceworker library, it causes the page to reload over and over again. Have you observed that behavior with any pages? Do you know what causes it in some cases, and how to fix it? – Dionne

@Dionne I encountered exact same situation with my website when I load coi-serviceworker with <script src="/static/js/coi-serviceworker.js"></script>. The problem was URI. it needed to be loaded in same or above directory. so move /static/js/coi-serviceworker.js to root, and change src to coi-serviceworker.js will fix it. – Sutphin

The question is when to reload the page. This can lead to an endless reload loop for various reasons. At the page reload the service-worker should be ready: navigator.serviceWorker.ready.then(function(reg) { if (!crossOriginIsolated && !navigator.serviceWorker.controller) window.location.reload(); }) – Hage

Answer 2

As of August 2021 there's no way for GitHub pages to serve with COOP/COEP headers. As an alternative static file server with custom headers, Firebase hosting might be an option. I'm not familiar with other options.

Animator

Answer 3

I have try netlify but they have a limit on bandwidth.

I use Cloudflare Workers to add such headers. They won't limit you in terms of bandwidth (which is good for hefty WebAssembly files), but they do have a limit for number of requests on the free plan - 10,000,000 requests per month. https://developers.cloudflare.com/workers/platform/pricing

To be fair though, that limit is usually hard to hit on small demos (which is what Github Pages is usually for), and after that the price is not very steep either ($0.50 for each extra 1M requests).

Amethyst

Answer 4

Look likes Github don't have the intent to add custom headers, found the same question in 2011 and until now still don't have this Github pages, HTTP headers

Rata