如何解决使用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 >
希望它可以帮助其他人,我搞砸了这方面的调试...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。