SharedArrayBufferサポートとクロスオリジン分離

SharedArrayBuffer検出

SharedArrayBufferはメインスレッドとWeb Worker間の共有メモリを可能にし、JavaScriptでの真のマルチスレッドプログラミングを実現します。Spectre脆弱性の後、ブラウザはこの機能にクロスオリジン分離ヘッダーを要求します。

検出

const hasSharedArrayBuffer =
  typeof SharedArrayBuffer !== 'undefined';

クロスオリジン分離チェック

function checkIsolation() {
  return {
    sharedArrayBuffer: typeof SharedArrayBuffer !== 'undefined',
    crossOriginIsolated: window.crossOriginIsolated === true,
    atomics: typeof Atomics !== 'undefined',
  };
}

必要なHTTPヘッダー

SharedArrayBufferを利用可能にするために、サーバーは以下のヘッダーを送信する必要があります：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

これらのヘッダーが必要な理由

2018年のSpectreサイドチャネル攻撃の発見後、ブラウザは高分解能タイミング攻撃に悪用される可能性があるためSharedArrayBufferを無効にしました。COOPとCOEPヘッダーは、明示的にオプトインしていないクロスオリジンリソースをページがロードできないようにすることで攻撃ベクトルを防ぎ、再有効化します。

SharedArrayBufferの使用

// メインスレッド
const buffer = new SharedArrayBuffer(1024);
const view = new Int32Array(buffer);
worker.postMessage({ buffer });

// ワーカースレッド
onmessage = (e) => {
  const view = new Int32Array(e.data.buffer);
  Atomics.add(view, 0, 1); // スレッドセーフなインクリメント
  Atomics.notify(view, 0); // 待機中のスレッドを起動
};

他の機能への影響

COEPを有効にすると、Cross-Origin-Resource-Policyヘッダーを設定していないクロスオリジンの画像、iframe、スクリプトが壊れる可能性があります。移行を慎重に計画してください。