同時檢查多個WebSocket連接

Question

我正在使用以下主題中提供的解決方案來檢查我不擁有的WebSockets流量（消息）（僅出於學習目的）：

• 以無法檢測的方式檢查WebSocket框架

• 通過原型監聽WebSocket連接

• 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：// ...”）。 我可以在控制台中看到我收到或發送的消息，但僅用於一個連接。.是否缺少某些內容？ 其他兩項服​​務是否可能有所不同，並禁止使用原型擴展技術？

ps為了避免可能的禁令或法律問題，我不會提供正在測試的Web資源的URL。

Answer 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 。 也許將來我會進一步調查：)