当前位置：首页 > news >正文

不止于Cookie：手把手教你用Fiddler Hook住任意Header与AJAX请求（附常用代码片段）

news 2026/5/26 22:17:06

不止于Cookie：手把手教你用Fiddler Hook住任意Header与AJAX请求（附常用代码片段）

在Web开发与安全测试领域，精准拦截和修改HTTP请求的能力往往能决定效率的边界。当传统开发者工具仅能被动查看网络请求时，Hook技术如同手术刀般切入请求生命周期，实现从观察到操控的质变。本文将聚焦Fiddler+JavaScript Hook组合技，突破常规抓包工具的限制，直击Authorization、X-CSRF-Token等关键Header的拦截篡改，以及AJAX请求的全链路监控。

1. Hook技术核心原理解析

Hook的本质是运行时劫持——在目标函数执行前后插入自定义逻辑。浏览器环境中，所有HTTP请求最终都会转化为XMLHttpRequest或fetch的调用，这为Hook提供了统一的切入点。

1.1 两种主流Hook实现方式对比

方法一：原型链重写（推荐用于Header拦截）

// 拦截setRequestHeader方法示例 const originalSetHeader = XMLHttpRequest.prototype.setRequestHeader; XMLHttpRequest.prototype.setRequestHeader = function(key, value) { if (key.toLowerCase() === 'authorization') { console.log(`[Hook] 捕获到Auth头: ${value}`); value = value.replace('Bearer', 'Hooked'); // 篡改Token } return originalSetHeader.apply(this, [key, value]); };

优势：

兼容性好（支持IE9+）
可捕获动态生成的Header
实时修改请求参数

方法二：`Object.defineProperty`（适合Cookie操作）

let cookieCache = ''; Object.defineProperty(document, 'cookie', { set: function(val) { if (val.includes('sessionid')) { console.log(`[Hook] 敏感Cookie设置: ${val}`); val = val + '; Secure'; // 自动添加安全标记 } cookieCache = val; return val; }, get: function() { return cookieCache; } });

适用场景：

需要监听属性读写双向操作
精细控制属性描述符（configurable/writable）

1.2 关键技术点拆解

技术指标	原型链重写	defineProperty
触发时机	方法调用时	属性读写时
性能影响	较低	中等（需代理getter/setter）
调试友好度	调用栈清晰	可能打断点困难
典型应用	Header修改、AJAX拦截	Cookie监控、DOM属性Hook

实战提示：现代网站常使用fetchAPI，需额外Hook：

const originalFetch = window.fetch; window.fetch = async function(...args) { const [input, init] = args; if (init?.headers?.get('X-Secret')) { console.log('[Hook] 捕获到秘密Header'); } return originalFetch.apply(this, args); };

2. Fiddler自动化Hook工作流搭建

2.1 环境配置四步法

安装Fiddler Classic（≥v5.0）
- 启用HTTPS解密（Tools > Options > HTTPS）
- 配置根证书信任

注入Hook脚本

使用FiddlerScript（Rules > Customize Rules）

static function OnBeforeRequest(oSession: Session) { if (oSession.uriContains("api.example.com")) { oSession.utilSetRequestBody( oSession.GetRequestBodyAsString() .Replace("original", "modified") ); } }

编程猫插件增强
- 将JS Hook代码粘贴至插件窗口
- 启用AutoResponder模拟异常响应
浏览器联动调试
- 配置代理为127.0.0.1:8888
- 配合Chrome DevTools的XHR/fetch Breakpoints

2.2 常见问题排错指南

Hook失效检查清单：
- 确认代码注入时机早于目标代码执行
- 检查网站是否使用WebWorker隔离环境
- 验证是否有CSP（Content Security Policy）限制
- 尝试在DOMContentLoaded事件前注入脚本

3. 实战：OAuth2.0令牌拦截与篡改

以下演示如何捕获并修改Authorization: Bearer令牌：

(function() { const originalOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method, url) { this.addEventListener('readystatechange', function() { if (this.readyState === 4) { const authHeader = this.getResponseHeader('Authorization'); if (authHeader) { console.log(`[Hook] 刷新令牌: ${authHeader}`); // 可在此处将令牌转发至自己的服务器 } } }); return originalOpen.apply(this, arguments); }; })();

安全测试典型场景：

令牌泄露检测（检查是否明文传输）
权限越权测试（修改user_id参数）
重放攻击模拟（重复使用过期令牌）

4. 高阶技巧：动态AJAX请求分析

针对单页应用（SPA）的异步请求监控方案：

4.1 请求/响应全链路Hook

const originalSend = XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.send = function(body) { const startTime = Date.now(); this.addEventListener('load', function() { console.table({ URL: this.responseURL, Status: this.status, Duration: `${Date.now() - startTime}ms`, RequestSize: body?.length || 0, ResponseSize: this.responseText?.length || 0 }); }); return originalSend.call(this, body); };

4.2 可视化监控面板

将上述数据通过WebSocket实时推送至监控界面，使用D3.js绘制：

请求时序图
异常状态码热力图
数据传输量趋势分析

5. 防御对策：如何检测和防范Hook

作为开发者，可采用以下反Hook策略：

// 检测XMLHttpRequest是否被篡改 if (XMLHttpRequest.prototype.setRequestHeader.toString() .includes('[native code]') === false) { console.warn('XHR方法已被Hook！'); } // 冻结关键对象 Object.freeze(XMLHttpRequest.prototype); Object.defineProperty(document, 'cookie', { configurable: false, writable: false });

企业级防护建议：