Отпечаток пальца на холсте: что это такое и как его обойти

Что такое Canvas Fingerprinting

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

Браузерный отпечаток состоит из следующей информации о браузере: модель устройства, тип и версия браузера, операционная система (ОС), разрешение экрана, часовой пояс, идентификатор формата файла p0p, временная метка, строка User Agent (UA), языковые настройки, плагины, расширения.

Canvas fingerprinting - это одна из таких технологий браузерного отпечатка. Она основана на элементе Canvas в коде HTML5 (Hypertext Markup Language) Web.

Как работает Canvas Fingerprinting?

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

Вот краткий обзор шагов, необходимых для создания отпечатка Canvas для веб-сайта:

1. Пользователь посещает веб-сайт.
2. Веб-сайт запускает JS-скрипт Canvas fingerprinting.
3. HTML генерирует невидимое изображение в браузере.
4. Скрипт создает представление изображения в формате Base64 на основе ОС, браузера и графического процессора клиента.
5. Затем вычисляется хеш этого представления.

Расстроены тем, что веб-скрейпинг снова и снова блокируется?
Бесплатный Nstbrowser обрабатывает ротацию IP-адресов и разблокировку веб-сайтов за вас.
Попробуйте бесплатно!
Есть ли у вас хорошие идеи или вопросы о веб-скрейпинге и Browserless?
Посмотрите чем делятся другие разработчики в Discord и Telegram!

Canvas Fingerprinting vs. Browser Fingerprinting: В чем разница?

Canvas Fingerprinting

Методология:

1. Элемент HTML5 canvas: Canvas fingerprinting основывается на элементе canvas HTML5 для рендеринга графики.
2. Рендеринг графики: Скрипт рендерит графику (например, текст, фигуры) на canvas.
3. Захват данных изображения: Пиксельные данные отрендеренной графики захватываются с помощью метода toDataURL.
4. Уникальные особенности: Различия в рендеринге из-за таких факторов, как браузер, операционная система, графическая карта и установленные шрифты, приводят к уникальному изображению.
5. Хеширование: Данные изображения хешируются для создания уникального отпечатка.

Browser Fingerprinting

Методология:

1. Множественные атрибуты: Browser fingerprinting использует комбинацию множества атрибутов для создания уникального идентификатора.
2. Собираемые атрибуты: Общие атрибуты включают:

• Строка User-Agent: Информация о браузере, версии и операционной системе.
• Разрешение экрана: Размер экрана устройства и глубина цвета.
• Установленные плагины: Список плагинов браузера и их версии.
• Шрифты: Установленные на устройстве шрифты.
• Часовой пояс: Часовой пояс устройства.
• Язык: Предпочитаемые языковые настройки.
• Куки и хранилище: Возможность хранения и извлечения куки, локального хранилища и сессионного хранилища.
• WebGL и Canvas: Возможности и производительность рендеринга.
• Аудиоконтекст: Характеристики аудиооборудования.

Canvas Fingerprinting vs. Cookies: В чем разница?

Canvas Fingerprinting

Методология:

1. Элемент HTML5 canvas: Использует элемент HTML5 canvas для рендеринга графики.
2. Рендеринг графики: Скрипт рисует графику на canvas.
3. Данные изображения: Пиксельные данные отрендеренной графики захватываются с помощью метода toDataURL.
4. Хеширование: Данные изображения хешируются для создания уникального идентификатора или отпечатка на основе тонких вариаций в рендеринге.

Cookies

Методология:

1. Хранение данных: Небольшие части данных, хранящиеся на устройстве пользователя браузером по запросу веб-сервера.
2. Типы куки:

• Сессионные куки: Временные и удаляются при закрытии браузера.
• Постоянные куки: Хранятся до истечения срока или удаления пользователем.
• Куки третьих сторон: Устанавливаются доменами, отличными от посещаемого пользователем, часто используемые рекламодателями и аналитиками.

Как обойти Canvas Fingerprinting с помощью Nstbrowser?

Canvas Noise - это техника предотвращения обнаружения отпечатков путем добавления случайного шума в элементы HTML5 Canvas. Если два изображения отличаются, они будут иметь разные значения хеша.

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

