Используйте CSS для отслеживания пользователей

HTML CSS
Используйте CSS для отслеживания пользователей

Оригинальный адрес:Crooked Style Sheets

Добавить Автора

В дополнение к использованию JS для отслеживания пользователей теперь предлагается также использоватьCSS 进行网页追踪和分析, переводчик считает, что этот метод более优雅, более简洁,а также不好屏蔽, стоит попробовать волну, чтобы узнать больше, вы можете проверитьАдрес складаа такжеdemo

что мы можем с этим сделать

Мы можем собирать некоторую базовую информацию о пользователях, такую ​​как屏幕分辨率(когда браузер развернут) и что использует пользователь浏览器(двигатель)

Кроме того, мы можем определить, нажимает ли пользователь на ссылку или наводит курсор на элемент, используя追踪用户悬停的链接, четное追踪用户如何移动鼠标(используя невидимые поля на странице), однако с моим текущим методом я могу отслеживать только первый щелчок или наведение пользователя, я считаю, что изменение моего метода в конечном итоге позволит отслеживать каждый щелчок пользователя

Наконец, мы также можем отслеживать, установил ли пользователь тот или иной шрифт. На основе этой информации мы можем отслеживать использование пользователем操作系统, потому что разные операционные системы используют немного разные шрифты, например.WindowsизCalibri

Как это достигается

Общая практика

использоватьCSSвы можете использоватьurl("foo.bar")Атрибуты относятся к внешним ресурсам для добавления изображений, что интересно, этот ресурс загружается только при необходимости (например, при переходе по ссылке).

Итак, мы можем использоватьCSSСоздайте селектор, который вызывает определенную ссылку, когда пользователь щелкает ссылку.UPL

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

сервер,phpСкрипт будет вызыватьURLотметка времени

мониторинг браузера

浏览器监измерение основано на@supports Media-QueryДа, мы можем отслеживать некоторые специальные свойства браузера ,Например-webkit-appearance

@supports (-webkit-appearance: none) {
    #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');
    }
}

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

#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');
}

Мы можем оптимизировать мониторинг разрешения, дополнив настройки ключевых кадров

мониторинг ввода

Чтобы отслеживать, что пользователь установил определенный флажок, мы можем использоватьCSSкоторый предоставил:selectedСелектор

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

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

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

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

Demo

нажмитездесьВы можете проверить демонстрацию этого репозитория.index.htmlПопрактиковавшись в вышеописанном методе, посетитеresults.phpМожет просматривать результаты

Если после атрибута ничего нетcontentдолжно бытьphp 警告появляется, что означает, что значение этого свойства равноfalseИли пользователь не посещал страницу или ссылку (это действительно раздражает, но вы можете знать, как работают эти методы)

Кроме того, мониторинг разрешения не особенно точен, так как в настоящее время можно отслеживать только наиболее часто используемые значения ширины экрана. Напоследок хочу сказать, что следить за шириной реального экрана пользователя не так просто, как вы думаете, т.к.CSSВысота мониторинга равна высоте окна браузера, и обычно из-за системной панели/панели задач окно браузера меньше, чем дисплей.

Есть ли способ предотвратить отслеживание с помощью вышеуказанного метода?

Единственный способ, который я знаю на данный момент, это完全禁用 CSS(вы можете использовать что-то вродеuMatrixПлагин для достижения), но его стоимость тоже очень велика, без CSS веб-страница не будет так радовать глаз, как раньше, и даже привести к ней невозможно нормальное использование, так что,禁用 CSS 算不上一个真正的选择, если вы действительно не беспокоитесь о своей конфиденциальности (например, когда вы используете Tor Browser, возможно, вам следует отключить CSS)

Лучшее решение,在网页加载时，浏览器不会去加载需要的外部资源, таким образом невозможно следить за личным поведением пользователя.Эта модификация загрузки контента может быть реализована через браузер или через плагин (по аналогии сNoScriptили uMatrix)

Существует также очевидная проблема с вышеуказанным методом, т.е.对性能会造成一定的影响，Потому что браузер будет загружать много контента при инициализации страницы (некоторый контент, который странице вообще не нужен)

Категории