Що таке фінгерпринт 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-зображення. Режимів лише два: режим 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.