Canvas

1. Что такое Canvas в отпечатках браузера

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

Один и тот же текст, градиенты или фигуры могут визуализироваться в разных браузерах с небольшими визуальными отличиями, обусловленными:

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

Эти различия на уровне пикселей формируют уникальный идентификатор устройства на разных сайтах.

2. Как платформы обнаруживают отпечатки Canvas

Сбор отпечатков Canvas происходит через добавление скрытого элемента <canvas> в DOM и выполнение стандартных команд рисования для извлечения растровых данных.

Пример тестового кода, используемого платформами:

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

// Рисование стилизованного текста
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 10, 10);
ctx.fillStyle = "#00f";
ctx.fillText("FlashID", 2, 2);

// Извлечение PNG в base64
const dataURL = canvas.toDataURL();

Платформы анализируют эти данные для:

1. Сравнения пиксельных выходных данных
2. Хеширования PNG/JPEG
3. Обнаружения особенностей рендеринга — например, различий в отображении текста или градиентов
4. Использования свойств Canvas2DRenderingContext для вывода характеристик
5. Корреляции с WebGL и WebGPU для построения единого идентификатора рендеринга

Кроме того:

• Браузеры с подменённым navigator.userAgent, но реальным движком рендеринга, всё равно генерируют уникальный вывод Canvas
• Headless-системы показывают нестабильный рендеринг, что служит маркером для обнаружения

3. Как FlashID маскирует отпечатки Canvas

FlashID использует многоуровневую технику маскировки Canvas, защищая от идентификации и анализа рендеринга текста.

Защита включает:

1. Маскировку Canvas.toDataURL и toBlob

• FlashID перехватывает вывод данных и заменяет их на заранее сгенерированные стабильные хеши в 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. Наша маскировка не требует изменений браузера, специальных хуков или радикальных модификаций — она работает незаметно, сохраняя логику и ожидаемое поведение рендеринга.

Рекомендуемое Чтение