Метод отслеживания посетителей сайтов при помощи CSS, без JavaScript
15 января 2018 года
Jan Böhmer опубликовал прототип системы для организации отслеживания перемещения посетителей по сайтам, который ограничивается использованием только CSS и не требует выполнения кода на JavaScript. При размещении на сайте представленного кода организуется передача на внешний сервер базовой информации о посетителе, включая сведения о разрешении экрана, типе браузера и наличии заданных шрифтов. На основе различий в доступных шрифтах можно определить тип ОС.
Кроме того, определяется по каким ссылкам на странице переходил пользователь или к которым из ссылок подводил курсор мыши. Также могут быть выявлены общие особенности перемещения мыши по экрану (фоном выводится невидимая таблица полей, по которой определяется перемещение мыши). В текущем виде код может отслеживать только первые клики и наведения мыши, последующие клики по тем же ссылкам или повторные наведения мыши не учитываются. Проверить работу метода можно на специально подготовленной демонстрационной странице.
Реализация использует возможности CSS по добавлению изображений из внешних источников при помощи свойства url("foo.bar") - так как ресурсы загружаются только при необходимости, можно указать вместо изображения ссылку на внешний скрипт-сборщик статистики и привязать к таким событиям, как переход на ссылку или подведение мыши к ссылке. Например для отслеживания кликов можно использовать код:
#link2:active::after { content: url("track.php?action=link2_clicked"); }
Для определения идентификатора бразуера можно использовать правила @supports для проверки наличия специфичных для каждого типа браузеров свойств CSS, например, только браузеры на движке Chromium поддерживают свойство "-webkit-appearance":
@supports (-webkit-appearance:none) { #chrome_detect::after { content: url("track.php?action=browser_chrome"); } }
Для определения наличия шрифтов в CSS создаётся новое фиктивное семейство шрифтов, в качестве источника для загрузки которого указывается внешний скрипт-сборщик данных. Далее формируются проверочные блоки текста в котором первым указывается проверяемый шрифт, а вторым фиктивный шрифт. Если проверяемый шрифт присутствует, то второй шрифт будет игнорирован, но если проверяемого шрифта нет, браузер попытается использовать фиктивный шрифт как запасной вариант и отправит запрос к внешнему скрипту:
@font-face { font-family: Font1; src: url("track.php?action=font1"); } #font_detection1 { font-family: Calibri, Font1; }
Источники
править
Любой участник может оформить статью: добавить иллюстрации, викифицировать, заполнить шаблоны и добавить категории.
Любой редактор может снять этот шаблон после оформления и проверки.
Комментарии
Если вы хотите сообщить о проблеме в статье (например, фактическая ошибка и т. д.), пожалуйста, используйте обычную страницу обсуждения.
Комментарии на этой странице могут не соответствовать политике нейтральной точки зрения, однако, пожалуйста, придерживайтесь темы и попытайтесь избежать брани, оскорбительных или подстрекательных комментариев. Попробуйте написать такие комментарии, которые заставят задуматься, будут проницательными или спорными. Цивилизованная дискуссия и вежливый спор делают страницу комментариев дружелюбным местом. Пожалуйста, подумайте об этом.
Несколько советов по оформлению реплик:
- Новые темы начинайте, пожалуйста, снизу.
- Используйте символ звёздочки «*» в начале строки для начала новой темы. Далее пишите свой текст.
- Для ответа в начале строки укажите на одну звёздочку больше, чем в предыдущей реплике.
- Пожалуйста, подписывайте все свои сообщения, используя четыре тильды (~~~~). При предварительном просмотре и сохранении они будут автоматически заменены на ваше имя и дату.
Обращаем ваше внимание, что комментарии не предназначены для размещения ссылок на внешние ресурсы не по теме статьи, которые могут быть удалены или скрыты любым участником. Тем не менее, на странице комментариев вы можете сообщить о статьях в СМИ, которые ссылаются на эту заметку, а также о её обсуждении на сторонних ресурсах.