Firefox扩展如何实现跨源隔离？需兼容SharedArrayBuffer

核心思路 #

Firefox不支持Chrome扩展中通过manifest.json直接声明cross_origin_embedder_policy和cross_origin_opener_policy的方式，需要通过拦截扩展资源请求并注入响应头来实现跨源隔离，满足SharedArrayBuffer的使用要求。

具体实现步骤 #

1. 配置manifest权限 #

根据你使用的manifest版本（v2或v3），在manifest.json中添加必要的权限和后台脚本配置：

Manifest V2 示例

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "moz-extension://*/*"
  ],
  "background": {
    "scripts": ["background.js"]
  }
  // 其他扩展配置（如popup、content_scripts等）
}

Manifest V3 示例

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["webRequest"],
  "host_permissions": ["moz-extension://*/*"],
  "background": {
    "service_worker": "background.js"
  }
  // 其他扩展配置
}

2. 后台脚本注入跨源隔离头 #

在background.js中添加请求拦截逻辑，为扩展自身的所有资源请求添加Cross-Origin-Embedder-Policy和Cross-Origin-Opener-Policy响应头：

// 拦截扩展资源请求，注入跨源隔离头
browser.webRequest.onHeadersReceived.addListener(
  (details) => {
    // 仅处理扩展自身的资源请求
    if (details.url.startsWith('moz-extension://')) {
      const updatedHeaders = details.responseHeaders.map(header => {
        // 替换已存在的同名头（如果有）
        const lowerName = header.name.toLowerCase();
        if (lowerName === 'cross-origin-embedder-policy' || lowerName === 'cross-origin-opener-policy') {
          return null;
        }
        return header;
      }).filter(Boolean); // 移除null项

      // 添加跨源隔离所需的头
      updatedHeaders.push(
        { name: 'Cross-Origin-Embedder-Policy', value: 'require-corp' },
        { name: 'Cross-Origin-Opener-Policy', value: 'same-origin' }
      );

      return { responseHeaders: updatedHeaders };
    }
  },
  { urls: ['moz-extension://*/*'] },
  ['blocking', 'responseHeaders', 'extraHeaders'] // extraHeaders是修改这类头的必要参数
);

3. 资源兼容性检查 #

确保扩展中加载的所有资源（脚本、样式、图片、第三方资源等）符合跨源隔离要求：

• 扩展自有资源默认满足同源要求，无需额外配置；
• 若需加载外部资源，需确保该资源返回Cross-Origin-Resource-Policy: cross-origin或same-site响应头，或通过CORS配置允许你的扩展源访问。

验证方法 #

1. 在Firefox中加载扩展后，打开扩展的页面（如popup、选项页）；
2. 打开开发者工具的「网络」面板，查看页面主文档的响应头，确认Cross-Origin-Embedder-Policy和Cross-Origin-Opener-Policy已正确设置；
3. 在控制台中尝试创建SharedArrayBuffer，验证是否能正常运行：

const sab = new SharedArrayBuffer(1024);
console.log(sab); // 若未报错则说明配置生效

内容的提问来源于stack exchange，提问作者eoirqgfoqkrognoqwfr