Canvas Фингерпринтинг vs WebGL: различия в точности и уязвимостях

Браузерный фингерпринтинг — это технология, позволяющая узнавать пользователя в сети по уникальному “отпечатку” его устройства, даже если традиционные методы вроде файлов cookies отключены или по какой то причине с их помощью не получается узнать посетителя. Классический пример: вы заходите на сайт в приватном режиме без куки, а он все равно вас узнает при следующем. Как? Дело в том, что браузер непроизвольно выдает массу информации о себе и системе. Техника браузерного отпечатка собирает эти открытые данные — от версии ОС и списка шрифтов до характеристик видеокарты — и формирует из них уникальный идентификатор. Современные методы способны идентифицировать более 90% пользователей с высокой точностью. Иными словами, вероятность встретить двух людей с одинаковым “отпечатком” чрезвычайно мала.

Среди множества параметров особое место занимают графические характеристики системы. Визуализация — один из самых “богатых” источников энтропии для отпечатка: как ни странно, каждый компьютер рисует одни и те же изображения чуть-чуть по-разному. На этом основаны две мощные техники трекинга — Canvas фингерпринтинг и WebGL фингерпринтинг. Давайте разберем, что они собой представляют.

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

Canvas-фингерпринтинг: как браузер рисует ваш портрет

Начнем с Canvas-фингерпринтинга. HTML5 ввел элемент <canvas>, изначально предназначенный для рисования графики средствами JavaScript. Идея отслеживания через Canvas появилась в начале 2010-х. Все держится на том, что двух абсолютно одинаково настроенных систем практически не существует. Разные устройства и браузеры по-разному рендерят графику и текст — это незаметно для глаз, но различимо на уровне пикселей.

Как это работает? Сайт встраивает скрытый <canvas> (пользователь его не видит) и с помощью JavaScript рисует на нем тестовое изображение. Обычно рисуют текстовую строку нестандартным шрифтом, добавляют цветные фигуры, градиенты, тени — то есть создают сложную картинку, задействуя максимум возможностей рендеринга.

Пример:

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 200; 
canvas.height = 50;
ctx.textBaseline = "top";
ctx.font = "20px Arial";
ctx.fillStyle = "#f60";
ctx.fillText("Fingerprint", 10, 10);

// Дополнительная отрисовка для большей уникальности (как в примерах)
ctx.fillStyle = "#069";
ctx.fillRect(125, 1, 62, 20);
ctx.fillText("🔍 Test", 2, 15);

let data = canvas.toDataURL();

// Простая hash-функция (как в оригинальном примере)
let hash = 0;
for (let i = 0; i < data.length; i++) {
    hash = (hash << 5) - hash + data.charCodeAt(i);
    hash |= 0; 
}
console.log("Canvas hash:", hash);
console.log("Data URL (первые 50 символов):", data.substring(0, 50) + "...");

Этот дополненный скрипт создает холст размером 200×50 пикселей, рисует оранжевым цветом слово «Fingerprint» вверху слева, добавляет синий прямоугольник и эмодзи «🔍 Test» для повышения уникальности рендеринга, затем вычисляет простой хеш от Data URL изображения.  На разных компьютерах (и даже в разных браузерах на одном ПК) этот хеш будет отличаться.

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

• Шрифты и сглаживание. Каждая ОС и браузер применяют свои алгоритмы антиалиасинга, рендеринга шрифтов, субпиксельной оптимизации. Малейшие отличия (например, толщина сглаживания) приведут к изменению отдельных пикселей.
• Графический движок. Chrome, Firefox, Safari и др. используют разные графические библиотеки и настройки вывода. Плюс настройки цветопередачи, профили гаммы — все влияет на итоговое изображение.
• GPU и драйвер. Отрисовкой занимается ваша видеокарта (или интегрированная графика) — разные модели GPU дают разные результаты. Даже драйвер видеокарты влияет: обновите драйвер — и Canvas-отпечаток может измениться.
• Окружение. В дело идут размеры окна, плотность пикселей дисплея, установленные языковые пакеты (они могут влиять на шрифты) и т.д. Все “мелочи” складываются в уникальный узор.

