javascript - 以不可检测的方式检查 WebSocket 帧

Question

如何在 Chrome 扩展程序或 Firefox 附加组件中读取网页的 WebSocket 帧，而页面无法检测到该帧？

Inspect WebSockets frames from a Chrome Dev Tools extension制定了一个类似的问题，但开发 NPAPI 插件不再有意义，因为它很快就会被删除。

Answer 1

拦截 WebSocket 数据很容易。只需在页面构造 WebSocket 之前执行以下脚本即可。此代码段对 WebSocket 构造函数进行猴子修补:创建新的 WebSocket 构造函数时，该代码段会订阅 message 事件，您可以从中对数据执行任何操作.

此代码段旨在与 native 代码无法区分，因此页面无法轻易检测到修改(但是，请参阅本文末尾的备注)。

(function() {
    var OrigWebSocket = window.WebSocket;
    var callWebSocket = OrigWebSocket.apply.bind(OrigWebSocket);
    var wsAddListener = OrigWebSocket.prototype.addEventListener;
    wsAddListener = wsAddListener.call.bind(wsAddListener);
    window.WebSocket = function WebSocket(url, protocols) {
        var ws;
        if (!(this instanceof WebSocket)) {
            // Called without 'new' (browsers will throw an error).
            ws = callWebSocket(this, arguments);
        } else if (arguments.length === 1) {
            ws = new OrigWebSocket(url);
        } else if (arguments.length >= 2) {
            ws = new OrigWebSocket(url, protocols);
        } else { // No arguments (browsers will throw an error)
            ws = new OrigWebSocket();
        }

        wsAddListener(ws, 'message', function(event) {
            // TODO: Do something with event.data (received data) if you wish.
        });
        return ws;
    }.bind();
    window.WebSocket.prototype = OrigWebSocket.prototype;
    window.WebSocket.prototype.constructor = window.WebSocket;

    var wsSend = OrigWebSocket.prototype.send;
    wsSend = wsSend.apply.bind(wsSend);
    OrigWebSocket.prototype.send = function(data) {
        // TODO: Do something with the sent data if you wish.
        return wsSend(this, arguments);
    };
})();

在 Chrome 扩展程序中，该代码段可以通过 content script 运行使用 run_at:'document_start'，请参阅 Insert code into the page context using a content script .

Firefox 还支持 content scripts ，同样的逻辑适用(使用 contentScriptWhen:'start')。

注意:前面的代码片段被设计为在页面其余部分之前执行时与 native 代码没有区别。检测这些修改的唯一(不寻常且脆弱的)方法是:

• 将无效参数传递给 WebSocket 构造函数，捕获错误并检查依赖于实现(特定于浏览器)的堆栈跟踪。如果堆栈帧比平时多一个，则构造函数可能被篡改(从页面的 Angular 来看)。

• 序列化构造函数。未修改的构造函数变为 function WebSocket() { [native code] }，而修补后的构造函数看起来像 function () { [native code] } (此问题仅存在于Chrome；在 Firefox 中，序列化是相同的)。

• 序列化 WebSocket.prototype.send 方法。由于该函数未绑定(bind)，对其进行序列化 (WebSocket.prototype.send.toString()) 会揭示非 native 实现。这可以通过重写 .send 的 .toString 方法来缓解，页面又可以通过与 Function.prototype.toString 的严格比较检测到该方法。如果您不需要发送的数据，请不要覆盖 OrigWebSocket.prototype.send。