拦截网页中的 Fetch 和 XMLHttpRequest 请求方式方法

拦截网页中的 Fetch 和 XMLHttpRequest 请求，并捕获它们的响应体内容。通过这种方式，你可以在控制台中查看这些请求的响应数据，或者进一步处理这些数据（例如发送到后台或存储起来）。

以下是代码的逐行解释：

1. 整体结构

(function() {
  // 代码逻辑
})();

这是一个 立即执行函数表达式 (IIFE)，用于创建一个独立的作用域，避免变量污染全局环境。

2. 拦截 Fetch 请求

var originalFetch = window.fetch;
window.fetch = function() {
  return originalFetch.apply(this, arguments).then(response => {
    response.clone().text().then(body => {
      console.log("1024小神 Fetched body:", body);
      // 这里可以处理响应体内容，比如发送给后台或者存储起来
    });
    return response;
  });
};

解释：

1. 保存原始的 Fetch 方法：

   var originalFetch = window.fetch;
   

   将浏览器原生的 fetch 方法保存到 originalFetch 变量中，以便后续调用。

2. 重写 Fetch 方法：

   window.fetch = function() {
     return originalFetch.apply(this, arguments).then(response => {
       // 拦截逻辑
     });
   };
   

   重写 window.fetch 方法，使其在每次调用时执行自定义逻辑。

3. 克隆响应并读取响应体：

   response.clone().text().then(body => {
     console.log("1024小神 Fetched body:", body);
   });
   

   • response.clone()：克隆响应对象，因为响应体只能读取一次。
   • response.text()：将响应体解析为文本。
   • console.log：将响应体内容打印到控制台。

4. 返回原始响应：

   return response;
   

   确保原始的 fetch 调用不受影响，返回原始的响应对象。

3. 拦截 XMLHttpRequest 请求

var originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
  this.addEventListener("load", function() {
    console.log("1024小神 response:", this.responseText);
    // 这里可以处理响应体内容，比如发送给后台或者存储起来
  });
  originalXHROpen.apply(this, arguments);
};

解释：

1. 保存原始的 XMLHttpRequest.open 方法：

   var originalXHROpen = XMLHttpRequest.prototype.open;
   

   将浏览器原生的 XMLHttpRequest.prototype.open 方法保存到 originalXHROpen 变量中，以便后续调用。

2. 重写 XMLHttpRequest.open 方法：

   XMLHttpRequest.prototype.open = function() {
     // 拦截逻辑
     originalXHROpen.apply(this, arguments);
   };
   

   重写 XMLHttpRequest.prototype.open 方法，使其在每次调用时执行自定义逻辑。

3. 监听请求完成事件：

   this.addEventListener("load", function() {
     console.log("1024小神 response:", this.responseText);
   });
   

   • 当请求完成时（load 事件触发），打印响应体内容（this.responseText）到控制台。

4. 调用原始的 open 方法：

   originalXHROpen.apply(this, arguments);
   

   确保原始的 open 方法逻辑不受影响。

4. 代码的作用

• Fetch 拦截：

  • 每次调用 fetch 时，捕获响应体内容并打印到控制台。
  • 你可以进一步处理响应体内容，例如发送到后台或存储起来。

• XMLHttpRequest 拦截：

  • 每次调用 XMLHttpRequest 时，捕获响应体内容并打印到控制台。
  • 同样可以进一步处理响应体内容。

5. 示例输出

假设页面中有一个 Fetch 请求和一个 XMLHttpRequest 请求：

• Fetch 请求的响应体是 { "name": "1024小神" }。
• XMLHttpRequest 请求的响应体是 Hello, World!。

控制台输出：

1024小神 Fetched body: { "name": "1024小神" }
1024小神 response: Hello, World!

6. 注意事项

1. CORS 限制：
   • 如果目标网站启用了 CORS 保护，可能无法直接访问响应体。
2. 性能影响：
   • 拦截所有请求可能会影响页面性能，建议按需过滤。
3. 响应体类型：
   • response.text() 适用于文本类型的响应体。如果是 JSON 或二进制数据，可以使用 response.json() 或 response.blob()。

总结

这段代码通过重写 fetch 和 XMLHttpRequest 方法，实现了对网页请求的拦截和响应体内容的捕获。你可以在此基础上扩展功能，例如将捕获的数据发送到后台或存储起来。