После рисования страница вызывает, как в примере выше, метод canvas.toDataURL() или getImageData(), чтобы получить сырой пиксельный вывод. Далее эти данные хешируются — обычно в строку. Этот хеш и есть ваш Canvas фингерпринт. Он отправляется на сервер, где сохраняется как идентификатор. При повторном визите скрипт вновь нарисует то же самое и получит хеш — если он совпадает с сохраненным, сайт “узнает” вас, даже если вы приходите без куки и с нового IP.

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

WebGL-фингерпринтинг: глубокий анализ GPU

Теперь рассмотрим WebGL-фингерпринтинг. WebGL (Web Graphics Library) — это браузерный API для работы с 3D-графикой, по сути JavaScript-обертка над возможностями OpenGL/DirectX вашей видеокарты. WebGL позволяет рисовать сложные 3D-сцены прямо на веб-странице. Кстати, эта способность легла в основу и Canvas фингерпринтинга, о котором говорили выше. Если Canvas смотрит на различия в 2D-ререндере текста и простых фигур, то WebGL “копает” прямо в графический процессор и извлекает особенности 3D-рендеринга устройства.

Как работает WebGL-фингерпринтинг? Сценарий упрощенно такой:

1. Скрипт создает скрытый Canvas с 3D-контекстом: canvas.getContext("webgl") или ("webgl2"). При инициализации WebGL сразу можно запросить ряд базовых сведений — например, строку RENDERER/VENDOR, которая обычно содержит название GPU и драйвера. Через расширение WEBGL_debug_renderer_info скрипт может получить настоящее имя видеокарты (например, "Intel UHD Graphics 630") и производителя ("Intel"). Кроме того, доступны сведения о версии драйвера, версии WebGL/GLSL, поддерживаемых расширениях и максимальных возможностях (размеры текстур, точность шейдеров и пр.). Фактически, на этом шаге уже собирается “паспорт” графической подсистемы.
2. Далее рендерится тестовая 3D-сцена. Скрипт может нарисовать набор примитивов (треугольники, кубы) с различными шейдерами, источниками света, текстурами. Задача — задействовать разные части графического конвейера (вершинный шейдер, фрагментный шейдер, текстурирование, буфер глубины и т.д.), чтобы проявились нюансы работы GPU.
3. После отрисовки страница считывает результат. WebGL предоставляет метод gl.readPixels(), чтобы получить массив пикселей нарисованной сцены. Помимо пиксельных данных, скрипт обычно собирает и параметры контекста: какие расширения доступны, какие максимальные значения возвращают функции. В совокупности получается довольно большой набор чисел и строк — неявно описывающий вашу систему.
4. Все собранные данные хешируются, а дальше точно также как и с предыдущим методом — выходит строка, которая и является WebGL-отпечатком. Он отсылается на сервер для идентификации вашего устройства при последующих визитах.

Чем же WebGL-отпечаток отличается от Canvas? Главное — богатством деталей. Canvas по сути дает один короткий хеш изображения. WebGL же сразу раскрывает технические детали (GPU, драйвер) плюс формирует изображение, чувствительное к тонкостям работы 3D-пайплайна. Например, двумя разными моделями видеокарт (скажем, NVIDIA vs AMD) сгенерированные изображения будут существенно отличаться из-за различий архитектуры — это сразу уловит фингерпринт-хеш. Но что еще интереснее: даже два компьютера с одинаковой моделью GPU могут отличиться. Различия могут дать версия драйвера, количество видеопамяти, порядок подключения карты к системе и прочие “тонкие” факторы. WebGL способен выявить совсем уж микроскопические отличия.

WebGL-фингерпринт обладает очень высокой энтропией, значительно большей, чем у Canvas. Он буквально получает “слепок” графического оборудования. Если Canvas можно сравнить с идентификацией по почерку, то WebGL — это как идентификация по микроскопическому рисунку отпечатка пальца.

WebGL-отпечаток иногда менее стабилен во времени, чем Canvas. Поскольку он зависит от множества аппаратных нюансов, замена драйвера или изменение конфигурации может слегка его изменить. Впрочем, при неизменном окружении WebGL-хеш останется постоянным. Уже есть техники, которые делают WebGL-отпечаток кросс-браузерным — измеряется производительность графики, такие признаки не зависят от браузера, что позволяет узнавать устройство даже при смене браузеров. Но это уже за рамками нашей темы.

Точность идентификации: Canvas vs WebGL

