Shared Array Buffer in firebase using CORS headers

Question

I am setting up a Firebase Web App and am unsure how to setup CORS headers for SharedArrayBuffer and if there is anything else I need to do for the SharedArrayBuffer. You can check the website if you need to see the Error it throws. Which is Uncaught ReferenceError: SharedArrayBuffer is not defined

This is what my headers looks like under hosting in firebase.json

"headers": [
            {
                "source": "**",
                "headers": [
                    {
                        "key": "Access-Control-Allow-Origin",
                        "value": "*"
                    }
                ]
            }
        ]

Thanks in advance for your help.

Answer 1

You need to add these 2 http headers Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp for you to enable the SharedArrayBuffer. You can do this in Firebase by adding this in your firebase.json

{
    "database": {
        ...
    },
    "hosting": {
        ...
        "headers": [
            {
                "source": "**",
                "headers": [
                    {
                        "key": "Cross-Origin-Embedder-Policy",
                        "value": "require-corp"
                    },
                    {
                        "key": "Cross-Origin-Opener-Policy",
                        "value": "same-origin"
                    }
                ]
            }
        ]
    }
}