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"
        }
      ]
    }
  ]
}