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

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

引用

CSDN

1.

https://blog.csdn.net/weixin_44786530/article/details/146250102

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

整体结构

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

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

拦截 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 调用不受影响，返回原始的响应对象。

拦截 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 方法逻辑不受影响。

代码的作用

• Fetch 拦截：

• 每次调用 fetch 时，捕获响应体内容并打印到控制台。

• 你可以进一步处理响应体内容，例如发送到后台或存储起来。

• XMLHttpRequest 拦截：

• 每次调用 XMLHttpRequest 时，捕获响应体内容并打印到控制台。

• 同样可以进一步处理响应体内容。

示例输出

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

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

控制台输出：

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

注意事项

1. CORS 限制：

• 如果目标网站启用了 CORS 保护，可能无法直接访问响应体。

2. 性能影响：

• 拦截所有请求可能会影响页面性能，建议按需过滤。

3. 响应体类型：

• response.text() 适用于文本类型的响应体。如果是 JSON 或二进制数据，可以使用 response.json() 或 response.blob()。

总结

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