Support for features that require cross origin isolation

[hummingly]

Hello everyone!

Using snowpack has been a joy so far but I run into the issue that I need to set the headers of the dev server in order to use SharedArrayBuffer. At the moment SharedArrayBuffer can be only used without cross origin isolation on Chrome Desktop until version 91 or so.

The headers are

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

If that is not possible I either have to setup my own dev server but I would like to avoid that.

[worstpractice]

I had the exact same question!

@hummingly Found any workaround in the time being?

[hummingly]

In the end I chose to use webpack because I had a deadline. You could also stick to snowpack amd just use another dev server or even build a tiny static file server that sends those headers. Problem is that snowpack keeps those files in memory when developing, so you need to build the dependencies at least once.

I looked into the server API or similar but the documemtation was very thin on information and I wasn't willing to look through the source code more.

[worstpractice]

@hummingly Well, I have good or bad news, depending on how you look at it.

I experimented my way to a (duct tape and chewing gum-grade) workaround:

'Cross-Origin-Embedder-Policy': 'require-corp',
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Resource-Policy': 'cross-origin',

CTRL+C the above, and prepare to paste them (by hand) as object properties into the following file:

./node_modules/snowpack/lib/index.js

The paste should be inserted at two separate locations in the aforementioned index.js file.

To find both locations, just CTRL+F inside the index.js file for the following source fragment:

const headers = {

CTRL+V these new properties into the objects in both places you find, and voilà — production ready!

Spoiler warning

Jokes aside — this hack is pretty gross, even for private, local, non-internet-facing hobby development.

But, it just so happened to solve the immediate issue for me in the short-term.

Also, it seems to matter if you apply the hack before or after snowpack "compiles" your app for the first time or not.

If the hack doesn't work, try going back and applying it the other way around instead (before or after first launch, respectively).

Hope this can be of help to anyone.

[k-miyata]

This is my workaround:

// snowpack.config.js

const fs = require("fs");

module.exports = {
  routes: [
    {
      match: "routes",
      src: ".*",
      dest: (req, res) => {
        // Default headers. See https://github.com/withastro/snowpack/blob/c44d86f73ac7b74507d4d5554ccb96e8b7dc5294/snowpack/src/commands/dev.ts#L133-L137.
        res.setHeader("Accept-Ranges", "bytes");
        res.setHeader("Access-Control-Allow-Origin", "*");
        res.setHeader("Content-Type", "text/html");
        res.setHeader("Vary", "Accept-Encoding");

        // Make `index.html` cross-origin isolated to enable `SharedArrayBuffer`.
        res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
        res.setHeader("Cross-Origin-Opener-Policy", "same-origin");

        return fs.createReadStream("index.html").pipe(res);
      },
    },
  ],
};