Firefox中无法在沙箱iframe内访问WebExtension的browser API

问题根源 #

Manifest V3中，设置了sandbox="allow-scripts"的iframe处于安全隔离的上下文，默认无法直接访问浏览器扩展API（包括browser/chrome对象），这是浏览器为安全隔离做出的限制，避免sandbox内的不可信代码滥用扩展权限。

可行解决方案 #

方案1：通过postMessage与父页面中转通信（推荐，保持安全隔离）

sandbox iframe无法直接调用扩展API，但可以通过postMessage和父页面（比如扩展的popup、options页面或content script）通信，由父页面代为调用扩展API，再将结果返回给iframe。

• iframe内代码（my_iframe.html）：

// 向父页面发送请求
function sendToBackground(message) {
  window.parent.postMessage({
    type: 'EXTENSION_REQUEST',
    payload: message
  }, location.origin); // 限制发送到扩展同源，避免安全风险
}

// 监听父页面返回的结果
window.addEventListener('message', (event) => {
  if (event.origin !== location.origin) return; // 校验来源，防止恶意消息
  if (event.data.type === 'EXTENSION_RESPONSE') {
    console.log('收到后台响应:', event.data.payload);
    // 处理响应逻辑
  }
});

// 示例：调用后台脚本
sendToBackground({ action: 'registerAccount', data: { username: 'test' } });

• 父页面代码（比如popup.html对应的脚本）：

// 监听iframe的消息
window.addEventListener('message', async (event) => {
  if (event.origin !== location.origin) return; // 校验来源
  if (event.data.type === 'EXTENSION_REQUEST') {
    try {
      // 调用扩展后台API
      const response = await browser.runtime.sendMessage(event.data.payload);
      // 将结果返回给iframe
      event.source.postMessage({
        type: 'EXTENSION_RESPONSE',
        payload: response
      }, event.origin);
    } catch (err) {
      event.source.postMessage({
        type: 'EXTENSION_RESPONSE',
        payload: { error: err.message }
      }, event.origin);
    }
  }
});

方案2：取消sandbox的隔离（不推荐，降低安全性）

如果不需要严格的安全隔离，可以修改扩展的manifest.json，给sandbox页面添加allow-same-origin权限，让iframe与扩展同源，从而直接访问browser对象：

{
  "sandbox": {
    "pages": ["my_iframe.html"],
    "allow-same-origin": true
  }
}

注意：此方法会消除sandbox的安全隔离效果，若iframe内包含不可信代码，可能导致扩展权限被滥用，仅适合测试场景。

跨浏览器兼容说明 #

Chrome和Firefox在Manifest V3的sandbox行为上基本一致，上述方案均适用。为了跨浏览器兼容，推荐使用browser对象（Firefox原生支持，Chrome需额外引入browser-polyfill.js）。

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