2

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/ffmpeg@0.10.1/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!

ultraGentle
  • 5,084
  • 1
  • 19
  • 45

1 Answers1

2

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.

Shuhei Iitsuka
  • 115
  • 7