SharedArrayBuffer updates in Android Chrome 88 and Desktop Chrome 92

FFMPEG.WASMを使ったWebアプリを作った際に、Developer Consoleに↓の警告が表示されていた。

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021
See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

クロスオリジン分離という対応をしないとChromeバージョン92からSharedArrayBufferが使えなくなってしまうとのこと。

参考リンクの指示に沿って、Cross-Origin-Embedder-Policy ヘッダーと Cross-Origin-Opener-Policy ヘッダーを追加。

今回はNext.jsアプリだったので next.config.js に↓を追加した。

const nextConfig = {
  async headers() {
    return [
      {
        source: '/',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
        ],
      },
    ]
  },
}

module.exports = nextConfig

なお、firebase hostingで静的ホスティングしている場合は firebase.json でヘッダー設定を行う必要がある。

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "/",
        "headers": [
          {
            "key": "Cross-Origin-Embedder-Policy",
            "value": "require-corp"
          },
          {
            "key": "Cross-Origin-Opener-Policy",
            "value": "same-origin"
          }
        ]
      }
    ]
  }
}

今回はアプリがシンプルなものだったので、クロスオリジンの外部リソース読み込みはなく2つのヘッダー追加のみで対応できた。

参考

• A guide to enable cross-origin isolation
• ChromeとFirefoxの新しいCOOPとCOEPはセキュリティを高めるクロスオリジンポリシー
• next.config.js: Custom Headers | Next.js
• ホスティング動作を構成する  |  Firebase