Что такое Client Rects?

Client Rects — это набор API, предоставляемых браузером для получения информации о макете веб-элементов, включая их точное положение на странице и размеры. Эти данные возвращаются в виде “прямоугольников” (rects) и содержат подробную информацию о верхней, нижней, левой и правой границах элемента, а также о его ширине и высоте.



Как Client Rects становятся отпечатком?

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



Например: один и тот же фрагмент текста или одна и та же кнопка на одном устройстве могут отображаться немного крупнее, а на другом — быть слегка смещены. Эти незначительные различия трудно заметить невооружённым глазом, но с помощью API Client Rects их можно точно зафиксировать.



Процесс формирования отпечатка Client Rects

Получение браузерного отпечатка с помощью Client Rects на сайте обычно включает следующие шаги:



Шаг 1: выбор или создание целевого элемента



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



Шаг 2: получение Client Rects элемента



С помощью JavaScript вызывается метод getClientRects() элемента, чтобы получить информацию о его макете. Возвращаемые данные содержат сведения о положении и размерах элемента——верхняя граница (top), нижняя граница (bottom), левая граница (left), правая граница (right), ширина (width) и высота (height) и т. д.



Шаг 3: запись или обработка данных



Сайт записывает эти исходные данные или выполняет их дальнейшую обработку. Например, вычисляет площадь элемента (ширина × высота), рассчитывает относительное положение элемента относительно других элементов и т. д.



Шаг 4: создание браузерного отпечатка



Наконец, сайт объединяет эту информацию о макете с другими данными (например, IP-адресом, строкой User-Agent и т. д.) и с помощью определённого алгоритма формирует уникальный браузерный отпечаток, который используется для идентификации и отслеживания пользователя.



Следует отметить, что это лишь упрощённый пример. На практике сайты могут собирать данные Client Rects для нескольких элементов и выполнять более сложную статистическую обработку и анализ, чтобы повысить уникальность и стабильность отпечатка.



Client Rects можно понимать как своеобразную “линейку” сайта——она точно измеряет, как ваш браузер отображает и размещает элементы страницы, а эти результаты измерений имеют небольшие, но распознаваемые различия между разными устройствами.