如何通过Chrome扩展拦截并阻止iframe内发起的特定XHR请求

解决方案 #

你当前代码无法拦截iframe内XHR请求的核心原因是webRequest监听器的types配置仅覆盖了页面主框架、子框架本身的加载请求，没有匹配XHR类请求的资源类型。

1. 修正监听器配置 #

将types字段新增xmlhttprequest类型，如果还需要拦截fetch请求可额外增加fetch类型，基础修正代码如下：

chrome.webRequest.onBeforeRequest.addListener(
    () => { 
      console.log('Request will be blocked here, if request is interceped');
      return {cancel: true}
    }, 
    { 
      urls: ['*://*/*'], // 可替换为你要拦截的特定接口规则
      types: ['xmlhttprequest', 'fetch'] // 新增XHR和Fetch类型
    }, 
    ['blocking']
);

如果仅需要拦截iframe内的XHR、不拦截主框架的请求，可通过回调参数的frameId字段做过滤：frameId为0代表主框架发起的请求，非0则是子框架/iframe发起的请求，代码示例如下：

chrome.webRequest.onBeforeRequest.addListener(
    (details) => { 
      // 只拦截非主框架（iframe）发起的请求
      if (details.frameId !== 0) {
        console.log('Blocked iframe XHR request:', details.url);
        return {cancel: true}
      }
      return {cancel: false}
    }, 
    { 
      urls: ['*://*/*'],
      types: ['xmlhttprequest', 'fetch']
    }, 
    ['blocking']
);

2. 检查扩展Manifest配置 #

要保证拦截功能生效，需要在manifest.json中配置对应权限：

• Manifest V2 配置示例：

{
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>" // 替换为你要拦截的站点域名，或保留<all_urls>匹配所有站点
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

• Manifest V3 说明：
  Chrome V3版本中chrome.webRequest的blocking能力仅对企业部署的扩展开放，公开发布的普通扩展建议改用chrome.declarativeNetRequest API实现拦截，规则配置默认会覆盖所有iframe上下文中的请求，无需额外指定框架过滤规则。

内容的提问来源于stack exchange，提问作者Vaibhav