在JavaScript中检测网页上的抓取API请求

Question

背景：我正在使用Shopify ScriptTag，它允许我在店面上添加JavaScript文件。我只有脚本文件。

当前行为：有一个选项，“立即购买”，允许客户通过跳过添加到购物车直接结帐。当他们点击立即购买时，Shopify会向checkouts.json发送一个fetch（）POST请求以创建结帐。

问题：我需要在我自己的JavaScript文件中检测到这个“获取请求已经发生”。

self.addEventListener('fetch', event => {
    console.log("event happened");
});

我尝试过Fetch Event API，但它似乎只在Service Worker范围内工作。

有没有可能发现这个？

就像我们可以通过使用原型继承覆盖其open方法来检测XMLHttpRequest。

Answer 1

是的，您可以使用自己的函数覆盖window.fetch，该函数在运行您自己的代码之后（或之前）调用原始的window.fetch：

const nativeFetch = window.fetch;
window.fetch = function(...args) {
  console.log('detected fetch call');
  return nativeFetch.apply(window, args);
}

fetch('https://cors-anywhere.herokuapp.com/')
  .then(res => res.text())
  .then(text => console.log(text.split('\n')[0]));

Answer 2

const observer = new PerformanceObserver((list, obj) => {
  for (let entry of list.getEntries()) {
    if(entry.initiatorType === "fetch"){

      if(entry.name.indexOf("checkouts.json") !== -1){

        alert("got you!")

      } 

    }
  }
});

observer.observe({
  entryTypes: ["resource"]
});

使用性能观察器。感谢@ guest271314。