Вот простая реализация Canvas Noise:

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Noise Example</title>
</head>
<body>
<canvas id="canvas" width="200" height="50"></canvas>
<script>
    // Получить элемент canvas и его 2D контекст рендеринга
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    // Шаг 1: Нарисовать оригинальное изображение
    // Установить базовую линию текста и шрифт
    ctx.textBaseline = 'top';
    ctx.font = '14px Arial';
    ctx.textBaseline = 'alphabetic';
    
    // Нарисовать заполненный прямоугольник
    ctx.fillStyle = '#f60';
    ctx.fillRect(125, 1, 62, 20);
    
    // Нарисовать первый текст
    ctx.fillStyle = '#069';
    ctx.fillText('Hello, world!', 2, 15);
    
    // Нарисовать второй текст с прозрачностью
    ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
    ctx.fillText('Hello, world!', 4, 17);
    
    // Шаг 2: Добавить случайный шум к изображению
    // Получить данные изображения с canvas
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    
    // Пройтись по каждому пикселю и добавить случайный шум
    for (var i = 0; i < data.length; i += 4) {
        // Добавить шум к красному каналу
        data[i] += Math.floor(Math.random() * 10) - 5;     // Красный
        // Добавить шум к зеленому каналу
        data[i+1] += Math.floor(Math.random() * 10) - 5;   // Зеленый
        // Добавить шум к синему каналу
        data[i+2] += Math.floor(Math.random() * 10) - 5;   // Синий
    }
    
    // Поместить измененные данные изображения обратно на canvas
    ctx.putImageData(imageData, 0, 0);
    
    // Конвертировать canvas в URL данных и вывести его
    var dataURL = canvas.toDataURL();
    console.log(dataURL);
    
    // Сгенерировать хеш SHA-256 из URL данных и вывести его
    sha256(dataURL).then(hash => console.log(hash));
    
    // Функция для генерации хеша SHA-256
    function sha256(str) {
        return crypto.subtle.digest('SHA-256', new TextEncoder

().encode(str)).then(buffer => {
            return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
        });
    }
</script>
</body>
</html>

Nstbrowser - замечательный браузер с поддержкой настройки отпечатков Canvas. При создании профиля, отпечаток Canvas по умолчанию находится в режиме Noise, который добавляет случайный шум к Canvas, но также поддерживает режим Real, который соответствует реальному отпечатку Canvas браузера:

Ниже мы создаем 9 отпечатков Canvas для профилей в режиме Noise и Real с помощью Nstbrowser, а затем сравниваем отпечатки Canvas моего локального реального браузера, посещая Browserleaks Canvas fingerprinting detection:

• Отпечатки Canvas реального браузера моего устройства

• Отпечатки Canvas режима Real в Nstbrowser:

• Отпечатки Canvas режима Noise в Nstbrowser:

Сравнивая, мы можем легко увидеть, что отпечаток в режиме Canvas Real совпадает с отпечатком моего локального реального браузера, в то время как отпечаток Canvas каждого профиля в режиме Canvas Noise отличается и уникален.

Плюсы и минусы Canvas Fingerprinting:

Плюсы:

• Эффективное отслеживание. Canvas fingerprinting предоставляет более устойчивый и точный метод отслеживания пользователей, чем традиционные куки.
• Трудно обнаружить. Пользователи часто не знают о Canvas fingerprinting, поэтому он обычно не обнаруживается и не блокируется.

Минусы:

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

Законность Canvas Fingerprinting

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

Однако, нормативные акты, регулирующие технологии распознавания отпечатков, все еще развиваются, и правовая ситуация в многих странах пока неясна.

При использовании Canvas fingerprinting операторы веб-сайтов должны следовать местным законам и нормативам о конфиденциальности.

Основные выводы

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

В долгосрочной перспективе отслеживание веб-сайтов неизбежно. Лучший способ - контролировать, как нас отслеживают в Интернете. В этом поможет лучший антидетект-браузер - Nstbrowser.

Современные технологии разблокировки веб-сайтов и антидетект-системы помогают скрыть вашу конфиденциальность и позволяют заниматься веб-скрейпингом.

Попробуйте бесплатно сейчас!