如何识别网站中包含js/css文件的来源答案

【问题标题】：How to identify the source of js/css file inclusion in webite如何识别网站中包含js/css文件的来源
【发布时间】：2019-02-25 13:36:43
【问题描述】：

我想知道是否有办法跟踪某些特定 .js 或 .css 文件包含在网站中的确切路径，尤其是来自第三方脚本，例如广告商。

假设我们有网站X。在此站点上，包含一个脚本A.js。但是，此文件会加载 A1.js 和 A2.js。同时，本站将B.js加载为第三方文件，其中包含B1.css。

问题来了：如何跟踪包含文件的路径，即像X -> A.js -> (A1.js, A2.js)。

注意事项：

在异步世界中，不再可能跟踪输出请求并按顺序对其进行排序。
您不能查看Referer HTTP 阅读器，因为它始终指向X。
最好在 Chrome 开发工具 F12 中跟踪它。

【问题讨论】：

早上很早，所以对我来说是光秃秃的。但是，不是所有正在加载的第 3 方脚本也作为脚本标签附加到正文中吗？也许你可以听听？
确实如此。但是我认为不可能跟踪哪个脚本附加了标签，因为它可能会在一段时间后根据异步加载的资源之间的不同延迟。
这可能会帮助您监听 DOM 更改，这样您就可以动态地捕获所有资源。即使在 10 分钟之后，您也永远不会知道是否仅此而已。但至少你会拥有正在加载的所有内容stackoverflow.com/questions/3219758/detect-changes-in-the-dom
如果没有简单的解决方案来跟踪脚本链，比如哪个脚本包含另一个，这并不能解决我的问题：<.>

标签： javascript css google-chrome web

【解决方案1】：

您可以使用某种机器人来完成，或者只是手动完成。

在所有浏览器中，您都可以看到 HTML 源代码，因此您可以从那里获取路径、查看源代码、获取路径等。

来源：Source Code in Browser

希望这就是您想要的。

【讨论】：

我正在寻找一些自动化流程/工具，其中包含数兆字节的缩小第三方来源。
那么你需要编写某种网络爬虫来读取 HTML 标头数据并遵循我猜的路径。

【解决方案2】：

有一个简单的开源网络爬虫，它被称为 HTTrack。它将下载以其域名命名的文件夹中的所有资产。这是了解正在使用哪些资产以及来自哪个域的相对简单的方法。

https://www.httrack.com/

【讨论】：

【解决方案3】：

https://www.charlesproxy.com/

Charles 是在您自己的计算机上运行的网络代理（HTTP 代理/HTTP 监视器）。然后将您的网络浏览器（或任何其他 Internet 应用程序）配置为通过 Charles 访问 Internet，然后 Charles 能够为您记录和显示所有发送和接收的数据。

在 Web 和 Internet 开发中，您无法看到 Web 浏览器/客户端和服务器之间发送和接收的内容。如果没有这种可见性，就很难准确地确定故障在哪里，而且非常耗时。 Charles 可以轻松查看正在发生的事情，因此您可以快速诊断和解决问题。

【讨论】：

【解决方案4】：

您已经可以在 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 并使用 Network 选项卡：

以红色突出显示的请求显示A1.js 和A2.js 加载由A.js 的第7 行发起。

蓝色的请求显示B.css负载由B.js的第8行发起。

绿色请求显示包含来自(index) 的A.js 和B.js -- 表示索引页面请求这些。

将鼠标悬停在每个资源的名称上以显示其原始位置。

单击启动器链接（A.js:7 或 (index)）以显示触发资源加载的确切行。

【讨论】：

非常感谢！发起者是我正在寻找的。通过 devtools，我什至可以自动化它。非常感谢！
顺便说一句，很好的参与，您甚至准备了与问题中的用例匹配的文件。