Создан прототип системы для отслеживания пользователей на чистом CSS

Студент из Германии изобрел технологию, позволяющую следить за рядом действий посетителей сайтов без использования JavaScript.
Человечек с лупой

Ян Бемер (Jan Böhmer) рассказал о собственной технике отслеживания пользователей, для реализации которой требуется только CSS. Она позволяет узнать такую базовую информацию о посетителе, как:

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

Принцип работы

Реализация технологии основана на возможности добавлять в CSS изображения из внешних источников через свойство url("foo.bar"). Поскольку ресурсы загружаются по мере необходимости, вместо ссылки на изображение в качестве параметра можно указать ссылку на внешний скрипт для сбора статистики. Это позволяет определить, перешел ли пользователь по ссылке или же просто навел на нее. Примерный вид селектора для осуществления описанного процесса:

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

При этом PHP-скрипт фиксирует время клика на сервере.

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

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

Для определения шрифта создаётся новое произвольное семейство шрифтов (вместо ссылки на шрифт опять же вставляется ссылка на скрипт для сборки статистики). Затем производится проверка наличия шрифта в системе. В случае неудачи будет вызван уже фиктивный шрифт.

/** Определение шрифта **/
@font-face {
    font-family: Font1;
    src: url("track.php?action=font1");
}

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

Протестировать новую идею самостоятельно можно тут.

Источник: GitHub

Ещё интересное для вас:
Тест: чьё это рабочее место? Угадываем айтишников по их столам
Тест: что вы знаете о работе мозга?
Тест: какой язык программирования вам стоит выбрать для изучения?

Вакансии в тему:

Nsys Group
Web–разработчик
Web–разработчик
Nsys Group, Санкт-Петербург, 100 000 ₽ (до налогов)
Urban Awards
PHP-разработчик
PHP-разработчик
Urban Awards, Москва, от 60 000 до 80 000 ₽
CallKeeper
JavaScript-разработчик
JavaScript-разработчик
CallKeeper, Москва, от 100 000 до 150 000 ₽