脚本如何拦截处理请求数据

wen 实用脚本 2026-06-27 29

原理、实战与SEO优化指南

目录导读

脚本拦截请求的核心逻辑
拦截请求的常见场景（数据爬取、安全测试、用户体验优化）
关键技术实现（Fetch API拦截、XMLHttpRequest重写、Service Worker、Chrome扩展）
实操代码示例（拦截并修改POST请求体、重定向请求）
拦截处理中的陷阱与性能优化
问答环节（用户高频问题解答）
SEO优化建议（避免被搜索引擎视为恶意脚本）

脚本拦截请求的核心逻辑

脚本拦截请求,本质是在网络请求的“生命周期”中插入一道自定义的“检查站”，无论是浏览器端还是Node.js环境，主流思路都是通过Hook（钩子）机制捕获请求对象，然后决定是否放行、修改或返回模拟数据，在浏览器中，XMLHttpRequest和Fetch API都可以被拦截——通过重写它们的open()、send()方法，在请求发出前注入自定义逻辑。

脚本如何拦截处理请求数据

关键原理：

拦截点：一般位于请求即将发出前（pre-request）或响应返回后（post-response）。
操作权限：可以读取请求的URL、headers、body，甚至直接终止请求。
应用场景：广告屏蔽（如uBlock Origin）、自动填充表单、接口数据模拟（前端开发）。

拦截请求的常见场景

1 数据爬虫与反爬对抗

爬虫常通过拦截页面中的API返回数据,先解析再渲染为结构化内容，例如拦截fetch('/api/list')，提前取出JSON响应，但网站也会通过检测User-Agent、X-Requested-With或检查请求来源（Referer）来反爬。

2 前端性能优化

拦截图片或视频资源请求,改为加载压缩版或占位图。

if (request.url.includes('.jpg')) {
  return new Response('...placeholder...', { headers: { 'Content-Type': 'image/jpeg' } } );
}

3 安全测试与接口调试

安全工程师常拦截请求修改JWT令牌或参数,测试后端是否校验权限，例如用Burp Suite配合代理脚本拦截，但本文聚焦前端脚本级拦截。

关键技术实现

1 方法一：重写XMLHttpRequest（兼容旧浏览器）

// 保存原始方法
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
  console.log(`拦截XHR请求: ${method} ${url}`);
  // 可以修改url，例如添加追踪参数
  if (url.includes('/api')) {
    url = url + '?track=true';
  }
  return originalOpen.call(this, method, url, async, user, password);
};

注意：需要覆盖所有方法（send、getAllResponseHeaders），且需处理异步问题。

2 方法二：拦截Fetch API（现代浏览器）

const { fetch: originalFetch } = window;
window.fetch = async (input, init) => {
  const request = new Request(input, init);
  console.log(`拦截Fetch: ${request.url}`);
  // 修改请求体示例（仅针对POST）
  if (request.method === 'POST' && request.url.includes('/submit')) {
    const body = await request.text();
    const modifiedBody = body.replace('password', '***');
    // 创建新请求
    return originalFetch(request.url, {
      ...init,
      body: modifiedBody
    });
  }
  return originalFetch(request);
};

3 方法三：Service Worker（持久化拦截）

Service Worker是浏览器后台脚本，可以拦截所有页面发起的请求（需注册并监听activate、fetch事件）。

// sw.js
self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  if (url.pathname === '/api/data') {
    // 直接返回假数据
    event.respondWith(new Response(JSON.stringify({ code: 200, data: [] })));
  }
});

优势：即使页面刷新，规则依然生效；劣势：仅支持HTTPS，且第一次安装后需手动启用。

4 方法四：浏览器扩展（如Chrome Manifest V3）

通过webRequest或declarativeNetRequest API拦截，例如Chrome扩展的background.js：

