Что такое ClientRects Fingerprinting и как сайты анализируют геометрию браузера

Когда речь заходит о Browser Fingerprinting, чаще всего вспоминают Canvas, WebGL, установленные шрифты или Audio Fingerprinting.

Однако современные сайты могут получать информацию ещё из одного источника, о котором знают далеко не все пользователи, — механизма построения макета страницы в браузере.

Эта технология называется ClientRects Fingerprinting.

В отличие от Canvas или WebGL, она не связана напрямую с видеокартой, GPU или обработкой звука. ClientRects анализирует, как браузер рассчитывает размеры, координаты и положение элементов на веб-странице.

Как и другие методы Fingerprinting, ClientRects не используется как самостоятельный и абсолютный идентификатор. Это один из множества сигналов, формирующих общий Browser Fingerprint.

Что такое ClientRects

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

Чтобы корректно показать сайт, браузер определяет:

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

JavaScript может получить эти данные через стандартные браузерные API, например:

getBoundingClientRect();
getClientRects();

Веб-разработчики ежедневно используют эти функции при создании интерфейсов, анимаций, всплывающих окон и адаптивной вёрстки.

Системы Browser Fingerprinting обращаются к тем же API, но используют полученные измерения для анализа браузерного окружения.

Как работает ClientRects Fingerprinting

Механизм ClientRects Fingerprinting можно разделить на несколько этапов.

Шаг 1. Создание тестовых элементов

Сайт создаёт набор HTML-элементов с заранее определёнными стилями.

Это могут быть:

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

Обычно они скрыты от пользователя или размещены за пределами видимой области страницы.

Шаг 2. Расчёт макета браузером

Браузер обрабатывает HTML и CSS, после чего вычисляет точные размеры и координаты каждого тестового элемента.

На этом этапе задействуется браузерный движок компоновки, который определяет, где и в каком размере должен отображаться каждый объект.

Шаг 3. Считывание геометрии

JavaScript обращается к getBoundingClientRect() или getClientRects() и получает рассчитанные браузером значения.

Среди них могут быть:

• width;
• height;
• top;
• right;
• bottom;
• left;
• x;
• y.

Полученные значения нередко содержат дробную часть, например 200.3125 или 37.984375.

Шаг 4. Формирование набора данных

Сайт объединяет геометрические показатели нескольких элементов в одну последовательность.

Чем больше объектов и вариантов вёрстки используется, тем подробнее получается набор характеристик браузерного окружения.

Шаг 5. Создание хеша

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

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

Почему результаты отличаются на разных устройствах

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

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

На итоговые значения ClientRects могут влиять:

• операционная система;
• движок браузера;
• версия браузера;
• масштабирование интерфейса;
• DPI и плотность пикселей экрана;
• установленные шрифты;
• используемый шрифтовой движок;
• особенности рендеринга текста;
• настройки сглаживания;
• языковые параметры;
• CSS-трансформации;
• масштаб страницы.

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

Например, изменение системного масштаба со 100% до 125% может повлиять на округление дробных координат и размеры отдельных элементов.

Пример различий ClientRects

Предположим, сайт измеряет ширину одного и того же скрытого HTML-элемента.

По отдельности такие различия кажутся незначительными.

Однако сайты редко ограничиваются измерением одного элемента. Системы Fingerprinting могут анализировать десятки или даже сотни объектов с разными стилями, шрифтами и вариантами позиционирования.

В результате формируется последовательность значений:

200.31
48.98
16.02
301.47
72.11

На другом устройстве та же последовательность может выглядеть немного иначе:

200.47
49.03
15.98
301.52
72.09

Каждое отдельное отличие минимально. Но при объединении большого количества измерений результат становится полезным дополнительным сигналом для анализа браузера.

Зачем сайты используют ClientRects Fingerprinting

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

Эта технология может использоваться для:

• повышения точности Browser Fingerprint;
• выявления автоматизированных браузеров;
• обнаружения нестандартного браузерного движка;
• поиска несоответствий между параметрами профиля;
• дополнительной проверки целостности окружения;
• поддержки антифрод-систем.

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

Само по себе такое отличие не всегда доказывает подмену. На ClientRects влияют масштабирование, шрифты, версия браузера и другие параметры.

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

ClientRects, Canvas и WebGL: в чём разница

Хотя ClientRects, Canvas и WebGL часто упоминаются вместе, каждая технология анализирует отдельную часть браузерного окружения.

Canvas Fingerprinting оценивает особенности отрисовки двухмерной графики и текста.

WebGL Fingerprinting анализирует параметры графического окружения и особенности рендеринга, связанного с GPU.

ClientRects Fingerprinting исследует, как браузер рассчитывает геометрию страницы: размеры, координаты и расположение элементов.

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

Согласованный профиль должен выглядеть логично сразу по нескольким направлениям. Например, заявленная операционная система, набор шрифтов, Canvas, WebGL и ClientRects не должны явно противоречить друг другу.

Насколько важен ClientRects сегодня

ClientRects обычно не считается одним из самых сильных самостоятельных сигналов Browser Fingerprinting.

