Что такое отпечаток ClientRects? Руководство по сверке согласованности окружений для мультиаккаунтов

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

"Дошел до слоя отпечатка в самопроверке согласованности, и показания ClientRects в двух окружениях различаются." Или наоборот: на странице проверки этот пункт отмечен желтым, и непонятно, считать ли это проблемой. Общее в таких вопросах: имя параметра знакомо, но что он измеряет и что изменится после правки, уверенности нет.

Эта статья отвечает на четыре вопроса в порядке поиска неисправности. Что такое это показание, почему два окружения расходятся, что оно говорит в рамках согласованности окружения и как настроить и проверить его в антидетект-браузере MostMate. MostMate готовит для каждого аккаунта набор изолированных браузерных окружений, а ClientRects является одним из пунктов в настройках отпечатков.

Что на самом деле представляет собой отпечаток ClientRects

Одной фразой: отпечаток ClientRects читает точные координаты блоков элементов страницы. Вызов getBoundingClientRect() возвращает ширину, высоту и положение элемента относительно вьюпорта; в документации MDN определение звучит как «возвращает размер элемента и его положение относительно вьюпорта»; переносимые на новые строки инлайн-элементы читаются через getClientRects(), по одному прямоугольнику на строку.

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

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

Почему показания двух окружений не совпадают

Ширина строки зависит от всей цепочки верстки от текста до пикселей:

• Механизм набора текста: в Windows, macOS и Linux свой, у одного шрифта и одной строки символов межбуквенные расстояния получаются разными.
• Масштабирование экрана: экраны высокого разрешения и системный масштаб меняют шаг округления, десятичные знаки меняются вместе с ними.
• Подмена шрифта: нужного странице шрифта нет, подключается запасной, ширина меняется вслед за ним.
• Движок браузера и масштаб страницы: у разных ядер разные алгоритмы переноса строк, масштаб страницы попадает прямо в конвейер верстки.

Все эти различия невелики, по одному числу вывод не сделать. В сочетании они описывают «какая система и какой стек рендеринга работают на этом устройстве». Это близкий родственник отпечатка шрифтов: перечисление шрифтов напрямую спрашивает список, ClientRects измеряет результат рендеринга, и они могут подтверждать друг друга. Параметры размеров уровня устройства и окна разобраны в статье о разрешении экрана и размере окна, ClientRects выступает сигналом уровня элементов, еще на шаг глубже.

Какую роль играет это показание в согласованности окружения

Наибольшая ценность в перекрестной проверке: найти для декларации окружения фактический ориентир для сверки. Окружение декларирует Windows с набором распространенных шрифтов, а измеренная ширина текста несет стиль округления другой системы. Два сигнала противоречат друг другу. Риск-системе не нужно понимать принципы, достаточно обнаружить противоречие.

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

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

Как настроить в MostMate

В форме настроек отпечатков MostMate у ClientRects отдельный пункт, рядом находятся Canvas, AudioContext, SpeechVoices и WebGL image. Режимов два: режим Real возвращает реальную верстку машины, режим Noise представляет собой режим шума.

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

Несколько окружений на одном компьютере: выбирайте Noise. Показания окружений больше не указывают на одну и ту же машину, здесь его основной сценарий применения. Цена: нужно принять одно ограничение. Между значениями прямоугольников существует арифметическая связь. Координаты внешнего блока должны сходиться с прямоугольниками внутреннего текста, ширины одинаковых строк должны быть пропорциональны. Если шум затрагивает лишь часть показаний, эти связи ломаются, и вместо маскировки появляется еще более заметный сигнал противоречия. Поэтому после выбора режима обязателен практический замер, а не предположение, что после настройки все в порядке.

После переключения в режим Noise пункт ClientRects в панели предпросмотра отпечатка превращается в значение с шестизначным кодом. Код служит лишь идентификатором конфигурации шума; реально открытый хеш можно увидеть, только запустив страницу проверки внутри окружения.

Как проверить после настройки

Проверка в два шага: числа меняются, потом все должно сойтись.

Шаг 1: сравнить показания двух окружений. Создайте два окружения, одно с Real, другое с Noise, и откройте в каждом страницу проверки Client Rects на BrowserLeaks. На одной машине прямоугольные значения окружения Real должны совпадать. Окружение Noise должно отличаться от Real, а два окружения Noise должны различаться между собой. Записывая, смотрите прежде всего на часть с третьего знака после точки: различия обычно начинаются отсюда. Запишите показания каждого окружения, это база окружения.

Шаг 2: сверить согласованность. Изменение чисел лишь начало:

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

Три пункта пройдены, параметр готов. Иначе вернитесь и сверьте режим.

Частые вопросы

На странице проверки ClientRects горит красным: окружение точно проблемное?

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

Меняет ли масштаб браузера отпечаток ClientRects?

Меняет. Масштаб попадает прямо в конвейер верстки, округление прямоугольников меняется вслед за ним. Но масштаб является нормальным поведением всех пользователей. Риск в другом: состояние масштаба не совпадает с параметрами экрана, заявленными окружением. Стабильная между сессиями часть по-прежнему определяется стеком рендеринга.

Можно ли отключить ClientRects?

Нельзя. Расчет верстки является основой нормальной работы страницы: набор текста, позиционирование всплывающих окон, анимация зависят от него. Браузер не предоставляет выключателя. Практика отрасли: снижать точность, а не отключать, Tor Browser округляет измеренные значения, чтобы сократить опознаваемые различия.

Почему headless-браузеры легко выдают себя размерами элементов?

Вьюпорт headless-окружения по умолчанию очень фиксирован, стек рендеринга текста однообразен. Измеренные прямоугольники часто не совпадают с устройством, которое заявляет декларируемый UA. Риск-системы сверяют rect с прочими декларируемыми параметрами, такие окружения легко выделяются.

Заключение

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

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