CODEWITHSUNDEEP
firebasehttp-headersfirebase-hostingsharedarraybuffer
ultraGentle
ultraGentle

Reputation: 6329

Firebase hosting : headers not taking effect (COEP and COOP http headers)

I want to set the headers Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin so I can enable SharedArrayBuffer, so I can use https://github.com/ffmpegwasm/ffmpeg.wasm

I have set these in firebase.json, however console.log(crossOriginIsolated) yields false, and any attempt to use FFmpeg errors with SharedArrayBuffer is not defined. This occurs with both the emulator and the deployed site.

I'm loading ffmpegwasm from jsdeliver with <script src="https://cdn.jsdelivr.net/npm/@ffmpeg/[email protected]/dist/ffmpeg.min.js" crossorigin="true"></script>

Here's my complete firebase.json (just a simple demo project), with headers at the bottom:

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "emulators": {
    "functions": {
      "port": 5001
    },
    "hosting": {
      "port": 5000
    },
    "ui": {
      "enabled": true
    }
  },
  "headers": [
    {
      "source": "**",
      "headers": [
        {
          "key": "Cross-Origin-Embedder-Policy",
          "value": "require-corp"
        },
        {
          "key": "Cross-Origin-Opener-Policy",
          "value": "same-origin"
        }
      ]
    }
  ]
}

What am I doing wrong? Thanks!

Upvotes: 2

Views: 876

Answers (1)

Shuhei Iitsuka
Shuhei Iitsuka

Reputation: 115

I've managed to solve the issue by changing the "source": "**" part to "regex": "/.*". You could try different patterns to apply the header to the exact page paths you want to modify.

Upvotes: 2

Related Questions