Он не раскрывает точную личность пользователя и редко позволяет однозначно идентифицировать браузер без дополнительных данных.

Его основная ценность заключается в другом: ClientRects добавляет ещё один слой информации к общей картине браузерного окружения.

Современные антифрод-системы могут одновременно оценивать:

• Canvas;
• WebGL;
• ClientRects;
• Audio Fingerprinting;
• MediaDevices;
• User-Agent и User-Agent Client Hints;
• свойства экрана;
• системные языки;
• часовой пояс;
• аппаратные параметры;
• IP-адрес и сетевое окружение.

Решение обычно не принимается только на основании ClientRects. Вместо этого система сопоставляет десятки сигналов и определяет, насколько правдоподобно выглядит их сочетание.

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

ClientRects Fingerprinting и WadeX

ClientRects — одна из характеристик браузера, которую могут учитывать современные антифрод-системы.

Антидетект-браузер WadeX позволяет управлять параметрами Browser Fingerprint, включая характеристики, связанные с ClientRects.

По сравнению с некоторыми другими механизмами Fingerprinting изменение ClientRects обычно считается менее рискованным, чем агрессивное вмешательство в Canvas или WebGL Image.

Однако это не означает, что значения следует изменять без ограничений.

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

Наиболее практичный подход выглядит следующим образом:

1. Начинать работу со Smart Mode.
2. По возможности сохранять естественное поведение браузера.
3. Использовать дополнительные настройки только при наличии конкретной необходимости.
4. Проверять согласованность ClientRects с операционной системой, браузером, шрифтами и масштабированием.
5. Избегать агрессивных изменений отдельных сигналов без учёта общего профиля.

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

Гораздо важнее сформировать реалистичное браузерное окружение, в котором все характеристики согласуются между собой.

Почему простое добавление случайного шума может быть проблемой

Один из возможных способов изменить ClientRects — добавить небольшое смещение к возвращаемым значениям.

Например, браузер может возвращать не исходную ширину 200.3125, а изменённое значение 200.3141.

Однако полностью случайный шум создаёт несколько рисков.

Нестабильность результатов

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

Несоответствие связанных измерений

Значения left, right и width математически связаны между собой.

Если каждое из них изменяется независимо, может возникнуть невозможная комбинация:

left + width ≠ right

Противоречие с другими API

Геометрию элемента можно проверить несколькими способами. Если разные браузерные API возвращают несовместимые результаты, подмена становится заметнее.

Слишком редкий профиль

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

Поэтому качественная работа с ClientRects требует не просто изменения чисел, а сохранения логических связей между ними.

Как проверить ClientRects браузера

Пользователь может самостоятельно посмотреть, какие значения возвращает браузер.

Для простого теста достаточно открыть инструменты разработчика и выполнить JavaScript:

const element = document.createElement('div');

element.style.cssText = `
  position: absolute;
  left: -9999px;
  width: 200.3px;
  height: 50.2px;
  font-size: 16px;
`;

element.textContent = 'ClientRects test';
document.body.appendChild(element);

console.log(element.getBoundingClientRect());

element.remove();

В консоли появятся размеры и координаты созданного элемента.

Этот тест не показывает полный ClientRects Fingerprint. Реальные системы могут использовать значительно больше элементов, шрифтов, CSS-свойств и вариантов измерения.

Тем не менее он демонстрирует основной принцип: JavaScript может получить геометрию элемента с высокой точностью.

Представляет ли ClientRects угрозу для приватности

Сам по себе ClientRects обычно не представляет критической угрозы.

Одних только геометрических измерений, как правило, недостаточно, чтобы однозначно идентифицировать пользователя.

Однако ClientRects становится полезнее при объединении с другими источниками данных:

• Canvas Fingerprinting;
• WebGL Fingerprinting;
• Audio Fingerprinting;
• MediaDevices;
• User-Agent;
• характеристиками экрана;
• IP-адресом;
• сетевыми параметрами.

Каждый сигнал сокращает количество браузеров с похожей конфигурацией.

Например, отдельное значение ClientRects может встречаться у тысяч пользователей. Но сочетание этого значения с определённой версией браузера, набором шрифтов, параметрами Canvas, моделью GPU и сетевым окружением может быть значительно более редким.

Именно поэтому защита от Browser Fingerprinting требует работы со всем окружением, а не только с одной технологией.

Заключение

ClientRects Fingerprinting анализирует, как браузер рассчитывает размеры, координаты и положение элементов на веб-странице.

Для этого сайт создаёт скрытые HTML-объекты, получает их геометрию через стандартные JavaScript API и добавляет результаты к другим характеристикам Browser Fingerprint.

На значения ClientRects могут влиять:

• браузерный движок;
• операционная система;
• системное масштабирование;
• DPI;
• установленные шрифты;
• особенности отображения текста;
• настройки страницы.

Сам по себе ClientRects редко позволяет однозначно идентифицировать пользователя. Его основная ценность заключается в дополнении других сигналов и выявлении несоответствий внутри браузерного профиля.

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