F12 调试常用 Hook 脚本

1.hook debugger 


var _constructor = constructor;
Function.prototype.constructor = function(s) {
    if (s == "debugger") {
        console.log(s);
        return null;
    }
    return _constructor(s);
}

//去除无限debugger
Function.prototype._constructor_back = Function.prototype.constructor ;
Function.prototype.constructor = function() {
    if(arguments && typeof arguments[0]==='string'){
        //alert("new function: "+ arguments[0]);
        if( "debugger" === arguments[0]){
            // arguments[0]="consoLe.Log(\"anti debugger\");";
            //arguments[0]=";";
            return
        }
    }
    return Function.prototype._constructor_back.apply(this,arguments);
};

var _Function = Function;
Function = function(s){
    if(s == "debugger"){
        console.log(s);
        return null;    
    }
    return _Function(s);
}

2.hook cookie

window.cbb_cook = document.cookie;
Object.defineProperty(document, "cookie",{
    get:()=>{
        return window.cbb_cook  
    },
    set:(x)=>{
        debugger;
        window.cbb_cook = x    
    }
})

(function(){
    var cookieTemp = "";
    Object.defineProperty(document, "cookie",{
        get: function(){
            return cookieTemp; 
        },
        set: function(val){
            console.log("Hook捕获到cookie设置->", val)
            debugger;
            cookieTemp = val;
            return val;    
        }
    });
})();