Под точностью здесь подразумевается способность однозначно отличить одного пользователя от другого, то есть уникальность отпечатка. Если у техники низкая энтропия, разные люди могут иметь одинаковый отпечаток; если высокая — вероятность коллизии стремится к нулю.

Canvas-фингерпринтинг дает порядка нескольких бит энтропии. На практике большинство устройств уникально, хотя бывают совпадения у очень похожих окружений (например, два одинаковых смартфона с одной прошивкой). Уникальность Canvas-отпечатка — умеренная. Он отлично отличает разных людей на разных ПК, но уже меньше помогает, если сравнивать, скажем, один и тот же ноутбук под Windows в Chrome и Firefox — тут Canvas-хеш может совпасть.

Для WebGL ситуация иная. Благодаря обилию собираемых данных WebGL-отпечаток способен отличить подавляющее большинство устройств. Уникальность WebGL-фингерпринта превышает 98% — то есть шанс менее 2%, что два независимых устройства неразличимы для этого метода. В сочетании с Canvas и другими факторами уникальность стремится к 100%. Небольшой остаток неопределенности связан обычно с устройствами, у которых очень схожие характеристики (например, несколько экземпляров одного смартфона модели N); и то их может спасти от различения только простота теста. Если же тест продвинутый, даже такие устройства будут разведены по разным отпечаткам.

Почему WebGL дает больше точности? Как уже упомянул выше — причина в глубине анализа. Canvas проверяет “поверхностные” вещи — отрисовку шрифтов, 2D-графику. Разница между двумя машинами может быть не столь велика: множество пользователей используют, к примеру, Windows 10 + Chrome, с похожим набором шрифтов — их Canvas-хеши могут совпадать. WebGL же лезет на уровень железа: даже если у всех Windows 10 + Chrome, видеокарты у всех разные (а если и модель одна, то драйверы или настройки разные). К тому же 3D-рендеринг вводит больше переменных.

В плане ресурсов и скорости Canvas быстрее и почти не нагружает систему. WebGL-сбор отпечатка тяжелее — нужно прогнать графические операции, возможно, за несколько десятков миллисекунд загрузить GPU. Однако это по-прежнему не заметно для пользователя. Многие сайты идут на это ради точности и комбинируют оба метода. Сначала считают Canvas-хеш, потом WebGL-хеш и используют оба. Так достигается максимальная вероятность уникальности. Тем более, WebGL может иногда меняться , а Canvas более стабилен, так что один метод подстраховывает другой.

Если подыскиваете антидетект браузер, которые не хорошо генерит Canvas фингерпринт, рекомендуем обратить внимание на наш рейтиг антидетект-браузеров.

Уязвимости и методы защиты

Насколько легко обходятся Canvas и WebGL-фингерпринты, и есть ли у них уязвимости.

