JS实现网页抓包-拦截、请求托管以及修改响应数据

在JavaScript中，可以通过拦截网络请求和修改响应来实现抓包功能。以下是一个简单的示例，展示了如何使用fetch API和proxy对象来实现这一功能。

// 创建一个拦截器对象
const intercept = {
  request: new Promise(resolve => {
    intercept.onRequest = resolve;
  }),
  response: new Promise(resolve => {
    intercept.onResponse = resolve;
  })
};
 
// 创建代理处理器
const handler = {
  async fetch(req, evt) {
    // 拦截请求
    const request = evt.request.clone();
    intercept.onRequest(request);
 
    // 发送请求并获取响应
    const res = await fetch(request);
 
    // 拦截响应
    intercept.onResponse(res.clone());
 
    // 修改或不修改响应数据
    const modifiedResponse = new Response(res.body, res);
    return modifiedResponse;
  }
};
 
// 安装拦截器
self.addEventListener('fetch', evt => {
  evt.respondWith((async () => {
    return await handler.fetch(evt);
  })());
});
 
// 使用方法
// 监听请求和响应
intercept.request.then(request => {
  console.log('Request intercepted:', request);
});
 
intercept.response.then(response => {
  console.log('Response intercepted:', response);
});

在上述代码中，我们创建了一个拦截器对象intercept，它有两个Promise属性request和response，分别用于监听网络请求和响应。我们还定义了一个处理器对象handler，它包含一个fetch方法，该方法用于拦截请求并修改响应。

在实际使用时，你可以在intercept.request和intercept.response上监听请求和响应，并据此进行相应的处理。这个例子展示了如何在Service Worker中拦截和修改网络请求和响应，但实际上它可以用在任何需要网络拦截和处理的JavaScript环境中。