<think>我们被要求回答如何在浏览器中hook WebSocket进行调试或拦截。根据引用[1]和引用[3],我们知道Hook技术可以用于拦截和修改WebSocket的行为。引用[3]还提供了一些Hook脚本的示例,我们可以参考这些示例来编写WebSocket的Hook脚本。 WebSocket Hook的主要目的是在WebSocket连接建立、发送消息、接收消息等关键节点插入我们的代码,以便监控或修改数据。 以下是实现WebSocket Hook的几种方法: ### 方法一:重写WebSocket构造函数 这是最常用的方法,通过重写原生的WebSocket构造函数,以便在创建WebSocket实例时注入我们的逻辑。 ```javascript // 保存原生WebSocket const NativeWebSocket = window.WebSocket; // 重写WebSocket window.WebSocket = function(url, protocols) { // 创建实例 const ws = protocols ? new NativeWebSocket(url, protocols) : new NativeWebSocket(url); // 可以在这里添加事件监听或修改方法 // 例如,拦截send方法 const originalSend = ws.send; ws.send = function(data) { console.log('发送消息:', data); // 可以修改data后再发送 originalSend.call(ws, data); }; // 拦截onmessage ws.addEventListener('message', function(event) { console.log('收到消息:', event.data); // 可以修改event.data,但注意event是只读的,所以通常我们无法直接修改,但可以重新触发一个新事件? // 实际上,我们可以在收到消息后先处理,再传递给原来的事件监听器,但需要重新实现事件派发 }); // 还可以监听其他事件,如open, close, error ws.addEventListener('open', function(event) { console.log('WebSocket连接已打开'); }); return ws; }; // 恢复原生的WebSocket(如果需要) // window.WebSocket = NativeWebSocket; ``` ### 方法二:使用Proxy代理 ES6的Proxy可以更精细地控制WebSocket实例的行为。 ```javascript const NativeWebSocket = window.WebSocket; window.WebSocket = function(url, protocols) { let ws; if (protocols) { ws = new NativeWebSocket(url, protocols); } else { ws = new NativeWebSocket(url); } // 创建代理 const wsProxy = new Proxy(ws, { get: function(target, prop) { // 拦截send方法 if (prop === 'send') { return function(data) { console.log('发送消息:', data); // 修改数据 // data = modifyData(data); return target[prop](data); }; } // 其他属性或方法 return target[prop]; } }); // 同样可以添加事件监听 ws.addEventListener('message', function(event) { console.log('收到消息:', event.data); }); return wsProxy; }; ``` ### 方法三:使用专门的Hook库 如果项目允许,可以使用现有的Hook库,例如`ws-hook`等。但通常这类库也是基于上述原理。 ### 调试技巧 1. **在关键点添加`debugger`语句**:例如,在发送消息前或接收到消息时触发断点,方便调试。 ```javascript ws.send = function(data) { debugger; // 触发断点 originalSend.call(ws, data); }; ``` 2. **修改数据**:在发送或接收时,可以修改数据。注意,修改发送数据可以直接在send方法中替换;修改接收数据则需要更复杂的处理,因为事件对象是只读的,可能需要替换整个事件监听器。 3. **记录日志**:将WebSocket通信的数据记录到控制台或发送到服务器。 ### 注意事项 - **时机**:Hook脚本必须在目标WebSocket实例创建之前执行,因此通常需要将脚本放在页面最顶部(如通过浏览器扩展注入、Tampermonkey脚本等)。 - **兼容性**:Proxy方法在较新的浏览器中支持,如果考虑兼容性,建议使用方法一。 - **性能**:Hook可能会影响WebSocket的性能,特别是在大量数据时。 ### 实际应用场景 - **调试**:在开发中监控WebSocket通信。 - **逆向工程**:分析第三方网站的WebSocket协议。 - **安全测试**:修改WebSocket数据以测试应用的安全性。 ### 示例:使用Tampermonkey脚本进行Hook 我们可以编写一个Tampermonkey脚本,在页面加载前注入Hook代码: ```javascript // ==UserScript== // @name WebSocket Hook // @namespace http://tampermonkey.net/ // @version 0.1 // @description Hook WebSocket for debugging // @author You // @match *://*/* // @run-at document-start // @grant none // ==/UserScript== (function() { 'use strict'; const NativeWebSocket = window.WebSocket; window.WebSocket = function(url, protocols) { // ... 同上,插入Hook逻辑 }; })(); ``` ### 引用说明 以上方法参考了引用[1]和引用[3]中提到的Hook技术[^1][^3]。 ### 相关问题 1. 如何防止网站检测到WebSocket被Hook? 2. 除了WebSocket,还有哪些通信方式可以Hook? 3. 如何Hook WebSocket的二进制消息?</think>### 浏览器中 Hook WebSocket 的完整指南 在浏览器中 Hook WebSocket 可以实现对 WebSocket 通信的监控、调试和修改,常见于前端开发调试、协议分析和逆向工程场景。以下是多种实现方法: #### 方法一:重写 WebSocket 构造函数(推荐) ```javascript // 保存原生 WebSocket 引用 const NativeWebSocket = window.WebSocket; // 重写 WebSocket 构造函数 window.WebSocket = function(url, protocols) { // 创建实际 WebSocket 实例 const ws = new NativeWebSocket(url, protocols); // Hook send 方法 const originalSend = ws.send; ws.send = function(data) { console.log("[WebSocket Hook] 发送数据:", data); // 可在此修改发送数据 // const modifiedData = modifyData(data); originalSend.call(this, data); }; // Hook 消息接收 ws.addEventListener('message', function(event) { console.log("[WebSocket Hook] 接收数据:", event.data); // 可在此修改接收数据 // event.data = modifyReceivedData(event.data); }); // Hook 其他事件 ['open', 'close', 'error'].forEach(eventType => { ws.addEventListener(eventType, (e) => { console.log(`[WebSocket Hook] 事件: ${eventType}`, e); }); }); return ws; }; ``` #### 方法二:使用 Proxy 代理 ```javascript const NativeWebSocket = window.WebSocket; window.WebSocket = new Proxy(NativeWebSocket, { construct(target, args) { const ws = new target(...args); return new Proxy(ws, { get(obj, prop) { if (prop === 'send') { const originalSend = obj.send; return function(data) { console.log("[Proxy Hook] 发送数据:", data); return originalSend.call(this, data); }; } return obj[prop]; } }); } }); ``` #### 方法三:使用浏览器扩展注入 通过 Tampermonkey 或浏览器扩展在页面加载前注入 Hook 代码: ```javascript // ==UserScript== // @name WebSocket Hook // @namespace http://your-namespace/ // @version 1.0 // @description Hook WebSocket communications // @match *://*/* // @run-at document-start // @grant none // ==/UserScript== (function() { 'use strict'; const NativeWebSocket = window.WebSocket; window.WebSocket = function(url, protocols) { // 同方法一实现... }; })(); ``` #### 方法四:使用 DevTools 断点调试 1. 打开 Chrome DevTools (F12) 2. 进入 **Sources** 选项卡 3. 在 **Event Listener Breakpoints** 中展开 **WebSocket** 4. 勾选 **onopen**, **onmessage**, **onerror**, **onclose** 5. 当 WebSocket 事件触发时会自动暂停执行[^3] #### 方法五:Hook 特定框架的 WebSocket 实现 ```javascript // 示例:Hook Socket.io const originalEmit = io.Socket.prototype.emit; io.Socket.prototype.emit = function(event, ...args) { console.log(`[Socket.io Hook] 事件: ${event}`, args); return originalEmit.apply(this, [event, ...args]); }; ``` ### 调试技巧与工具 1. **数据修改示例**: ```javascript ws.send = function(data) { if (data.includes('sensitive')) { data = data.replace('sensitive', 'modified'); } originalSend.call(this, data); }; ``` 2. **使用 Wireshark 配合调试**: - 过滤条件:`websocket` - 可查看原始帧数据,与 Hook 结果对比验证 3. **Chrome 内置监控**: - 访问 `chrome://net-export` 记录网络活动 - 使用 https://netlog-viewer.appspot.com 分析导出的日志 ### 注意事项 1. **注入时机**:Hook 代码必须在 WebSocket 实例化前执行(建议在 `<head>` 顶部或通过 `document-start` 注入) 2. **二进制数据处理**:当处理 `ArrayBuffer` 或 `Blob` 类型数据时需转换: ```javascript const decoder = new TextDecoder(); const textData = decoder.decode(event.data); ``` 3. **避免死循环**:在 Hook 函数中避免调用自身导致递归 4. **生产环境**:仅用于调试,正式环境应移除 Hook 代码 ### 实际应用场景 1. **实时通信调试**:监控聊天应用消息流 2. **游戏协议分析**:解析游戏中的实时操作指令 3. **安全测试**:检测 WebSocket 通信中的敏感数据泄露 4. **性能优化**:分析 WebSocket 消息大小和频率 > 引用说明:上述 Hook 方法参考了逆向工程中常用的函数劫持技术[^1]和 WebSocket 调试实践[^3]。 ### 相关问题 1. 如何防止网站检测到 WebSocket 被 Hook? 2. 如何 Hook 二进制格式的 WebSocket 消息? 3. 有哪些现成的工具可以监控 WebSocket 通信? 4. WebSocket Hook 与 HTTP 抓包工具有何区别?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coder.Ren

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值