Canvas

1. Що таке Canvas у відбитках браузера

Canvas (HTMLCanvasElement) — це широко підтримуваний API, що використовується для рендерингу 2D-графіки та зображень у вебі. Хоча він переважно використовується для малювання фігур та маніпулювання зображеннями, він широко застосовується в механізмах відбитків браузера через його напівдетермінований піксельний вивід.

Кожен браузер, що використовує Canvas, може рендерити той самий текст, градієнти або фігури з тонкими візуальними відмінностями, на які впливають:

• Стан прискорення GPU (увімкнено/вимкнено)
• Рушій рендерингу шрифтів (FreeType, DirectWrite, CoreText тощо)
• Згладжування, субпіксельна точність
• Стек обробки Canvas та зображень (Skia у браузерах на базі Chromium)

Ці відмінності на рівні пікселів формують основу для унікальної ідентифікації пристроїв на різних сайтах.

2. Як платформи виявляють відбитки Canvas

Відбитки Canvas створюються шляхом додавання прихованого DOM-елемента <canvas> та виконання стандартизованих команд малювання для вилучення растрових піксельних даних.

Приклад тестового коду, який використовується платформами для створення відбитків:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d");

// Draw a styled text
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 10, 10);
ctx.fillStyle = "#00f";
ctx.fillText("FlashID", 2, 2);

// Extract base64-encoded PNG
const dataURL = canvas.toDataURL();

Платформи для відбитків аналізують ці дані, щоб:

1. Порівняти вивід піксель за пікселем
2. Хешувати закодовані виводи PNG/JPEG
3. Виявити відбитки конвеєра рендерингу — наприклад, тонкі відмінності у компонуванні тексту або обробці градієнтів
4. Використовувати властивості Canvas2DRenderingContext для висновків про функції
5. Корелювати з виводом WebGL та WebGPU для створення послідовної ідентичності рендерингу

Крім того:

• Браузери з підробленим navigator.userAgent, але реальними рушіями рендерингу все одно генеруватимуть унікальний вивід Canvas
• Безголові та автоматизовані системи демонструють непослідовну поведінку рендерингу, що є червоним прапорцем для виявлення

3. Як FlashID маскує відбитки Canvas

FlashID пропонує багатошарову техніку маскування Canvas, яка захищає від ідентифікації на основі Canvas та аналізу рендерингу тексту.

Захист FlashID включає:

1. Маскування Canvas.toDataURL та toBlob

   • FlashID перехоплює вивід даних рендерингу Canvas і замінює його на попередньо згенеровані стабільні хеші base64
   • Імітує фальшиві джерела PNG, зберігаючи при цьому ту саму поведінку кодування та схему стиснення

2. Віртуальний рендеринг тексту та фігур

   • Створює послідовний фальшивий піксельний вивід для будь-якого шаблону малювання
   • Фальшива поведінка згладжування, що імітує стандартні настільні, мобільні або навіть фреймбуфери зі старих систем

3. Підробка Canvas2DRenderingContext

   • Приховує/мінімізує виявлення на основі викликів, таких як isPointInPath, measureText, getImageData, createLinearGradient тощо.

4. Рушій внутрішньої узгодженості шрифтів

   • Імітує стек рендерерів шрифтів, таких як CoreText, Skia, Freetype, не покладаючись на реальну растеризацію шрифтів операційної системи

5. Функції рендерингу для боротьби з криміналістикою

   • Дозволяє користувачам рандомізувати або блокувати відповіді рендерингу для кожної сесії браузера
   • Повністю підтримує недетерміновані (рандомізовані), статичні (попередньо встановлені) або нормалізовані (змішані) стратегії рендерингу

6. Інтеграція з WebGL, WebGPU та ImageData

   • Створює відповідні, уніфіковані профілі рендерингу GPU+Canvas
   • Запобігає сигналам про невідповідність між API рендерингу

Платформи, що покладаються на Canvas для створення відбитків (включаючи Panopticlick, FingerprintJS та комерційні рушії AML), перемагаються FlashID. Наше маскування Canvas не вимагає патчів браузера, спеціальних хуків або радикальних модифікацій — воно працює тихо, зберігаючи логіку рендерингу та очікувану поведінку.

Вам також може сподобатися