在 HTML 页面中通过 Hook fetch 拦截请求时，如果发现 Blob（或其他特殊上下文）发出的 fetch 请求未被拦截，可能是由于以下原因及解决方案：
1. Hook 时机问题
- 原因：如果在
Blob的代码执行前未完成fetch的 Hook，则无法拦截。 - 解决方案：
- 尽早注入脚本：确保 Hook 代码在页面加载的最初阶段执行（如通过
<head>中的内联脚本或最早加载的外部脚本）。
<head> <script> // HOOK fetch 的代码 const originalFetch = window.fetch; window.fetch = function(...args) { console.log('Intercepted fetch:', args); return originalFetch.apply(this, args); }; </script> </head> - 尽早注入脚本：确保 Hook 代码在页面加载的最初阶段执行（如通过
2. Blob URL 的独立作用域
- 原因：通过
Blob创建的代码可能运行在独立的上下文中（如动态生成的iframe或Worker），与主页面的window隔离。 - 解决方案：
- 直接修改 Blob 内容：在生成
Blob时手动替换其中的fetch。
const blobCode = ` // Blob 中的代码 fetch('https://example.com').then(response => response.json()); `; const modifiedCode = blobCode.replace('fetch(', 'window.parent.hookedFetch('); // 假设主页面暴露了 hookedFetch const blob = new Blob([modifiedCode], { type: 'application/javascript' });- 劫持全局构造函数：如果是通过
<script>标签加载的Blob URL，可以劫持动态脚本的内容。
- 直接修改 Blob 内容：在生成
3. Service Worker / Web Worker
- 原因：如果请求来自 Service Worker、Web Worker，它们有独立的全局对象，无法直接访问主线程的 Hook。
- 解决方案：
- 在 Worker 中单独 Hook：
// Worker.js self.fetch = new Proxy(self.fetch, { apply(target, thisArg, args) { console.log('Worker fetch intercepted:', args); return Reflect.apply(target, thisArg, args); } });- 通信到主线程：通过
postMessage将请求信息传递到主线程处理。
4. iframe沙盒环境
- 原因：某些情况下，动态创建的
<iframe>可能因同源策略或沙盒限制无法继承主页面的 Hook。 - 解决方案：
- 同源 iframe:
- Hook iframe内的
fetch:
const iframe = document.createElement('iframe'); iframe.onload = () => { iframe.contentWindow.fetch = window.fetch; //共享Hook后的fetch }; - Hook iframe内的
- 跨域 iframe:
-无完美方案，需服务端配合（如CORS或代理）。
- 同源 iframe:
5. Native Code / Extension
- 原因:浏览器插件或原生代码(如WebAssembly)可能绕过JavaScript层的Hook. -排查: 检查是否有非JS发起的请求(如扩展的background script).
###验证步骤: 1.确认你的Hook是否对普通请求有效:
//测试普通请求是否能被拦截
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(res=>res.json()).then(console.log);
2检查Blob请求是否运行在独立上下文(如开发者工具中查看Network请求的Initiator来源)。
3尝试在Blob生成后手动打印其内容确认是否包含原始fetch调用.
如果需要更具体的帮助请提供相关代码片段!
内容由零声教学AI助手提供，问题来源于学员提问
