同时检查多个 WebSocket 连接

Posted 2023-02-16

【中文标题】同时检查多个 WebSocket 连接

【英文标题】：Inspecting multiple WebSocket connections at the same time

【发布时间】：2019-06-29 16:39:35

【问题描述】：

我正在使用以下主题中提供的解决方案来检查网页上的 WebSockets 流量（消息），我不拥有这些流量（仅用于学习目的）：

Inspecting WebSocket frames in an undetectable way

Listening to a WebSocket connection through prototypes

https://gist.github.com/maskit/2252422

像这样：

(function()
var ws = window.WebSocket;

window.WebSocket = function (a, b, c) 
   var that = c ? new ws(a, b, c) : b ? new ws(a, b) : new ws(a);
   that.addEventListener('open', console.info.bind(console, 'socket open'));
   that.addEventListener('close', console.info.bind(console, 'socket close'));
        that.addEventListener('message', console.info.bind(console, 'socket msg'));
        return that;
    ;

    window.WebSocket.prototype=ws.prototype; 
());

提供的解决方案的问题是他们只监听 3 个 WebSocket 连接中的 1 个（“wss://...”）。我能够在控制台中看到消息我接收或发送，但仅用于一个连接.. 有什么我遗漏的吗？有没有可能其他两个服务有什么不同，禁止使用原型扩展技术？

附言为了避免可能的禁令或法律问题，我不会提供我正在对其进行测试的网络资源的 URL。

【问题讨论】：

我认为有两种可能性。一种是iframes 等。另一个是 windows.WebSocket 的值在你可以在你的脚本中更新它之前被其他脚本抓取，只是碰巧其中一个做的有点晚。

@Ouroborus 我不知道如何解决这个问题.. 似乎没有 iframe.. 所以我使用了另一种方法，您可以在下面的答案部分查看。

【参考方案1】：

好的，因为已经数周没有答案了，所以我将发布一个我最终使用的解决方案。

我已经构建了自己的 Chrome 扩展程序，它监听 WebSocket 连接并将所有请求和响应转发到我自己的 WebSocket server（我碰巧在 C# 中运行）。

这种方法有一些限制。你没有看到request header 或谁在发送数据包。你只能看到payload 就是这样。此外，您无法以任何方式修改内容或发送您自己的请求（请记住 - 您无权访问 header metadata）。当然，另一个限制是您必须运行Chrome（使用devtools APIs）..

一些说明。

以下是附加调试器以侦听网络数据包的方法：

    chrome.debugger.attach( tabId: tabId , "1.2", function () 
        chrome.debugger.sendCommand( tabId: tabId , "Network.enable");
        chrome.debugger.onEvent.addListener(onTabDebuggerEvent);
    );

以下是捕捉它们的方法：

function onTabDebuggerEvent(debuggeeId, message, params) 
    var debugeeTabId = debuggeeId.tabId;

    chrome.tabs.get(debugeeTabId, function (targetTab) 
        var tabUrl = targetTab.url;

        if (message == "Network.webSocketFrameSent") 

        
        else if (message == "Network.webSocketFrameReceived") 
            var payloadData = params.response.payloadData;

            var request = 
                source: tabUrl,
                payload: params.response.payloadData
            ;

            websocket.send(JSON.stringify(request));
        
    );

这是创建websocket client 的方法：

    var websocket = new WebSocket("ws://127.0.0.1:13529");

    setTimeout(() => 
        if (websocket.readyState !== 1) 
            console.log("Unable to connect to a WebsocketServer.");
            websocket = null;
        
        else 
            console.log("WebsocketConnection started", websocket);

            websocket.onclose = function (evt) 
                console.log("WebSocket connection got closed!");

                if (evt.code == 3001) 
                    console.log('ws closed');
                 else 
                    console.log('ws connection error');
                

                websocket = null;
            ;

            websocket.onerror = function (evt) 
                console.log('ws normal error: ' + evt.type);
                websocket = null;
            ;

        
    , 3000);

创建server 不在此问题的范围内。您可以使用Node.js、C# 或Java 中的一个，无论您更喜欢什么..

这当然不是最方便的方法，但与 java-script 注入方法不同 - 它适用于所有情况。

编辑：完全忘了提。似乎有另一种方法可以解决这个问题，但我还没有深入研究这个话题，因此这可能在某种程度上是错误的信息。应该可以通过数据包嗅探实用程序在网络接口级别捕获数据包。如Wireshark 或pcap。也许我将来会进一步调查:)