chrome.declarativeNetRequest.updateDynamicRules({
  addRules: [{
    id: 1,
    priority: 1,
    action: { type: 'block' },
    condition: {
      urlFilter: '||example.com/blocked-path',
      resourceTypes: ['xmlhttprequest']
    }
  }]
});

这种方法适合广告拦截类工具,但用户需安装扩展。

完整示例：拦截并修改POST请求数据

假设有一个表单提交请求,需要拦截并自动给Body添加_token参数（防CSRF自动填充）。

// 1. 保存原始fetch
const originalFetch = window.fetch;
// 2. 替换fetch
window.fetch = async (input, init) => {
  // 只对POST/API请求处理
  if (init && init.method === 'POST' && input.includes('/api/form')) {
    // 解析原始body（假设是JSON格式）
    let body = {};
    try {
      body = JSON.parse(init.body);
    } catch(e) {
      body = {};
    }
    // 注入额外参数
    body._token = 'abc123';
    const newBody = JSON.stringify(body);
    // 发起修改后的请求
    return originalFetch(input, {
      ...init,
      body: newBody,
      headers: {
        ...init.headers,
        'Content-Type': 'application/json'
      }
    });
  }
  return originalFetch(input, init);
};

注意事项：

如果body本身不是JSON（如FormData），需要额外处理。
某些网站会通过Content-Length校验，修改后需重新计算。

拦截处理中的陷阱与性能优化

1 常见陷阱

循环调用：拦截函数内再次调用fetch会触发同一拦截器，导致栈溢出，应始终调用原始函数。
响应处理：拦截后若直接返回新Response，需确保状态码、Headers正确还原，否则浏览器可能报CORS错误。
异步丢失：await处理请求体时，如果原请求体是流（Stream），读取后无法重新发送（流只能消费一次），解决方案是克隆请求：request.clone()。

2 性能优化建议

只拦截必要的URL模式（如通过正则过滤）。
避免在每次请求时创建大量对象（例如每次new Request()），可缓存Request实例。
Service Worker中拦截资源请求时，优先使用respondWith而非fetch(event.request)，后者会重新发起网络请求。

问答环节

Q1：拦截请求会影响搜索引擎抓取吗？
是的，如果脚本在首页拦截了搜索引擎爬虫（如Googlebot）的资源请求（如CSS、JS），可能导致页面渲染异常，建议在服务端判断User-Agent，或仅在开发环境启用拦截。

Q2：如何拦截HTTPS页面中的脚本？
浏览器扩展（Manifest V3）支持拦截HTTPS请求，但需注意，默认情况下拦截localhost不生效，需声明host_permissions。

Q3：拦截请求后，如何恢复原始响应？
调用原始函数例如originalFetch(request)，如果要“回退”到被拦截前的状态，需要在拦截前备份原始函数，并确保不修改请求对象。

Q4：拦截请求是否违反网站政策？
用于自动化脚本（如填表、爬虫）可能违反服务条款，安全测试应在授权范围内进行。

SEO优化建议：避免脚本被视为恶意

如果你的网站使用脚本拦截请求（例如用于统计或用户体验优化），

不要拦截搜索引擎爬虫：在robots.txt中允许搜索引擎访问关键资源。
保持页面核心内容可访问：假设拦截失败时，应有降级方案（如直接输出默认数据）。
使用rel="nofollow"避免传递权重：如果拦截脚本生成的伪链接。
延迟加载且非阻塞：将拦截脚本设为async，避免影响页面首屏加载时间。
避免动态修改稳定URL：搜索引擎不喜欢发现“同一URL时而返回数据时而返回空白”。

通过重写XMLHttpRequest、Fetch、启用Service Worker或开发浏览器扩展，都可以实现灵活的请求拦截，但需注意循环调用、流消费等陷阱，在实际项目中，建议优先使用Service Worker（长期稳定），其次是Fetch拦截（现代浏览器兼容），切勿将拦截功能用于违反平台规则的操作，并做好SEO兼容。