Веб-Острова Анатолия Куликова

Отслеживаем пользователей на чистом CSS

Отслеживаем пользователей на чистом CSS

Кажется, вариантов слежения за пользователем, который заходит на сайт, существует много: и пиксели с социальных сайтов, и метрики, и просто ajax-скрипты, которые тихо сидят в фоне и передают какие-то данные. Только CSS, который описывает стили на сайте, грустно стоял в стороне и играл за команду пользователя. Но умные люди придумали, как и он может по-тихому сливать информацию о ваших действиях.

Такую систему описал на GitHub студент из Германии Ян Бемер (Jan Böhmer). Она позволяет получить следующую информацию:

  • разрешение экрана и используемый браузер;
  • переход по внешним ссылкам;
  • элементы, на которые наводится мышь;
  • системные шрифты.

Вся эта система работает за счёт использования возможности добавлять в CSS изображения из внешних источников через свойство url. Поскольку указанные в CSS ресурс загружается только тогда, когда это необходимо (например, при нажатии на ссылку), мы используем эту возможность, но будем подгружать не картинки, а скрипт. Например, вот так:

Вызываемый в этом случае скрипт будет выполнять нужное нам действие — например, фиксирует время нажатия на ссылку.

Таким же образом можно узнать и используемый браузер с помощью технологии @supports Media-Query, когда мы можем проверить некоторые свойства CSS для браузера, такие как -webkit-appearance:

Для обнаружения шрифтов определяется новое семейство шрифтов. Затем необходимо проверить, существует ли такой и когда браузер не находит шрифт в системе пользователя, браузер пытается загрузить шрифт и вызывает сценарий отслеживания на сервере. После чего мы опять подгружаем скрипт, который зарезультирует весь процесс.

Ещё автор предлагает идею для отслеживания длительности нажатия (которая основана на предложениях пользователя jeyroik). Суть такова — мы (те, кто внедрит эту штуку на сайт) будем с определённым интервалом запрашивать URL-адрес со скриптом. Выглядит это вот так:

Затем мы определяем, что ключевые кадры должны использоваться как анимация для контейнера div. Мы с помощью продолжительность анимации можем установить время, которое будет считаться максимальным временем, которое мы можем измерить:

Разрешение измерения продолжительности может быть увеличено путем добавления дополнительных шагов в набор ключевых кадров.

Чтобы определить, нажимет ли пользователь флажок (это будет полезно для разных форм), можно использовать :select, который базово представлен в CSS:

Для отслеживания того, что написал пользователь в input’e, мы объединяем атрибут HTML, который может использоваться для создания некоторой базовой проверки ввода.

В сочетании с действительным селектором браузер запрашивает наш сайт отслеживания, когда шаблон регулярного выражения совпадает с вводом:

Опробовать работу системы можно здесь. Поиграйте на странице со ссылками и полями ввода, а потом нажмите на ссылку Watch Results, чтобы воочию увидеть, что про ваши мышкодвижения записали скрипты.

Автор отмечает, что всё, что он создал, ещё далеко до совершенства. Но сами возможности впечатляют и можно представить, какую систему можно создать, позаморачивась над кодом таблицы стилей. По итогу, ещё один оплот безопасности рухнул. Чтобы такая система отслеживания не работала, нужно полностью отключить CSS для веб-сайта (с помощью плагинов). Проблема в том, что сейчас почти все сайты без стилей представляют из себя хтоническое нечто.

Идея безумно классная, особенно для теневого сбора без очевидной загрузки дополнительных скриптов. Правда необходимо понимать, что сейчас в любом случае нужно предупреждать человека, что сайт собирает информацию о его деятельности, поэтому такая замороченность без предупреждения может быть незаконной.

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик

Новые статьи

Разбираемся с Яндекс.Коннектом

Разбираемся с Яндекс.Коннектом

Разбираемся с новым сервисом от Яндекса
Делаем паттерн из иконок

Делаем паттерн из иконок

Ещё один простой, но полезный онлайн-генератор
Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Отслеживаем нажатие клавиш на клавиатуре и совершаем действия
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
Скроллинг по странице

Скроллинг по странице

Делаем плавный скроллинг по странице с помощью JQuery и HTML5
AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет

Статьи по теме

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Закон про обработку данных

Закон про обработку данных

Персональные данные пользователя — только после его согласия
Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

Скачать шрифты Google Fonts бесплатно, без смс, для своего сайта
Красивый адрес для YouTube-канала

Красивый адрес для YouTube-канала

Создаём красивый адрес для канала и разбираемся, если ничего не получается
Лабораторию Касперского обвинили в шпионаже

Лабораторию Касперского обвинили в шпионаже

Израильские спецслужбы срывают покровы и рассказывают о слежке российских хакеров за американским правительством
Модальное окно на чистом CSS

Модальное окно на чистом CSS

Создаем модальное окно на чистом CSS без использования javascript