Как определить источник включения файла js / css на сайт
Интересно, есть ли способ отследить точный путь включения некоторых конкретных файлов .js или .css на веб-сайт, особенно из сторонних скриптов, например, рекламодателей.
Предположим, что у нас есть сайт X. На этом сайте включен скрипт A.js. Однако этот файл загружает A1.js и A2.js. В то же время этот сайт загружает B.js как сторонний файл, который включает B1.css.
Возникает вопрос: Как отследить путь к включенным файлам, например X -> A.js -> (A1.js, A2.js).
Примечания:
- В асинхронном мире больше невозможно отслеживать исходящие запросы и сортировать их по порядку.
- Вы не можете смотреть на
RefererHTTP-ридер, поскольку он всегда указывает наX. - Лучше всего отслеживать это в инструментах разработчика Chrome F12.
Это правда. Однако я думаю, что невозможно отследить, какой сценарий добавил тег, учитывая, что это могло произойти через некоторое время из-за различных задержек между асинхронной загрузкой ресурсов.
Это может помочь вам отслеживать изменения DOM, таким образом у вас будет динамический способ перехвата всех ресурсов. Конечно, вы никогда не узнаете, все ли это было, даже через 10 минут. Но хотя бы у вас было бы все, что загружается stackoverflow.com/questions/3219758/detect-changes-in-the-do м
Если нет простого решения для отслеживания цепочки сценариев, например, какой сценарий включает другой, это не решает мою проблему: <.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете сделать это с помощью какого-нибудь бота или просто сделать это вручную.
Во всех браузерах вы можете видеть исходный код HTML, чтобы вы могли получить оттуда пути, просмотреть этот исходный код, получить пути и т. д.
Источник: Исходный код в браузере
Надеюсь, это то, что вы ищете.
Я ищу какой-нибудь автоматизированный процесс / инструмент с мегабайтами минифицированных сторонних источников.
Затем вам нужно будет написать какой-то веб-скребок, который читает данные заголовка HTML и следует по пути, который я предполагаю.
Существует простой веб-скрейпер с открытым исходным кодом, он называется HTTrack. Он загрузит все ресурсы в папки, названные по их доменному имени. Это относительно простой способ понять, какие ресурсы используются и из какого домена.
Charles is a web proxy (HTTP Proxy / HTTP Monitor) that runs on your own computer. Your web browser (or any other Internet application) is then configured to access the Internet through Charles, and Charles is then able to record and display for you all of the data that is sent and received.
In Web and Internet development you are unable to see what is being sent and received between your web browser / client and the server. Without this visibility it is difficult and time-consuming to determine exactly where the fault is. Charles makes it easy to see what is happening, so you can quickly diagnose and fix problems.
Вы уже можете отслеживать путь к каждому включенному файлу в 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.info("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.info("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, инициированную 7-й строкой A.js.
Запрос синим цветом показывает загрузку B.css, инициированную 8-й строкой B.js.
Зеленые запросы показывают включение как A.js, так и B.js из (index) - это означает, что индексная страница запрашивала их.
Наведите указатель мыши на названия каждого ресурса, чтобы увидеть их исходное местоположение.
Щелкните ссылку инициатора (A.js:7 или (index)), чтобы показать точную строку, в которой была инициирована загрузка ресурса.
Большое спасибо! Инициатор был тем, что я искал. С помощью инструментов разработчика я могу даже автоматизировать это. Большое спасибо!
BTW Хорошее участие, вы даже подготовили файлы, соответствующие варианту использования в вопросе.
Очень раннее утро, так что со мной обнажено. Но разве не все повторно загружаемые сторонние скрипты также добавляются к телу как тег скрипта? Может, ты мог бы это послушать?