Web前端►Extension►WebExtension

browser.webRequest.onHeadersReceived

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/03/08/browser-webRequest-onHeadersReceived/

摘要

本文主要讲述了：

  1. 触发时机
  2. 许可配置
  3. 监听网络响应
  4. 修改网络响应头
  5. Chrome

正文

触发时机

在收到网络响应头时触发

许可配置

  • webRequest
  • host

监听网络响应

示例：监听来自*://*.baidu.com/*的所有网络响应

1
2
3
4
5
6
7
8
9
function callback(requestDetails) {
  console.log(requestDetails);
}

browser.webRequest.onHeadersReceived.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['responseHeaders']
);

可以通过配置筛选器精确地筛选需要监听的请求类型。

示例：监听来自*://*.baidu.com/*的所有图片网络响应

1
2
3
4
5
6
7
8
9
function callback(requestDetails) {
  console.log(requestDetails);
}

browser.webRequest.onHeadersReceived.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'], types: ['image'] },
  ['responseHeaders']
);

修改网络响应头

修改网络响应需要额外申请webRequestBlocking许可

示例：同步修改Set-Cookie响应头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function callback(requestDetails) {
  console.log(requestDetails);
  requestDetails.responseHeaders.push({
    name: 'Set-Cookie',
    value: 'username=jsweibo',
  });
  return {
    responseHeaders: requestDetails.responseHeaders,
  };
}

browser.webRequest.onHeadersReceived.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking', 'responseHeaders']
);

示例：异步修改Set-Cookie响应头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function callback(requestDetails) {
  console.log(requestDetails);
  return new Promise((resolve) => {
    setTimeout(() => {
      requestDetails.responseHeaders.push({
        name: 'Set-Cookie',
        value: 'username=jsweibo',
      });
      resolve({
        responseHeaders: requestDetails.responseHeaders,
      });
    }, 3e3);
  });
}

browser.webRequest.onHeadersReceived.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking', 'responseHeaders']
);

Chrome

注意：

  1. 从 Chrome 72 版本开始，若要读取、修改或移除Set-Cookie响应头，必须在extraInfoSpec中配置extraHeaders

示例：移除Set-Cookie响应头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function callback(requestDetails) {
  const headers = [];
  requestDetails.responseHeaders.forEach(function (item) {
    const headerName = item.name.toLowerCase();
    if (headerName !== 'set-cookie') {
      headers.push(item);
    }
  });
  return {
    responseHeaders: headers,
  };
}

chrome.webRequest.onHeadersReceived.addListener(
  callback,
  { urls: ['*://*.baidu.com/*'] },
  ['blocking', 'responseHeaders', 'extraHeaders']
);

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/03/08/browser-webRequest-onHeadersReceived/

本文对你有帮助？请支持我

支付宝
微信