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

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

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

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

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

#link2:active::after {
    content: url("track.php?action=link2_clicked");
}

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

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

@supports (-webkit-appearance:none) and (not (-ms-ime-align:auto)){
    #chrome_detect::after {
        content: url("track.php?action=browser_chrome");
    }
}

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

/** Font detection **/
@font-face {
    font-family: Font1;
    src: url("track.php?action=font1");
}

#font_detection1 {
    font-family: Calibri, Font1;
}

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

@keyframes pulsate {
    0% {background-image: url("track.php?duration=00")}
    20% {background-image: url("track.php?duration=20")}
    40% {background-image: url("track.php?duration=40")}
    60% {background-image: url("track.php?duration=60")}
    80% {background-image: url("track.php?duration=80")}
    100% {background-image: url("track.php?duration=100")}
}

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

#duration:hover::after {
    -moz-animation: pulsate 5s infinite;
    -webkit-animation: pulsate 5s infinite;
    /*animation: pulsate 5s infinite;*/
    animation-name: pulsate;
    animation-duration: 10s;
    content: url("track.php?duration=-1");
}

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

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

#checkbox:checked {
    content: url("track.php?action=checkbox");
}

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

<input type="text" id="text_input" pattern="^test$" required>

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

#text_input:valid {
    background: green;
    background-image: url("track.php?action=text_input");
}

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

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

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