我想知道是否有一种方法可以跟踪某些特定 .js 或 .css 文件包含到网站中的确切路径，尤其是来自第三方脚本，例如广告商。
假设我们有网站 X。在此站点上，包含一个脚本 A.js。但是，此文件会加载 A1.js 和 A2.js。同时，该站点将 B.js 作为第三方文件加载，其中包含 B1.css。
问题来了:如何跟踪包含文件的路径，比如 X -> A.js -> (A1.js, A2.js) .
注释:
- 在异步世界中，不再可能跟踪发出的请求并按顺序对它们进行排序。
- 您不能查看
RefererHTTP 阅读器，因为它始终指向X。 - 最好是在 Chrome 开发工具 F12 中跟踪它。
最佳答案
您已经可以在 Chrome DevTools 中跟踪每个包含文件的路径。
为了实验，我在 127.0.0.42(可通过 127.0.0.42 访问)和 127.0.0.43(可访问来自 third.party.domain.tld)，所以这两个服务器都是隔离的。
网站 X 在 127.0.0.42 上运行，并且有一个过于简单的网页，代码如下:
<head>
<script src="js/A.js"></script>
<script src="http://third.party.domain.tld/js/B.js"></script>
</head>
它包括本地A.js 文件和来自第三方的B.js 文件。
A.js 文件具有与我们的 X 页面相同复杂级别的代码:
console.log("Hello from A.js!");
function include_script(source) {
var script = document.createElement("script");
script.src = source;
document.head.appendChild(script);
}
include_script("js/A1.js");
include_script("js/A2.js");
请注意，这里的第 7 行是附加脚本文件的行。
A1.js 和 A2.js 都有一行记录两条不同的消息到控制台。
托管在第三方服务器上的 B.js 文件包含以下代码:
console.log("Hello from B.js!");
function include_style(source) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = source;
document.head.appendChild(link);
}
include_style("http://third.party.domain.tld/css/B.css");
这会从第三方网站加载样式表。
现在打开 DevTools 并使用“网络”选项卡:
以红色突出显示的请求显示 A1.js 和 A2.js 加载由第 7 行 A.js 启动。
蓝色请求为B.js第8行发起的B.css加载。
绿色请求显示包含 (index) 中的 A.js 和 B.js -- 表示请求的索引页这些。
将鼠标悬停在每个资源的名称上以显示其原始位置。
单击启动器链接(A.js:7 或 (index))以显示触发资源加载的确切行。
关于javascript - 如何识别网站中js/css文件包含的来源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52438705/