Question

我想知道是否有一种方法可以跟踪某些特定的.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 中对其进行跟踪。

Answer 1

您已经可以在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的第7行发起的A2.js和A.js负载。

蓝色的请求显示B.css的第8行启动的B.js负载。

绿色请求显示A.js中同时包含B.js和(index)，这意味着索引页已请求这些。

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

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

Answer 2

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

https://www.httrack.com/

Answer 3

https://www.charlesproxy.com/

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

在Web和Internet开发中，您无法看到Web浏览器/客户端与服务器之间正在发送和接收的内容。没有这种可见性，就很难准确地确定故障的位置。 Charles可以很容易地看到正在发生的事情，因此您可以快速诊断和解决问题。

Answer 4

您可以使用某种机器人来完成它，也可以手动完成。

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

来源：Source Code in Browser

希望这就是您想要的。

如何确定Webite中js / css文件包含的来源

4 个答案: