0

I have a deployed app that is built on Express (Node) and uses a built React frontend for app rendering.

Currently, I'm facing SharedArrayBuffer issues and need to pass these headers to make my code work:

To opt in to a cross-origin isolated state, you need to send the following HTTP headers on the main document:


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

Where and how would I go about doing this? New to full stack development haha.

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Juliette
  • 4,309
  • 2
  • 14
  • 31

1 Answers1

0

I'm currently working on a project where I also encountered the SharedArrayBuffer issue when integrating ffmpeg-wasm.

This first snippet from cross origin resource policy issue when playing files from s3 on deployed app solved my problem. This would go in your server.js (note that the sequence is important, set headers before express.static):

    app.use((req, res, next) => {
      res.header("Cross-Origin-Embedder-Policy", "require-corp");
      res.header("Cross-Origin-Opener-Policy", "same-origin");
      next();
    });
    
    app.use(express.static(...));

Alternatively:

    const customHeaders = (res, path, stat) => {
      res.append("Cross-Origin-Embedder-Policy", "require-corp");
      res.append("Cross-Origin-Opener-Policy", "same-origin"); 
    }

    app.use(express.static(...), {
      setHeaders: customHeaders
    });

Note that there are some issues with this approach:

  • SharedArrayBuffer is not supported in Safari and some other browsers, see https://caniuse.com/sharedarraybuffer
  • All cross-origin loads from the browser will fail, for example external scripts (e.g. Analytics) or image loads from other domains
Softmatic GmbH
  • 11
  • 3
  • this is nice, but how do you set these headers when you dont build with static and your client isnt server-side rendered? – Jim Aug 03 '22 at 21:12