1. Блокировка и уведомление. Самый простой способ — не дать скрипту получить отпечаток. Некоторые браузеры внедрили защиты: Firefox имеет настройку privacy.resistFingerprinting, при которой попытки доступа к Canvas вызовут запрос на разрешение у пользователя. Расширения вроде CanvasBlocker для Firefox и Chrome могут возвращать пустой ответ вместо Canvas-изображения. Таким образом сайт либо вообще не получит хеш, либо получит бесполезный одинаковый результат для всех защищенных пользователей. Уязвимость метода Canvas тут в том, что его вызов относительно легко отслеживается и блокируется — toDataURL() и подобные функции можно перехватить. WebGL заблокировать сложнее, но тоже возможно: можно вовсе отключить WebGL в настройках (правда, тогда некоторые сайты будут работать неправильно). Более гибкий подход — разрешать WebGL, но подменять возвращаемые данные.
2. Подмена и шум. Полное отключение Фингерпринтинг-параметров делает вас “неузнаваемым”, но и очень подозрительным: отсутствие Canvas/WebGL-данных само по себе выделяет вас из толпы, у большинства все есть, а вы как белая ворона. Поэтому появился класс решений: антидетект-браузеры, которые делают наоборот — они не прячут отпечаток, а подделывают его. Идея в том, чтобы у каждого вашего профиля был какой-то отпечаток, но не ваш реальный. Кто то генерирует небольшой случайный шум при отрисовке Canvas/WebGL, из-за чего каждый профиль рисует одно и то же изображение по-разному. Внешне вы этого не заметите, но хеши получаются разные. В идеале такой шум должен выглядеть правдоподобно, словно это действительно другой компьютер. Однако здесь кроется уязвимость уже не метода, а пользователя: слишком грубая подмена выдает себя. Современные трекинг-системы умеют распознавать “ненастоящие” отпечатки. Например, если вы заявляете браузеру одну модель GPU, а по WebGL-рендеру видно несоответствие — вас заподозрят. Антидетект-браузеры пытаются шуметь Canvas, поэтому антифрод-системы стали сверять Canvas-отпечаток с данными WebGL: проверяют, совпадает ли стиль рендеринга с декларируемой видеокартой, нет ли аномально больших ошибок рендеринга. Также вводят активные проверки: например, сайт может выполнить несколько разных WebGL-шейдеров и собрать статистику ошибок округления. Если она выходит за пределы типичных для данной GPU — возможно, это эмулированный веб-рендер, а не настоящий. В общем, борьба идет на тонком уровне: обычному пользователю такие вещи недоступны, но создатели антибот-платформ тщательно ищут сигнатуры подмены.
3. Сложность спуфинга WebGL. Canvas отпечаток подделать проще — достаточно вернуть скрипту какой-то фиксированный хеш или изображение. Да, это может выдать, что “Canvas защищен”, но технически сделать легко. С WebGL все намного сложнее. WebGL-отпечаток опирается на аппаратные функции, эмулировать которые крайне трудно. Например, одна из составляющих — производительность выполнения графических операций. Если попытаться программно замедлять или ускорять эти операции, чтобы имитировать другую видеокарту, почти наверняка будут несостыковки. WebGL-фингерпринтинг очень сложно обойти спуфингом. Требуется воспроизвести поведение сотен низкоуровневых параметров GPU, а малейшая ошибка — и все, вас поймали. Поэтому подход антидетект-браузеров — не пытаться выдать себя за конкретное другое устройство, а просто сделать уникальный шумовой отпечаток, не совпадающий с вашим реальным. Это защищает от массового трекинга, но все равно может быть заметно для продвинутого антифрода.
4. Противодействие на уровне браузеров. Разработчики браузеров не стоят в стороне. Тор Browser пошел путем максимального выравнивания окружений: у всех пользователей Тора пытаются сделать одинаковые отпечатки (например, отключены специфичные шрифты, Canvas искажается). Firefox в режиме ResistFingerprinting рисует Canvas с небольшим шумом и возвращает усеченные строки GPU (через WEBGL_debug_renderer_info выдается “Mozilla” вместо реального GPU). Браузер Brave внедрил рандомизацию Canvas/WebGL на уровне движка: каждый новый сеанс браузера имеет случайный “отпечаток”, не связанный с предыдущим. Это снижает трекинг, хотя полностью не устраняет возможность идентифицировать сессию внутри одного визита. Любое защитное действие может выступить новым фактором для отпечатка. Например, включенный CanvasBlocker сам по себе обозначит вас как уникальную личность (“человек, у которого Canvas всегда пустой”).

Минутка душноты — Спуфинг — это техника подмены или маскировки, попытка выдать себя за доверенный источник (человека, устройство, сайт или сервер), чтобы обмануть систему или пользователя и получить доступ к данным.

В целом же, можно сказать, что Canvas-фингерпринтинг чуть более уязвим к защите: его можно и выключить, и подделать сравнительно безопасно. WebGL-фингерпринтинг гораздо устойчивее: если он доступен, то выдать ложные данные непросто. Не зря WebGL однин из самых труднообходимых методов фингерпринтинга. Для полной невидимости приходится идти на жесткие меры — отключать WebGL/Canvas, использовать виртуальные машины или одинаковые шаблонные системы — что в обычной жизни мало применимо.

Специфика автоматизации: Puppeteer, Playwright и Linux-серверы

Когда вы разворачиваете парсер на удаленном Linux-сервере в headless-режиме, возникает критическая проблема: отсутствие графической подсистемы (X-сервера). В таких условиях браузер не может аппаратно отрендерить Canvas или WebGL и генерирует абсолютно пустой или стандартизированный отпечаток.

