Where to set headers for SharedArrayBuffer in React?

Question

I'm running a website created with create-react-app on localhost on Windows10. When I try to use ffmpeg in my website, I get the error

"SharedArrayBuffer is not defined"

in Firefox. To fix this I seen everywhere that I have to add COOP and COEP headers "in my top document".

The thing is I don't understand what "top document" is and where can I find it.

I tried to add:

<meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp">
<meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin"> 

in my index.html as I seen it somewhere but it is not working.

Could you tell me please what is that document in which I have to add my headers and where to find it?

Answer 1

From the HTML Living Standard, there are only certain values which may be set in the http-equiv attribute of a meta tag. These are content-language, content-type, default-style, refresh, set-cookie, x-ua-compatible, and content-security-policy. Since neither Cross-Origin-Embedder-Policy or Cross-Origin-Opener-Policy appear here, these HTTP headers cannot be set (according to the HTML specification) using the http-equiv attribute of a meta tag. You will need to add these as HTTP headers, rather than as meta tags to your HTML document.

Answer 2

I am looking to add the same in my application too, I have an idea which I would like to verify it, I think I have to add these header on on web-server where application server or in case you use static SPA from CDN these header need to send as response header when the index.html and JS bundle requested by user

Answer 3

Using the meta element is great for CSP, but if you want to experiment with Content-Security-Policy-Report-Only, you cannot use a meta tag.

Specifically, I created a src/setupProxy.js file with the following contents, and things appear to work well (React-App):

  module.exports = function (app) {
   app.use(function (req, res, next) {
       res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
       res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
       next();
   });
  };

As a workaround, I've used the ability to configure the proxy manually (https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually).

Have you seen https://github.com/facebook/create-react-app/issues/10210?