使用devtool协议捕获来自嵌入式iframe的请求XHR，JS，CSS

问题描述

对于上下文，我正在使用Nodejs和puppeteer开发一种综合监视工具。 对于定义的场景的每个步骤，我都会捕获屏幕截图，瀑布和性能指标。

我的问题是在瀑布上，我以前使用过puppeter-har，但是此程序包无法捕获导航之外的请求。 因此，我使用这段代码捕获所有有趣的请求：

const {harFromMessages} = require('chrome-har');
// Event types to observe for waterfall saving (probably overkill,I just set all events of Page and Network)
const observe = [
  'Page.domContentEventFired','Page.fileChooserOpened','Page.frameAttached','Page.frameDetached','Page.frameNavigated','Page.interstitialHidden','Page.interstitialShown','Page.javascriptDialogClosed','Page.javascriptDialogOpening','Page.lifecycleEvent','Page.loadEventFired','Page.windowOpen','Page.frameClearedScheduledNavigation','Page.frameScheduledNavigation','Page.compilationCacheProduced','Page.downloadProgress','Page.downloadWillBegin','Page.frameRequestedNavigation','Page.frameResized','Page.frameStartedLoading','Page.frameStoppedLoading','Page.navigatedWithinDocument','Page.screencastFrame','Page.screencastVisibilityChanged','Network.dataReceived','Network.eventSourceMessageReceived','Network.loadingFailed','Network.loadingFinished','Network.requestServedFromCache','Network.requestWillBeSent','Network.responseReceived','Network.webSocketClosed','Network.webSocketCreated','Network.webSocketFrameError','Network.webSocketFrameReceived','Network.webSocketFrameSent','Network.webSocketHandshakeResponseReceived','Network.webSocketWillSendHandshakeRequest','Network.requestWillBeSentExtraInfo','Network.resourceChangedPriority','Network.responseReceivedExtraInfo','Network.signedExchangeReceived','Network.requestIntercepted'
];

在步骤开始时：

// list of events for converting to HAR
  const events = [];

  client = await page.target().createCDPSession();
  await client.send('Page.enable');
  await client.send('Network.enable');
  observe.forEach(method => {
    client.on(method,params => {
      events.push({ method,params });
    });
  });

在步骤结束时：

waterfall = await harFromMessages(events);

它对于导航事件以及Web应用程序内部的导航非常有用。 但是，我尝试监视的Web应用程序具有包含主要内容的iframe。 我希望看到iframe请求进入我的瀑布。

那么几个问题：

• 为什么Network.responseReceived或任何其他事件不能捕获此请求？
• 是否可以捕获此类请求？

到目前为止，我已经将devtool协议文档改成了红色，无法使用。 我发现的最接近我的问题的问题是： How can I receive events for an embedded iframe using Chrome Devtools Protocol?

我的猜测是，我必须为可能遇到的每个iframe启用网络​​。 我没有找到任何方法可以做到这一点。如果可以通过devtool协议实现此目的，那么使用nodsjs和puppeteer来实现它应该没有问题。

感谢您的见解！

编辑18/08：

在对该主题进行了更多搜索之后，大多数是进程外iframe，互联网上的很多人都指向该响应： https://bugs.chromium.org/p/chromium/issues/detail?id=924937#c13

答案是问题状态：

请注意，最简单的解决方法是--disable-features标志。

也就是说，要通过DevTools协议处理进程外iframe， 您需要使用目标[1]域：

• 使用flatten = true调用Target.setAutoAttach;
• 您将收到带有iframe的sessionId的Target.attachedToTarget事件；
• 在chrome-remote-interface中将该会话作为单独的“页面”进行处理。发送带有附加sessionId字段的单独协议消息：
  {id：3，sessionId：“”，方法：“ Runtime.enable”，参数： {}}
• 您将获得具有相同“ sessionId”字段的响应和事件，这意味着它们来自该框架。例如：
  {sessionId：“”，方法：“ Runtime.consoleAPICalled”， 参数：{...}}

但是我仍然无法实现它。

我正在尝试这种方法，主要是基于puppeteer：

  const events = [];
  const targets = await browser.targets();
  const nbTargets = targets.length;
  for(var i=0;i<nbTargets;i++){
    console.log(targets[i].type());
    if (targets[i].type() === 'page') {
      client = await targets[i].createCDPSession();

      await client.send("Target.setAutoAttach",{
        autoAttach: true,flatten: true,windowOpen: true,waitForDebuggerOnStart: false // is set to false in pptr
      })

      await client.send('Page.enable');
      await client.send('Network.enable');

      observeTest.forEach(method => {
        client.on(method,params => {
          events.push({ method,params });
        });
      });
    }
  };

但是在iframe中，Web应用程序中的导航仍然没有预期的输出。

但是，我能够在加载iframe的步骤中捕获所有请求。 我想念的是在正确导航之外发生的请求。

有人对上述铬反应整合到木偶中有想法吗？谢谢！

解决方法

我一直在寻找错误的一面。 chrome网络事件可以正确捕获，就像我之前检查“ events”变量时看到的那样。 问题来自我在：上使用的“ chrome-har”软件包：

.delay()

页面希望页面和iframe主事件与请求出现在同一批事件中。否则，请求“目前无法映射到任何页面”。

我的场景中的步骤有时是在同一Web应用程序中进行导航（=没有导航事件），我没有这些事件，而chrome-har无法映射请求，因此发送了一个空的.har >

希望它可以帮助其他人，我搞砸了这方面的调试...