Canvas API призначений для малювання графіки у веб-браузері. Його можна використовувати для анімації, ігрової графіки, візуалізації даних, редагування зображень, обробки відео в реальному часі тощо. Його також можна використовувати для онлайн-відстеження за допомогою відбитків пальців браузера. Технологія базується на змінах у тому, як зображення полотна рендериться в різних веб-браузерах і платформах, щоб створити персоналізований цифровий відбиток браузера користувача. Але це можливо повторити в тому ж обладнанні.

Виявлення функції Canvas

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL(зазвичай використовується для розпізнавання відбитків пальців)
• OffscreenCanvas API
• Canvas native

  Функцію Canvas toDataURL також можна змінити плагінами браузера, але її легко ідентифікувати

• стабільність

  Canvas стабільний на тому самому пристрої та середовищі веб-переглядача

• нелюдський шум

  Деякі браузери відбитків пальців або плагіни відбитків пальців можуть додавати параметри до шуму полотна, але вони все одно можуть розпізнаватися.

Деталі зображення

Причини появи відбитків пальців на полотні

Спосіб візуалізації зображення Canvas на полотні може відрізнятися залежно від веб-браузера, операційної системи, відеокарти та інших факторів, у результаті чого створюється унікальне зображення, яке можна використовувати для створення відбитка пальця.

1. Згладжування

Згладжування — це свого роду фільтр краси, і він широко використовується. Якщо згладжування шрифтів не ввімкнено в операційній системі, деякі шрифти виглядатимуть жахливо на моніторі комп’ютера. Загалом, операційні системи Windows увімкнуть згладжування шрифтів і зображень за замовчуванням. У Mac OS X згладжування працює лише для шрифтів меншого розміру. Не лише на рівні операційної системи, деякі браузери також мають власну вбудовану технологію згладжування. Наприклад, Safari використовує власний вбудований механізм відтворення шрифтів. І що найголовніше, технологія згладжування також працює під час малювання шрифтів і зображень на Canvas.

Як показано на малюнку нижче, ліворуч показано стан, коли згладжування шрифту не ввімкнено, а праворуч — увімкнено:

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

2. Підказка шрифту

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

За допомогою наступного GIF-зображення, яке є колекцією зображень полотна від десятків різних користувачів, ми можемо інтуїтивно побачити відмінності у представленні того самого коду в різних середовищах пристроїв:

Як показано в деталях зображення вище, загалом ми можемо викликати функцію toDataURL, щоб отримати дані base64 зображення Canvas, або ми можемо отримати контрольну суму CRC блоку IDAT із блоку даних зображення PNG, створеного Canvas. Потім ми можемо обчислити хеш цього рядка (контрольна сума base64 або CRC) (точний алгоритм залежить від сайту до сайту) як відбиток Canvas.

Примітка. Є багато причин, чому відбитки Canvas відрізняються від веб-сайту (контрольна сума base64 або CRC), різні алгоритми хешування (MD5, SHA, MUMUHASH тощо) роблять відбитки Canvas абсолютно різними Відбиток Canvas є стабільним, тому в тому самому веб-переглядачі та середовищі пристрою відбиток Canvas на тому самому веб-сайті фіксується. Це також є теоретичною основою для використання відбитків пальців Canvas для ідентифікації з допомогою користувача, які мають стабільні властивості.