Работа с canvas fingerprinting

Canvas fingerprinting представляет собой один из методов, используемых для идентификации пользователей с помощью веб-браузера. Этот метод основан на рисовании изображения с помощью HTML5 элемента <canvas>, а затем на анализе особенностей полученного изображения, таких как текстуры, цвета и другие визуальные характеристики. Эти данные могут быть уникальными для каждого устройства, создавая цифровой «отпечаток» пользователя.

Работа с canvas fingerprinting в контексте автоматизации браузера при помощи Puppeteer требует понимания принципов его работы, а также способов предотвращения или манипулирования с ним для целей тестирования.

Как работает canvas fingerprinting

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

  • Время рендеринга: разные устройства могут обрабатывать рендеринг по-разному, что влияет на результат.
  • Графические карты: характеристики графических карт, такие как их производительность и особенности обработки, могут влиять на итоговое изображение.
  • Платформа и ОС: использование разных операционных систем и платформ (Windows, macOS, Linux) может привести к различным результатам.
  • Шрифты и разрешение экрана: иногда изображение на canvas может зависеть от установленных шрифтов и разрешения экрана.

Когда это изображение генерируется, его «хэш» используется как уникальный идентификатор для пользователя. Это позволяет сайтам отслеживать и идентифицировать устройства без необходимости использования cookies.

Использование Puppeteer для тестирования и обхода canvas fingerprinting

Puppeteer предоставляет возможность контролировать браузер Chrome/Chromium через API, что открывает большие возможности для работы с элементами веб-страниц, включая canvas. В контексте автоматизации тестов важно понимать, как Puppeteer взаимодействует с canvas, чтобы либо тестировать, либо обходить методы canvas fingerprinting.

Манипуляция с canvas в Puppeteer

Для работы с canvas в Puppeteer нужно получить доступ к самому элементу canvas, а также к его рендерингу. Вот пример, как можно извлечь изображение, получаемое с canvas: 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Навигация на страницу с canvas
  await page.goto('https://example.com/canvas-page');

  // Извлечение данных canvas
  const canvasData = await page.evaluate(() => {
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    // Здесь можно выполнить любые операции с canvas
    return canvas.toDataURL(); // Получить base64 строку
  });

  console.log(canvasData);
  await browser.close();
})();

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

Обход canvas fingerprinting

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

  1. Перехватить рендеринг canvas: Изменить поведение элемента <canvas>, например, заменить стандартные методы рисования на «фиктивные» или пустые.
  2. Манипулировать результатами: Изменить или подменить изображение, которое генерируется на canvas, таким образом, чтобы оно выглядело как стандартное или «невидимое».
  3. Использовать расширения или флаги: В некоторых случаях можно использовать параметры запуска браузера для отключения некоторых функциональностей, связанных с canvas.

Пример перехвата рендеринга canvas: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://example.com/canvas-page');

  // Перехват рендеринга на canvas
  await page.evaluateOnNewDocument(() => {
    const originalGetContext = HTMLCanvasElement.prototype.getContext;
    HTMLCanvasElement.prototype.getContext = function () {
      const context = originalGetContext.apply(this, arguments);
      const originalFillText = context.fillText;

      context.fillText = function () {
        // Заменить реальный рендеринг текста на фиктивный
        return originalFillText.apply(this, arguments);
      };

      return context;
    };
  });

  // Дальнейшие действия на странице, теперь canvas не генерирует уникальные отпечатки
  await page.reload();
  await browser.close();
})();

Этот код перехватывает метод getContext для элемента <canvas>, что позволяет вмешаться в процесс рисования и заменить его на фиктивный, тем самым предотвращая создание уникального отпечатка.

Отключение или настройка специфичных для canvas свойств

Вместо вмешательства в код рендеринга можно настроить браузер так, чтобы его поведение в отношении canvas не отличалось от стандартного. Это можно сделать с помощью флагов командной строки или настроек браузера. Например, Puppeteer позволяет запускать браузер с кастомными флагами, что может помочь уменьшить различия в рендеринге: 

const browser = await puppeteer.launch({
  args: ['--disable-canvas', '--disable-webgl', '--no-sandbox']
});

Этот пример запускает Chromium с отключенными графическими возможностями, что предотвращает использование canvas для fingerprinting.

Влияние на производительность

Хотя вмешательство в canvas fingerprinting может быть полезным для тестирования или обхода, важно помнить, что такое вмешательство может повлиять на производительность страницы и точность тестов. В некоторых случаях важно тестировать страницы, как они работают с настоящими отпечатками, чтобы имитировать реальное поведение пользователей.

Риски и юридические аспекты

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

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

Оглавление