跨來源隔離

跨來源隔離（Cross-Origin Isolation） 是一種瀏覽器安全機制，透過設定特定的 HTTP 標頭，讓網頁可以使用某些強大但潛在危險的 Web API，例如 SharedArrayBuffer。

為什麼需要跨來源隔離？

自 2018 年 Spectre 安全漏洞曝光後，瀏覽器限制了 SharedArrayBuffer 的使用——只有在「跨來源隔離」環境中才能使用這個 API。

Remotion 的 @remotion/renderer 在某些音訊處理場景中使用 SharedArrayBuffer，因此可能需要在你的網頁伺服器上設定相關標頭。

必要的 HTTP 標頭

要啟用跨來源隔離，伺服器需要在回應中加入以下兩個標頭：

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

這兩個標頭的組合會讓頁面進入「跨來源隔離」模式，此時 crossOriginIsolated 屬性會回傳 true。

在各伺服器框架中設定

Next.js

在 next.config.js 中加入標頭設定：

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin",
          },
          {
            key: "Cross-Origin-Embedder-Policy",
            value: "require-corp",
          },
        ],
      },
    ];
  },
};

Express.js

import express from "express";
 
const app = express();
 
app.use((req, res, next) => {
  res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
  res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
  next();
});

Nginx

location / {
  add_header Cross-Origin-Opener-Policy "same-origin";
  add_header Cross-Origin-Embedder-Policy "require-corp";
}

Apache

在 .htaccess 或 Apache 設定中：

Header always set Cross-Origin-Opener-Policy "same-origin"
Header always set Cross-Origin-Embedder-Policy "require-corp"

設定後的影響

啟用跨來源隔離後，以下限制會生效：

功能	影響
`SharedArrayBuffer`	解除限制，可正常使用
`window.open()`	只能開啟同來源的視窗
`postMessage()`	跨來源傳送需要額外設定
嵌入外部 iframe	需要 `allow` 屬性或對方設定 CORP 標頭
載入外部字體/圖片	需要這些資源支援 CORS

跨來源資源的處理

啟用 COEP（require-corp）後，所有跨來源資源必須明確允許被嵌入。有兩種方式：

方式一：資源加入 CORP 標頭

外部資源的回應加入：

Cross-Origin-Resource-Policy: cross-origin

方式二：使用 `crossorigin` 屬性

在你的 HTML 或 React 程式碼中：

<img
  src="https://cdn.example.com/image.png"
  crossOrigin="anonymous"
/>
 
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto"
  crossOrigin="anonymous"
/>

在 Remotion Player 中

若你在網頁中嵌入 Remotion Player 並需要跨來源隔離，需要確保：

頁面本身設定了正確的標頭。
Player 使用的所有媒體資源都支援 CORS。
外部字體服務（如 Google Fonts）的 CSS 以 crossorigin="anonymous" 載入。

import { Player } from "@remotion/player";
 
// 使用 crossorigin 載入所需資源後，再渲染 Player
<Player
  component={MyVideo}
  durationInFrames={300}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
/>;

驗證跨來源隔離狀態

在瀏覽器的開發者工具中驗證：

// 在瀏覽器 Console 中執行
console.log(crossOriginIsolated); // 應該回傳 true

或透過 JavaScript 偵測：

if (!crossOriginIsolated) {
  console.warn("跨來源隔離未啟用，SharedArrayBuffer 不可用");
}

小結

跨來源隔離透過 COOP 和 COEP 兩個 HTTP 標頭啟用。
啟用後可使用 SharedArrayBuffer，但需要確保所有跨來源資源支援 CORS。
在 Next.js、Express、Nginx 等常見框架中都有對應的設定方式。
可用 crossOriginIsolated 屬性在 JavaScript 中驗證是否已啟用。