WebExtensions API iframe注入网站模态框时AJAX如何携带Cookie

可行性说明 #

该需求可完全实现，无需引导用户修改Cookie属性或浏览器全局设置。
问题根源：目标外部站点的页面处于第三方嵌套上下文，Chrome默认SameSite Cookie规则会拦截跨站上下文下的AJAX请求携带Cookie。

实现方案 #

利用扩展已声明的host权限，通过后台脚本代理AJAX请求，绕开第三方上下文的Cookie限制。

• 步骤1：劫持iframe内部的AJAX请求
  在iframe.html中注入脚本，劫持fetch和XMLHttpRequest，将请求参数通过postMessage发送给后台脚本，替换原有的直接请求逻辑。
  示例代码：

  // 劫持fetch
  const originalFetch = window.fetch;
  window.fetch = async function(url, options = {}) {
    // 向后台发送代理请求
    const proxyRes = await chrome.runtime.sendMessage({
      type: 'PROXY_AJAX',
      url: url,
      options: options
    });
    // 返回符合规范的Response对象，不破坏原站点JS逻辑
    return new Response(proxyRes.body, {
      status: proxyRes.status,
      statusText: proxyRes.statusText,
      headers: new Headers(proxyRes.headers)
    });
  }
  
  // 同步劫持XMLHttpRequest（若目标站点使用原生XHR）
  const originalXHR = window.XMLHttpRequest;
  window.XMLHttpRequest = function() {
    const xhr = new originalXHR();
    // 重写open、send方法转发请求参数，逻辑同fetch劫持
  }
  

• 步骤2：后台脚本代理发起请求
  在background.js中监听代理请求消息，利用已声明的https://external-iframe-site.com/*权限发起请求，自动携带该站点有效Cookie：

  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    // 校验请求来源，仅允许目标站点的代理请求
    if (!sender.url.includes('https://external-iframe-site.com')) return;
    if (request.type === 'PROXY_AJAX') {
      // 后台发起请求，强制携带Cookie
      fetch(request.url, {
        ...request.options,
        credentials: 'include'
      }).then(async res => {
        sendResponse({
          status: res.status,
          statusText: res.statusText,
          headers: Object.fromEntries(res.headers.entries()),
          body: await res.text()
        });
      });
      // 标记异步返回响应
      return true;
    }
  });
  

  Chrome对已声明host权限的后台请求判定为可信第一方请求，自动携带站点所有有效Cookie（包括SameSite=Lax属性的Cookie），不受第三方嵌套上下文限制。
• 步骤3：原有结构无需修改
  保留现有多层iframe嵌套结构，该结构用于绕过顶层页面的CSP限制，无需调整。

注意事项 #

• 无需修改原有Cookie的SameSite、Secure属性，Cookie携带逻辑由Chrome底层处理。
• 若目标站点AJAX为POST类型，需在劫持时完整传递请求头、请求体参数。
• 消息监听需增加来源校验，避免被恶意页面滥用。

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