如何通过Chrome DevTools协议检测WebSocket创建来源的iframe？

开发者阿泽

2026-8-16

如何通过Chrome DevTools协议检测WebSocket的iframe来源

针对Chrome 106.0.5249.119版本中Initiator字段不包含iframe信息的问题，可以通过以下方法关联WebSocket与创建它的iframe：

利用网络事件的frameId关联
WebSocket建立前会发送HTTP握手请求，该请求在Network.requestWillBeSent事件中会携带frameId，这个ID对应发起请求的iframe上下文。具体步骤：
1. 监听Network.requestWillBeSent事件，过滤出type为WebSocket的请求，将requestId与对应的frameId存入映射表。
2. 监听Network.webSocketCreated事件，拿到事件中的requestId后，从映射表中取出对应的frameId。
3. 调用Page.getFrameTree获取页面所有iframe的层级结构，通过frameId匹配找到目标iframe的URL、名称等标识信息。

示例代码片段

// 存储requestId到frameId的映射
const requestFrameMap = new Map();

// 监听请求发送事件，记录WebSocket请求的frameId
CDP.Network.requestWillBeSent((params) => {
  if (params.type === 'WebSocket') {
    requestFrameMap.set(params.requestId, params.frameId);
  }
});

// 监听WebSocket创建事件，关联到对应iframe
CDP.Network.webSocketCreated((params) => {
  const targetFrameId = requestFrameMap.get(params.requestId);
  if (!targetFrameId) return;

  // 获取所有iframe树结构
  CDP.Page.getFrameTree().then(({ frameTree }) => {
    // 递归查找目标iframe
    const findTargetFrame = (treeNode) => {
      if (treeNode.frame.id === targetFrameId) {
        return treeNode.frame;
      }
      for (const child of treeNode.childFrames) {
        const result = findTargetFrame(child);
        if (result) return result;
      }
      return null;
    };

    const sourceIframe = findTargetFrame(frameTree);
    console.log(`WebSocket来源iframe: ${sourceIframe.url}`);
  });
});