如何拦截网页中所有网络请求？含跨域脚本请求监测需求

首先明确：完全可行，但需要结合不同技术手段弥补Service Worker的局限性。

为什么Service Worker会漏抓请求？ #

Service Worker的拦截范围受限于以下规则：

• 只能拦截由当前注册域下的页面/资源发起的请求，跨域脚本如果是在其自身域名的上下文发起请求（比如https://otherdomain.com/somescript.js直接请求同域资源），这类请求不在你的https://example.com/域的Service Worker管辖范围内。
• 部分特殊请求（如fetch的no-cors模式请求、某些浏览器原生API发起的请求）可能绕过Service Worker拦截。

实现全请求监测的方案 #

1. 优化Service Worker的拦截逻辑 #

确保注册Service Worker时使用scope: '/'，并在Service Worker脚本中监听fetch事件时不做不必要的过滤：

self.addEventListener('fetch', (event) => {
  // 打印所有捕获到的请求
  console.log('拦截到请求:', event.request.url);
  // 直接转发请求，不修改响应
  event.respondWith(fetch(event.request));
});

这种方式能捕获当前域页面发起的所有请求，以及跨域脚本在当前页面上下文发起的跨域请求，但无法捕获跨域脚本在自身域名上下文发起的请求。

2. 页面全局注入请求钩子 #

在页面全局覆盖原生请求API（XMLHttpRequest、fetch、navigator.sendBeacon等），可以捕获所有在当前页面执行环境中发起的请求，不管脚本来自哪个域名：

// 覆盖fetch API
const originalFetch = window.fetch;
window.fetch = function(...args) {
  console.log('捕获fetch请求:', args[0]);
  return originalFetch.apply(this, args);
};

// 覆盖XMLHttpRequest
const originalXHR = XMLHttpRequest;
XMLHttpRequest = function() {
  const xhr = new originalXHR();
  const originalOpen = xhr.open;
  xhr.open = function(method, url) {
    console.log('捕获XHR请求:', method, url);
    originalOpen.apply(this, arguments);
  };
  return xhr;
};

3. DevTools协议（适合调试/自动化场景） #

如果是用于调试或自动化测试，可以使用浏览器DevTools协议（如Chrome DevTools Protocol），它能捕获浏览器发起的所有网络请求，不受同源策略限制，覆盖所有页面、iframe、脚本的请求行为。

总结 #

• 要覆盖所有需求场景，需要结合Service Worker（拦截当前域页面及同源资源的请求）和页面层API钩子（捕获页面上下文内所有脚本的请求调用）。
• 对于跨域脚本在自身域名上下文发起的请求，你无法通过当前域的代码捕获，除非能控制该跨域域名的Service Worker。

内容的提问来源于stack exchange，提问作者andynewman