ZBLOG

如何拿到Worker中的self.fetch对象?

在 Web Worker 中获取原始的 self.fetch 对象有以下几种方法:


方法1:直接保存引用(推荐)

在覆盖 fetch 之前,先保存原始引用:

  1. // worker.js
  2. const originalFetch = self.fetch; // 提前保存原始 fetch
  3. // 覆盖 fetch
  4. self.fetch = async function(...args) {
  5. console.log('Hooked fetch:', args);
  6. return originalFetch.apply(this, args); // 调用原始 fetch
  7. };

方法2:通过 iframe 获取纯净的 fetch

如果 Worker 已经被第三方代码污染,可以通过动态创建 iframe 获取未修改的 fetch

  1. // worker.js
  2. function getOriginalFetch() {
  3. const iframe = document.createElement('iframe');
  4. document.body.appendChild(iframe);
  5. const pristineFetch = iframe.contentWindow.fetch;
  6. iframe.remove();
  7. return pristineFetch;
  8. }
  9. const originalFetch = getOriginalFetch(); // 获取浏览器原生 fetch

⚠️ 注意:此方法仅在主线程可用,Worker 中无法操作 DOM。


方法3:通过 Blob URL 创建纯净 Worker

创建一个新的、未被污染的 Worker 环境:

  1. // main.js(主线程代码)
  2. const pureWorkerCode = `
  3. self.postMessage(self.fetch.toString()); // 将原生 fetch 的源码传回
  4. `;
  5. const blob = new Blob([pureWorkerCode], { type: 'application/javascript' });
  6. const worker = new Worker(URL.createObjectURL(blob));
  7. worker.onmessage = (e) => {
  8. console.log('Original fetch:', e.data); // 得到原生 fetch 的函数定义
  9. };

方法4:通过 Service Worker

Service Worker 可以拦截所有网络请求,且通常不会被修改:

  1. // service-worker.js
  2. self.addEventListener('fetch', (event) => {
  3. console.log(event.request); // 可访问原始请求对象
  4. });

关键点总结

场景 可行方案
Worker尚未被污染 const originalFetch = self.fetch;
Worker已被第三方篡改 Blob URL / iframe(主线程)
需要全局拦截请求 Service Worker

如果目标是调试或分析请求,推荐使用 Chrome DevTools 的 Network面板,或直接监听 navigator.serviceWorker


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=23193

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?