Для систем защиты уровня Cloudflare пустой Canvas — это немедленный маркер скрипта. Чтобы вернуть базовые функции рендеринга и сымитировать реальное устройство при консольном запуске, необходимо использовать программные эмуляторы дисплеев (например, Xvfb — X virtual framebuffer) в связке с плагинами маскировки вроде puppeteer-extra-plugin-stealth.

Реальные примеры и сферы применения

Методы Canvas и WebGL Fingerprinting сегодня широко распространены в веб-индустрии. Первые известные случаи использования Canvas-отпечатков были зафиксированы уже в 2014 году: тогда выяснилось, что популярный виджет AddThis тайно генерировал Canvas-хеши на сайтах и тем самым отслеживал пользователей. После огласки многие сайты временно приостановили эту практику, но ненадолго — через пару лет фингерпринтинг стал частью арсенала рекламных трекеров. 

Реклама и аналитика. Рекламные сети строят детальные профили пользователей, комбинируя десятки параметров (User Agent, часовой пояс, экран, шрифты и т.д.), включая Canvas и WebGL. Эти методы позволяют им однозначно узнавать человека при заходе на разные сайты — так происходит кросс-сайтовое слежение. Например, заходя на сайт А и сайт Б, не связанных друг с другом, вы можете оставить один и тот же Canvas/WebGL-отпечаток, по которому партнерская рекламная сеть поймет, что это вы. В итоге вам покажут связанные объявления. Canvas и WebGL используются потому, что устойчивы к очистке браузера: пользователь может удалить куки, но отпечаток останется тем же.

Антифрод и безопасность. Другой важный сектор — системы безопасности и антифрода. Банки, платежные шлюзы, крупные онлайн-сервисы не хотят, чтобы мошенник просто очистил куки или сменил браузер и избежал выявления. Поэтому они внедряют скрытые сборщики отпечатков: как только вы заходите под своей учетной записью, системе привязывает к вам ваш Canvas/WebGL и другие сигнатуры. Если в следующий раз кто-то попытается войти с другими куки, но с тем же самым отпечатком устройства — вероятно, это вы, просто под другим аккаунтом (возможна попытка мультиаккаунта). Или наоборот — если по вашему аккаунту внезапно появляется совсем другой отпечаток компьютера, систему это насторожит (возможно, аккаунт угнали и входят с другого устройства). WebGL здесь очень кстати, потому что его сложно подделать, и даже смена браузера не спасает: ведь рендеринг GPU выдаст, что машина та же самая.

Защита от ботов. С ростом веб-парсинга и бот-трафика отпечатки начали применять и для детектирования ботов. Cloudflare в своей проверке “Вы человек?” может учитывать WebGL-отпечаток: реальные пользователи имеют “естественные” комбинации параметров, тогда как боты на виртуальных машинах или специально сконфигурированных движках могут выдать аномальные значения. Антибот-сервисы собирают обширные фингерпринт-наборы, включая Canvas, WebGL, AudioContext и прочие, и с помощью машинного обучения ищут отклонения. WebGL-хеши часто отправляются на проверку на антибот-сервис, и если он совпадает с известным шаблоном бота — запрос блокируется. Таким образом, отпечаток стал “паспортом” не только для пользователя, но и для бота — у последних он зачастую отличен (например, headless-браузеры могут иметь нестандартный WebGL Vendor/Renderer, сразу выдающий автоматизацию).

Прочие применения. Но WebGL сегодня используют и в благих целях: например, для адаптивного подбора контента. Некоторые сайты проверяют возможности GPU через WebGL и, настраивают качество графики (как игры в браузере) или предложить контент, оптимизированный под вашу систему. Однако такие случаи редки; в основном WebGL-отпечаток — это про трекинг.

Заключение

И Canvas-, и WebGL-фингерпринтинг — мощные инструменты, позволяющие собрать уникальный цифровой “портрет” вашего устройства. Canvas анализирует, как ваша система рисует 2D-графику — шрифты, формы, цвета — и находит в этом уникальные штрихи. WebGL идет дальше и изучает 3D-возможности, фактически раскрывая характеристики видеокарты и ее поведения. Разница в точности между ними значительна: Canvas дает уникальность на уровне большинства случаев, но WebGL стремится к уникальности почти каждого отдельного устройства. WebGL-техника богаче и сложнее, поэтому и отпечаток получается более подробным.

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

Для разработчиков же Canvas и WebGL отпечатки — это ценный инструмент, но обращаться с ним нужно осторожно.