能否通过静态文件植入脚本实现HTTP请求的捕获与修改？

1. 拦截 XMLHttpRequest（XHR）请求 #

大部分传统前端项目依赖XHR发起请求，通过重写其open方法可在请求发送前修改URL：

// 保存原始XHR的open方法
const originalXHROpen = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, url, ...args) {
  // 将目标URL替换为缓存服务器的转发地址
  const modifiedUrl = `https://www.our-server.com/reroute?url=${encodeURIComponent(url)}`;
  // 调用原始方法并传入修改后的URL
  return originalXHROpen.call(this, method, modifiedUrl, ...args);
};

2. 拦截 Fetch API 请求 #

现代项目常用Fetch API，同样可以通过重写window.fetch实现拦截：

// 保存原始的fetch方法
const originalFetch = window.fetch;

window.fetch = function(resource, options) {
  let modifiedResource = resource;
  // 处理字符串类型的请求地址
  if (typeof resource === 'string') {
    modifiedResource = `https://www.our-server.com/reroute?url=${encodeURIComponent(resource)}`;
  }
  // 处理Request对象类型的请求
  else if (resource instanceof Request) {
    modifiedResource = new Request(
      `https://www.our-server.com/reroute?url=${encodeURIComponent(resource.url)}`,
      resource
    );
  }
  // 调用原始fetch方法
  return originalFetch.call(window, modifiedResource, options);
};

3. 拦截DOM中动态加载的资源（如img、script、link） #

对于通过DOM操作动态创建的图片、脚本、样式等资源，可使用MutationObserver监听DOM变化，在资源加载前修改地址：

// 创建DOM变化观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 遍历所有新增的DOM节点
    mutation.addedNodes.forEach((node) => {
      // 处理图片资源
      if (node.tagName === 'IMG' && node.src) {
        node.src = `https://www.our-server.com/reroute?url=${encodeURIComponent(node.src)}`;
      }
      // 处理脚本资源
      if (node.tagName === 'SCRIPT' && node.src) {
        node.src = `https://www.our-server.com/reroute?url=${encodeURIComponent(node.src)}`;
      }
      // 处理样式/字体等link资源
      if (node.tagName === 'LINK' && node.href) {
        node.href = `https://www.our-server.com/reroute?url=${encodeURIComponent(node.href)}`;
      }
    });
  });
});

// 启动观察者，监听整个文档的节点新增事件
observer.observe(document, {
  childList: true,
  subtree: true
});

注意事项 #

• 上述方案无法覆盖所有请求场景，比如navigator.sendBeacon、WebSockets等特殊请求，需单独处理对应API；
• 务必将拦截脚本放在页面其他JS代码之前执行（比如放在<head>最顶部），避免错过页面初始化阶段的请求；
• 必须用encodeURIComponent处理原始URL，防止特殊字符导致参数解析错误；
• 若缓存服务器存在跨域问题，需配置CORS规则允许客户端访问。

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