如何检测页面中使用的 JS 框架/库？

Posted 2023-02-22

【中文标题】如何检测页面中使用的 JS 框架/库？

【英文标题】：How to detect JS frameworks/libraries used in a page?

【发布时间】：2016-02-07 02:32:35

【问题描述】：

我希望能够检测页面使用的所有框架/库，以帮助了解何时动态生成内容等。

我下载并解压了两个 Chrome 扩展程序的源代码，Library Detector 和 Appspector。看起来他们只是简单地调用window.FUNCTION_NAME_HERE，例如：

'Backbone.js': function () 
  return window.Backbone && typeof(window.Backbone.sync) === 'function';
,
'Underscore.js': function () 
  return window._ && typeof(window._.identity) === 'function' &&
    window._.identity('abc') === 'abc';
,
'Spine': function () 
  return window.Spine;
,
'Angular': function () 
  return window.angular;
,
'Ning': function () 
  return window.ning;
,
'Zepto': function () 
  return window.Zepto;

等等

我有几个问题：

每个调用的框架（例如“Spine”、“angular”）的标识符是什么？有没有办法通过 AJAX 或其他方式检索这些信息，这样我就不必手动输入它们了？ 我真的不明白window.angular 是什么意思，除了它返回角度对象或无。我知道如果可以通过 window 对象访问 angular 函数，AngularJS 已经加载，但我不确定作为 window 的成员函数意味着什么。 为什么 Backbone 和 Underscore 的过程与其他的不同？您怎么知道该使用哪一个？ 我尝试在使用 React 的 Uber 主页上运行这两个扩展，但它们都没有检测到 React。当我尝试console.log(window) 时，也没有列出 React 对象。为什么会这样？在这些情况下我如何才能检测到框架？

【问题讨论】：

您的代码期望库被导出到全局空间，但事实并非如此。而如今，对于捆绑商来说，情况可能并非如此。

“为什么会这样，在这些情况下我如何才能检测到框架？” --- 自动它不太可能，至少容易可靠。

虽然我可以看到这个目标的用处，但我非常不确定是否真的有一种简单的方法可以检测大多数这些库的存在。与以前相比，javascript 库现在可以以许多不同的方式“存在”。诚然，将其作为浏览器扩展程序可能会提供一些普通页面脚本不具备的分析功能。

【参考方案1】：

您似乎误解了代码检测库的工作原理，当然这与理解 window 对象有关。

在浏览器 javascript 环境中，window 是全局对象。所有变量都定义为全局 window 对象的属性，除非它们是在带有 var 关键字的函数中定义的。

假设您访问一个使用 jQuery 库的页面，打开浏览器控制台并输入 jQuery。那应该用一个函数来响应，jQuery就是。本质上，jQuery 是一个在全局范围内定义的变量，它可以通过变量名作为变量使用，也可以作为 window 对象的属性使用：window.jQuery。

如果您将它们包含在<script> 标签中，默认情况下库所做的是将它们自己定义为全局变量。因此，使用 Backbone.js，您将为您定义 Backbone 全局变量，它可以作为 window.Backbone 使用，因为 window 是全局对象。

同样，Angular 会定义angular 全局变量，Zepto 会定义Zepto，以此类推。

因此，您应该能够通过其定义的全局变量检测任何库。

但需要注意的是，在现代 javascript 应用程序中，库不一定要注册全局变量。它们可以在该应用程序的范围（功能）内定义。出于这个原因，检查window.Libraryname 并不能保证页面没有使用这个库。事实上，在这种情况下检测库可能是一项非常困难的任务。

框架/库太多，因此您需要自己创建列表或找到维护该列表的任何人。然后，您将查看框架定义了哪些全局变量，因此您可以将它们作为该框架的标识符。 如上所述，angular 是全局变量，也可用作window.angular。如果您创建一个作用域angular 变量，例如function () var angular = "my angular"; ，您仍然可以使用window.angular 获得全局变量。 有可能该代码的维护者发现了两个或更多定义Backbone 全局变量的库。而且只有我们知道的 Backbone 包含 sync 函数。这可能是他们另外检查 Backbone.sync 是一个函数的原因。他们不能只检查Backbone.sync 函数而不首先检查Backbone，因为在非主干页面上会导致错误。 同样，对于 Underscore，可能有许多库定义了全局 _ 变量，因此我们可以通过检查其中一个工作方法来确定它是 Underscore 库。 如上所述，库不一定会定义全局变量，在这种情况下，您将无法自动检测到它们。例如，在现代 javascript 应用程序中，您可以将库用作 Browserify 或 RequireJS 的依赖项，在这种情况下，库很可能不会注册任何全局变量。

【讨论】：

我实际上正在寻找有关此问题的最新答案。