拦截脚本加载

Question

我需要的是钩/拦截其他外部JS负载。我可以把js放在文档的任何地方。

示例：

<script src="hook.js"></script>
<script src="a.js"></script>
<script src="b.js"></script>

Hook.js应该拦截a.js和b.js。问题是，在执行hook.js时，我看不到其他脚本(document.scripts只包含hook.js)，文档就绪事件也太晚了(执行脚本a.js和b.js )。

在执行之前，是否有任何方法“查看”其他脚本标记？谢谢你的帮助

编辑

1. 我需要在hook.js中做任何“魔术”，而不用动(静态)其他HTML。
2. 无jQuery

Answer 1

值得注意的是：https://stackoverflow.com/a/59424277/2016831您可以使用MutationObserver来查看哪些元素正在添加到DOM中，当它们被添加时，只需更改源代码，或者如果它引用了另一个URL，只需将其重定向到您自己的服务器上，而不是使用原始URL作为get参数，然后以这种方式返回修改过的代码。

基于上述答案，您可以这样做：

​

<script>
new MutationObserver((m, o) => {
  let potentialScript = document.querySelector("script + script");
  console.log(potentialScript.textContent);
  if(potentialScript) {
    o.disconnect();
    potentialScript
    .textContent = 
    potentialScript
    .textContent
    .replace(
      "})()",
      `
        window.wow = mySecretMethod;
        })()
      `
    );
    
    
  }
}).observe(
  document.body,
  {
    childList:1
  }
);

</script>

<script>
(function() {
  let mySecretMethod = () => {
    //does a bunch of evil secret stuff
    console.log("HA!");
  };
})();

wow()
</script>

<script>
console.log(wow())
</script>

​

或者，您可以使用chrome扩展重定向HTTP请求，有关更多信息，请参见https://stackoverflow.com/a/61202516/2016831

Answer 2

如果我明白你想做的正确的话.

如果您可以控制脚本A和B的加载方式，最好的方法是将它们放在与当前页面相同的域上(可能通过代理)，通过AJAX加载文件，然后以这种方式插入钩子。像jQuery这样的库(如m.casey所建议的)将使AJAX的细节和脚本的执行变得非常简单。

否则，Javascript实际上无法与文档的解析进行交互(这就是导致在示例中加载脚本a和b的原因，以及需要修改什么以“拦截”脚本加载)，除非使用document.write来修改HTML流。当然，只有在同步加载(如示例代码中的hook.js )、加载到HTML而不是XHTML的情况下，如果之后可以放置第二个钩子来对修改后的HTML流进行后置处理，以及如果您确信HTML流不会脱离您的机制，这才能起作用。

例如..。

<script id="hook1">document.write("<"+"textarea id='capture'>");</script>
<script src="a.js"></script>
<script src="b.js"></script>
<script id="hook2">document.write("<"+"/textarea");</script>
<script id="hook3">doSomethingWith(document.getElementById("capture").value)</script>

请注意，这是一个巨大的黑客，您可能不应该这样做。

Answer 3

如果您使用的是jQuery，您可以让hook.js加载您希望拦截的脚本，如下所示：

$.getScript("a.js");
$.getScript("b.js");

这将动态地创建脚本标记，并且您将确信hook.js始终会继续执行a.js和b.js。