如何跟踪iframe内嵌Web应用的所有请求与重定向？

核心思路 #

利用Service Worker的网络拦截能力作为iframe内嵌目标应用的代理层，捕获所有请求（导航、XHR、Fetch）的详细数据，再通过postMessage将数据传递给主调试页面，最终完成请求信息的展示。

1. 注册Service Worker（主调试页面） #

在调试器主页面完成Service Worker注册，确保作用域覆盖目标应用的所有路径：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js', {
        scope: '/' // 全局作用域，覆盖所有子路径请求
      });
    } catch (err) {
      console.error('Service Worker注册失败:', err);
    }
  });
}

注意：Service Worker要求HTTPS环境，localhost开发环境可豁免此限制。

2. 编写Service Worker拦截逻辑（sw.js） #

在sw.js中监听fetch事件，捕获请求并提取关键信息，再发送给主页面：

self.addEventListener('fetch', async (event) => {
  const req = event.request;
  // 基础请求信息收集
  const reqData = {
    url: req.url,
    method: req.method,
    requestType: req.type, // 标识请求类型：navigate/xhr/fetch等
    headers: Object.fromEntries(req.headers.entries()),
    timestamp: Date.now()
  };

  // 收集非GET请求的请求体（跳过二进制/流类型）
  if (req.method !== 'GET') {
    try {
      const clonedReq = req.clone();
      reqData.body = await clonedReq.text();
    } catch (e) {
      reqData.body = '[无法解析：二进制/流格式请求体]';
    }
  }

  // 将请求信息发送给主调试页面
  self.clients.matchAll({ includeUncontrolled: true, type: 'window' }).then(clients => {
    clients.forEach(client => {
      client.postMessage({
        type: 'REQUEST_CAPTURED',
        payload: reqData
      });
    });
  });

  // 放行原始请求，不影响目标应用正常运行
  event.respondWith(fetch(req));
});

3. 主页面接收并展示请求数据 #

在调试器主页面监听Service Worker发来的消息，将捕获的请求数据渲染到调试界面：

// 监听Service Worker消息
navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data.type === 'REQUEST_CAPTURED') {
    const reqInfo = event.data.payload;
    // 示例：将请求信息追加到调试列表
    const listItem = document.createElement('div');
    listItem.className = 'request-item';
    listItem.innerHTML = `
      <div class="request-header">
        <span class="method ${reqInfo.method}">${reqInfo.method}</span>
        <span class="url">${reqInfo.url}</span>
      </div>
      <div class="request-details">
        <p><strong>请求头:</strong> ${JSON.stringify(reqInfo.headers)}</p>
        ${reqInfo.body ? `<p><strong>请求体:</strong> ${reqInfo.body}</p>` : ''}
      </div>
    `;
    document.getElementById('request-tracker').appendChild(listItem);
  }
});

4. 解决跨域与iframe权限问题 #

• 同域场景：直接嵌入目标应用iframe即可，Service Worker可正常拦截所有请求。
• 跨域场景：由于浏览器同源策略限制，Service Worker无法直接拦截第三方域名请求。此时需要通过反向代理将目标应用转发到调试器同域下，比如：
  • 调试器运行在http://localhost:3000，配置代理规则将/target-app/*转发到目标应用域名。
  • iframe嵌入/target-app路径，此时所有请求都属于同域，Service Worker可正常拦截。

额外优化：跟踪响应数据 #

如果需要捕获响应信息，可在Service Worker中修改fetch的处理逻辑：

event.respondWith(
  fetch(req).then(async (res) => {
    const clonedRes = res.clone();
    // 收集响应信息
    const resData = {
      status: clonedRes.status,
      statusText: clonedRes.statusText,
      headers: Object.fromEntries(clonedRes.headers.entries()),
      body: await clonedRes.text()
    };

    // 发送请求+响应组合数据
    self.clients.matchAll({ includeUncontrolled: true, type: 'window' }).then(clients => {
      clients.forEach(client => {
        client.postMessage({
          type: 'REQUEST_RESPONSE_CAPTURED',
          payload: { ...reqData, response: resData }
        });
      });
    });

    return res;
  })
);

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