Зачем в outerHTML вставляют img с URI и стилями position: absolute?

В современной веб-разработке часто встречаются скрытые изображения в HTML-коде, которые не видны пользователю, но выполняют важные служебные функции. Один из таких примеров - фрагмент <img src="URI#1.px.png?r=123123&pr=false&u=URI#2" style="position: absolute; bottom: 0px; right: 0px; width: 0px; height: 0px;">, найденный в атрибуте outerHTML. Разберём его назначение и принцип работы.

Что такое пиксель отслеживания (tracking pixel)?

Данная конструкция - классический веб-маяк (web beacon) или пиксель отслеживания. Это прозрачное изображение размером 1x1 пиксель (или с нулевыми размерами), которое встраивается в страницу для сбора аналитики. Браузер загружает его с сервера, передавая при этом дополнительные параметры в URL, такие как r=123123, pr=false и u=URI#2. Сервер логирует запрос, фиксируя действия пользователя: просмотр страницы, открытие письма или клик по ссылке.

Зачем нужны параметры r, pr и u в src?

Параметры в URL пикселя - это идентификаторы и метаданные, которые передаются на сервер аналитики. r=123123 может означать уникальный ID сессии или кампании, pr=false - флаг приватности (например, отключение персонализации), а u=URI#2 - закодированный URL текущей страницы или целевой ссылки. Такая схема позволяет маркетологам собирать статистику без использования куки или JavaScript, что особенно актуально для email-рассылок и простых HTML-баннеров.

Почему используются нулевые размеры и position: absolute?

Стили width: 0px; height: 0px; и position: absolute; bottom: 0px; right: 0px; делают изображение невидимым для пользователя и не влияют на вёрстку. Элемент выносится из потока документа в правый нижний угол, но браузер всё равно отправляет запрос к серверу. Это стандартный метод скрытия трекера, чтобы не нарушать дизайн страницы и не отвлекать посетителя.

Как outerHTML участвует в этом механизме?

Атрибут outerHTML содержит полную строку HTML-элемента. Если вы видите такую вставку в outerHTML, значит, элемент уже присутствует в DOM и будет загружен браузером. Часто пиксели добавляются динамически через JavaScript или внедряются сторонними скриптами (например, системами аналитики, ретаргетинга или A/B-тестирования). При анализе outerHTML можно обнаружить скрытые трекеры, которые не видны в обычном коде страницы.

Вывод: для чего используется такая вставка?

Основная цель - сбор анонимной статистики о поведении пользователей: просмотры страниц, переходы по ссылкам, открытие писем. Параметры в URL помогают идентифицировать источник трафика, кампанию или конкретное действие. Несмотря на нулевые размеры, изображение загружается сервером, что позволяет веб-аналитике работать без JavaScript. Это легальный инструмент, но он может затрагивать конфиденциальность, поэтому современные браузеры и расширения блокируют такие запросы.

Рекомендации по работе с пикселями

• Проверяйте outerHTML на наличие скрытых <img> с нулевыми размерами - это могут быть трекеры аналитики.
• Используйте инструменты разработчика (вкладка Network) для отслеживания запросов к незнакомым URI.
• Для повышения приватности применяйте расширения, блокирующие веб-маяки (uBlock Origin, Privacy Badger).