Як уникнути відбитків пальців на полотні

Що таке Canvas

Canvas – це новий тег, доданий у HTML5, який використовується з відповідними API для створення зображень та маніпулювання ними зображення в режимі реального часу на веб-сторінках.

Для чого можна використовувати Canvas

• Базове малювання графіки (наприклад, малювання точок, ліній, еліпсів тощо) та малювання тексту

• Трансформація та композиція графіки (наприклад, масштабування, обертання, накладання тощо)

• Обробка зображень та відео

• Реалізація анімації

• Створення міні-ігри

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

Ось приклад:

<script type=“text/javascript”> ;

// Отримати об'єкт DOM, що відповідає елементу canvas

var canvas_xy = document.getElementById(“canvas_xy”);

// Отримати об'єкт canvasRenderingContent2D, який малює на полотні

var ctx = canvas_xy.getContext(“2d”);

// Встановлення початкової точки для малювання

ctx.moveTo(100, 100);

// встановити наступну точку для малювання

ctx.lineTo(200, 200);

// встановити наступну точку для малювання

ctx.lineTo(400, 100);

//кінець малювання

ctx.closePath();

// встановити ширину лінії

ctx.lineWidth = 10;

// встановити стиль малюнка

ctx.strokeStyle = “red”;

//намалюйте лінію між точками

ctx.stroke();

// Встановлення стилю заливки

ctx.fillStyle = “green”;

// Заповнити поточний вигляд

ctx.fill();

</script>

Ось що ви отримуєте:

Що таке Canvas-фільмографія?

Щоб зрозуміти відбитки пальців Canvas, важливо спочатку пояснити, що таке відбитки пальців браузера.

Зазвичай веб-сайти або рекламодавці хочуть мати технологію, яка може точно орієнтуватися на кожну людину в Інтернеті, щоб вони могли збирати дані про цих людей, аналізувати їх, а потім точніше розміщувати рекламу та інші кампанії. Наприклад, які сторінки переглядає користувач, які ключові слова він шукає, що його цікавить, які кнопки він натискає, які функції він використовує, які продукти він переглядає, що він додає до свого кошика тощо.

Однак, з посиленням кожного браузера для захисту конфіденційності користувачів, браузери не надають веб-сайтам дійсну ідентифікацію користувача та блокують методи відстеження, які зазвичай використовуються веб-сайтами, наприклад, міждоменні запити більше не містять файлів cookie, запущено режим інкогніто тощо... Це унеможливлює ідентифікацію того, чи це той самий користувач, який здійснює два окремі відвідування, що ускладнює веб-сайтам відстеження поведінки користувачів.

Саме тут вступає в гру зняття відбитків пальців браузера. Через браузер веб-сайт отримує інформацію про тип обладнання пристрою користувача, операційну систему, агент користувача, системний шрифт, мову, роздільну здатність екрана, плагіни браузера, розширення браузера, налаштування браузера, різницю в часових поясах, географічне розташування та багато іншої інформації, яку можна назвати відбитками пальців браузера. Однак ці відбитки пальців «схожі» на людський зріст, вік тощо, і тому існує висока ймовірність повторення. Отже, вони не можуть служити унікальним ідентифікатором особи.

Розширена візуалізація відбитків пальців на основі HTML5 пропонує нові рішення, одним з яких є візуалізація відбитків пальців Canvas найчастіше використовуються. Як згадувалося раніше, технологію Canval можна використовувати для малювання зображень у режимі реального часу на сторінці, але різні комп'ютери можуть малювати зображення з незначними відмінностями, які зазвичай не розпізнаються людським оком, але шляхом обчислення згенерованих даних зображення можна згенерувати значення відбитка пальця для ідентифікації різних користувачів.

Як веб-сайти отримують відбиток Canvas?

Веб-сайт, який ми відвідуємо, має приховане зображення Canvas на веб-сторінці, намальоване API HTML5 Canvas. Якщо два користувачі відвідують веб-сайт на одному пристрої з однаковою операційною системою та браузером, зображення Canvas буде абсолютно однаковим; якщо вони роблять це на двох різних комп’ютерах з різними налаштуваннями, відбитки Canvas, як правило, будуть різними.

Ось відбитки двох комп’ютерів, виявлені https://browserleaks.com/canvas.

white-space: pre-wrap;">

Відбиток Canvas – це не унікальний. Чим вище значення унікальності, тим унікальнішим є відбиток Canvas. Але високе значення не обов'язково означає хороший результат, оскільки цей відбиток в основному пов'язаний з апаратним забезпеченням комп'ютера, особливо з моделлю відеокарти. За нормальних обставин існує певна ймовірність дублювання обладнання.

Як уникнути відбитків пальців Canvas

Ви можете уникнути відбитків пальців Canvas, розгорнувши ці методи:

• Встановлення плагінів браузера

У магазині Google App Store є плагіни, які випадковим чином змінюють відбиток полотна, такі як Блок відбитків пальців на полотні. Принцип полягає в тому, що кожного разу на полотно вводиться випадковий шум (невидимий для людського ока), який впливає на результат перевірки CRC даних зображення.

Ось детектування за допомогою плагіна:

• Вимкнути апаратне прискорення

Ми згадували, що генерація відбитків пальців Canvas головним чином залежить від конфігурації обладнання комп'ютера, тому ми можемо виключити відмінності у відбитку Canvas, використовуючи спеціальні апаратні налаштування, щоб уникнути відбитків Canvas.

Наприклад, перейдіть до Додаткових налаштувань → Система в Chrome, знайдіть «Використовувати апаратне прискорення, коли доступно», вимкніть його та перезапустіть Chrome. Таким чином, ви побачите, що незалежно від того, який комп’ютер ви використовуєте, ви отримаєте однаковий відбиток Canvas.

• Використовуйте браузер із захистом від виявлення

Браузер із захистом від виявлення надає окремі середовища перегляду з унікальними відбитками. Подібно до першого методу, принцип використання браузера з антидетектором для уникнення відбитків пальців також полягає в створенні певного шуму на полотні. Але оскільки шум реалізовано в ядрі браузера, браузер з антидетектором краще приховує справжній відбиток Canvas. Він навіть може імітувати різні відбитки Canvas, щоб «обдурити» веб-сайт, змусивши його думати, що його відвідує багато різних користувачів.