Canvas API разработан для рисования графики в веб-браузерах. Он может быть использован для анимации, игровой графики, визуализации данных, редактирования изображений и обработки видео в реальном времени, а также для отслеживания в Интернете с помощью идентификации браузеров. Эта технология зависит от изменений в отображении изображений на холсте в различных веб-браузерах и платформах для создания индивидуального цифрового отпечатка пользователя. Однако она может повторяться в полностью идентичных условиях оборудования.

Проверка функциональности Canvas

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL（Обычно используется для идентификации по отпечаткам пальцев）
• OffscreenCanvas API
• Canvas native

  Canvas отпечатки также могут быть изменены браузерными плагинами, но их легко распознать.

• Стабильность

  На одном и том же устройстве и в браузере, canvas обладает стабильностью.

• Непроизвольный шум

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

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

Причины создания отпечатков Canvas

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

1. Антиалиасинг

Технология сглаживания контуров аналогична косметическому фильтру, она находит широкое применение. Если в операционной системе не включена функция сглаживания шрифтов, некоторые шрифты на мониторе компьютера могут выглядеть ужасно. Как правило, операционная система Windows включает сглаживание шрифтов и изображений по умолчанию. В Mac OS X, похоже, сглаживание контуров применяется только к шрифтам меньшего определенного размера. Не только на уровне операционной системы, некоторые браузеры также включают свою собственную технологию сглаживания контуров, например, Safari использует свой собственный встроенный движок рендеринга шрифтов. И самое главное, технология сглаживания контуров также работает при рисовании шрифтов и изображений на холсте.

Как показано на рисунке ниже, слева - состояние без включенного сглаживания шрифтов, а справа - с включенным:

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

2. Микрорегулировка шрифта (Font Hinting)

Одной из особенностей микронастройки является подгонка сетки, то есть изменение высоты и ширины символов шрифта для выравнивания их с настройками пиксельной сетки экрана. Изображение отображается на экране в виде маленьких квадратных сеток, и шрифт может смещаться влево или вправо, чтобы обеспечить правильное отображение на сетке. Это также делается для того, чтобы форма и верстка шрифта выглядели примерно одинаково на разных экранах.

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

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

Внимание: причин, по которым отпечатки Canvas отличаются на разных сайтах, много, включая использование разных строк (base64 или CRC контрольная сумма), различные алгоритмы хеширования (MD5, SHA, MUMUHASH и т.д.), которые делают отпечаток Canvas совершенно уникальным. Однако настоящий отпечаток Canvas стабилен, поэтому в одинаковых условиях браузера и устройства отпечаток Canvas на одном и том же сайте будет постоянным. Это также теоретическая основа использования отпечатка Canvas для вспомогательного распознавания пользователя, поскольку он обладает свойством стабильности.