Enable Shared Array Buffer

TLDR;#

You need to enable two headers for SharedArrayBuffer to work in Firefox

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

Reference : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer#security_requirements

Full docs for SharedArrayBuffer

Local#

Examples on how to set headers for local dev enviorment

Next.js#

// next.config.js
module.exports = {
 async headers() {
 return [
 {
 source: '/',
 headers: [
 { key: 'Access-Control-Allow-Origin', value: '*' },
 { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
 { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' },
 { key: 'Cross-Origin-Resource-Policy', value: 'cross-origin' }
 ]
 }
 ]
 }
}

CRA#

Use the below configuration with react-app-rewired

// config-overrides.js
const {
 override,
 // disableEsLint,
 // addBabelPlugins,
 // overrideDevServer
} = require('customize-cra')

module.exports = {
 devServer(configFunction) {
 // eslint-disable-next-line func-names
 return function (proxy, allowedHost) {
 // Create the default config by calling configFunction with the proxy/allowedHost parameters
 // Default config: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpackDevServer.config.js
 const config = configFunction(proxy, allowedHost)

 // Set loose allow origin header to prevent CORS issues
 config.headers = {
 'Access-Control-Allow-Origin': '*',
 'Cross-Origin-Opener-Policy': 'same-origin',
 'Cross-Origin-Embedder-Policy': 'require-corp',
 'Cross-Origin-Resource-Policy': 'cross-origin'
 }

 return config
 }
 }
}

Deployment#

Netlify#

# netlify.toml
[[headers]]
 for = "/*"
 [headers.values]
 Cross-Origin-Opener-Policy = "same-origin"
 Cross-Origin-Embedder-Policy = "require-corp"
 Cross-Origin-Resource-Policy = "cross-origin"

Vercel#

https://vercel.com/docs/configuration#project/headers

{
 "headers": [
 
 {
 "source": "/(.*)",
 "headers" : [
 {
 "key" : "Cross-Origin-Opener-Policy",
 "value" : "same-origin"
 },
 {
 "key" : "Cross-Origin-Embedder-Policy",
 "value" : "require-corp"
 },
 {
 "key" : "Cross-Origin-Resource-Policy",
 "value" : "cross-origin"
 }
 ]
 }
 ]
}