Google Chrome Devtools Network面板如何捕获iframe的fetch事件？能否用JS实现？

功能实现原理 #

Chrome DevTools 是浏览器内置的调试工具，运行在普通网页的沙箱权限之外，通过 Chrome DevTools Protocol（CDP）直接和浏览器内核交互。
浏览器内核处理所有网络请求时，不管请求来自顶层页面、同域iframe还是跨域iframe，都会主动将请求的全生命周期信息（发起参数、响应头、响应体、错误状态等）通过CDP推送给订阅了网络事件的调试客户端，也就是DevTools的Network面板。这一过程不受同源策略限制，因为内核层面可以拿到所有页面上下文的请求数据。

用JavaScript实现的可行性 #

分两种场景判断：

可控制iframe内容 / iframe和父页同域 #

这种场景可以实现类似效果，核心思路是给iframe上下文的网络请求API注入钩子：

• 同域iframe可以直接通过iframe.contentWindow拿到iframe的全局对象，重写fetch和XMLHttpRequest方法，在请求发起和响应时收集信息
• 如果你能控制跨域iframe的代码，也可以直接在iframe内部注入钩子，将请求信息通过postMessage传递给父页面

示例代码如下：

const targetIframe = document.querySelector('iframe');
// 同域iframe场景
targetIframe.addEventListener('load', () => {
  const iframeGlobal = targetIframe.contentWindow;
  // 劫持fetch方法
  const nativeFetch = iframeGlobal.fetch;
  iframeGlobal.fetch = async (...args) => {
    // 收集请求信息
    const requestInfo = {
      url: args[0],
      options: args[1],
      startTime: Date.now()
    };
    console.log('iframe发起fetch请求', requestInfo);
    const response = await nativeFetch.apply(iframeGlobal, args);
    // 收集响应信息
    console.log('请求完成', {
      url: response.url,
      status: response.status,
      duration: Date.now() - requestInfo.startTime
    });
    return response;
  };

  // 劫持XMLHttpRequest逻辑同理，此处省略
});

完全无法控制的跨域iframe #

这种场景下普通网页环境的JavaScript无法实现该功能。
因为同源策略限制，父页面无法访问跨域iframe的contentWindow对象，没有办法注入请求钩子。浏览器也没有给普通网页开放捕获第三方iframe请求的API，普通网页的权限远低于DevTools这类系统级调试工具。
如果要实现跨域第三方iframe的请求捕获，只能通过更高权限的运行环境实现，比如申请了webRequest权限的浏览器扩展、桌面端嵌入浏览器的客户端等。

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