时间戳

首页 > 解决方案 > chrome 扩展中的 POST 请求数据和地址栏更改

javascript - chrome 扩展中的 POST 请求数据和地址栏更改

问题描述

我正在尝试制作一个 chrome 扩展，它将捕获 GET 和 POST 请求和参数，并通过调用带有 url 和参数的 api 来评估 XSS 漏洞。起初我尝试 chrome.webRequest.onBeforeRequest.addListener 了事件监听器，当我点击地址栏中的 url 时，它会为网站的每个组件捕获大量 GET 请求。这对我的 api 服务器来说负载太大了。所以我决定捕获地址栏内容，因为 GET 参数在那里也是可见的。为了捕获 POST 请求，我仍在使用 chrome.webRequest.onBeforeRequest.addListener. 现在我要做的是： 1. 默认情况下，我的扩展程序应该只检查地址栏内容 2. 当在扩展程序弹出 html 中单击一个按钮时，只有我会捕获 POST 请求 最好的方法是什么？另外，有没有办法过滤 GET 请求捕获，以便它只捕获第一个 url 请求而不捕获后续组件请求？我觉得，chrome.webRequest.onBeforeRequest.addListener如果不是为了捕获不必要的请求，使用它是非常有效的。

标签： javascriptgoogle-chrome-extensionevent-handling

解决方案

您可以过滤侦听器type以将其限制在主文档和框架中：

chrome.webRequest.onBeforeRequest.addListener(details => {
  // do something with details.url
}, {
  types: ['main_frame', 'sub_frame'],
  urls: ['<all_urls>'],
});

在您的弹出窗口中，您可以显示一个复选框来切换该功能。
复选框的点击监听器会将状态保存到存储中：

document.querySelector('input[type=checkbox]').onclick = e => {
  chrome.storage.local.set({watchPost: e.target.checked});
};

后台脚本将监听存储的变化并切换监听器：

chrome.storage.local.get('watchPost', _ => {
  toggle(_.watchPost);
});

chrome.storage.onChanged.addListener(({watchPost}) => {
  if (watchPost) {
    toggle(watchPost.newValue);
  }
});

function toggle(state) {
  const event = chrome.webRequest.onBeforeRequest;
  if (state) {
    event.addListener(onPost, {urls: ['<all_urls>']});
  } else {
    event.removeListener(onPost);
  }
}

function onPost(details) {
  if (details.method === 'POST') {
    // ..........
  }
}

您还可以将侦听器限制为一个选项卡，请参阅文档。请注意，重新注册相同的函数引用将不起作用：您需要先手动调用 removeListener，然后使用新过滤器调用 addListener。

推荐阅读