如何確定Webite中js / css文件包含的來源

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 Dev工具F12中對其進行跟蹤。

Answer 1

您已經可以在Chrome DevTools中跟蹤每個包含的文件的路徑。

為了進行實驗，我在127.0.0.42 （可通過127.0.0.42訪問）和127.0.0.43 （可從third.party.domain.tld訪問）上設置一個Web服務器，因此這兩個服務器都是隔離的。

網站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");

請注意，此處的第七行是腳本文件的附加行。

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.css通過的8號線啟動加載B.js 。

綠色請求顯示(index)中同時包含A.js和B.js －意味着索引頁面請求了這些。

將鼠標懸停在每個資源的名稱上以顯示其原始位置。

單擊啟動程序鏈接（ 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源代碼，因此您可以從那里獲取路徑，查看該源代碼，獲取路徑等。

源：瀏覽器中的源代碼

希望這就是您想要的。

如何確定Webite中js / css文件包含的來源

問題描述

4 個解決方案

解決方案1
1 已采納 2018-09-26 16:35:44

解決方案2
0 2018-09-24 06:24:11

解決方案3
0 2018-09-25 16:36:16

解決方案4
-2 2018-09-21 07:35:06

如何確定Webite中js / css文件包含的來源

問題描述

4 個解決方案

解決方案1 1 已采納 2018-09-26 16:35:44

解決方案2 0 2018-09-24 06:24:11

解決方案3 0 2018-09-25 16:36:16

解決方案4 -2 2018-09-21 07:35:06

解決方案1
1 已采納 2018-09-26 16:35:44

解決方案2
0 2018-09-24 06:24:11

解決方案3
0 2018-09-25 16:36:16

解決方案4
-2 2018-09-21 07:35:06