Canvas

1. Canvas là gì trong Dấu vân tay Trình duyệt

Canvas (HTMLCanvasElement) là một API được hỗ trợ rộng rãi được sử dụng để kết xuất đồ họa 2D và hình ảnh trên web. Mặc dù chủ yếu được dùng để vẽ hình và thao tác với hình ảnh, nhưng nó đã được các công cụ tạo dấu vân tay trình duyệt áp dụng rộng rãi do đầu ra pixel bán định hướng của nó.

Mỗi trình duyệt sử dụng Canvas có thể kết xuất cùng một văn bản, độ dốc hoặc hình dạng với những khác biệt hình ảnh tinh tế, bị ảnh hưởng bởi:

• Trạng thái tăng tốc GPU (bật/tắt)
• Công cụ kết xuất phông chữ (FreeType, DirectWrite, CoreText, v.v.)
• Khử răng cưa, độ chính xác dưới pixel
• Ngăn xếp xử lý Canvas và hình ảnh (Skia trong các trình duyệt dựa trên Chromium)

Những khác biệt cấp độ pixel này tạo thành cơ sở để xác định duy nhất các thiết bị trên nhiều trang web.

2. Cách các Nền tảng Phát hiện Dấu vân tay Canvas

Việc tạo dấu vân tay Canvas được thực hiện bằng cách thêm một phần tử DOM <canvas> ẩn và thực hiện các lệnh vẽ tiêu chuẩn để trích xuất dữ liệu pixel rasterized.

Ví dụ mã kiểm tra được các nền tảng tạo dấu vân tay sử dụng:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext("2d");

// Draw a styled text
ctx.textBaseline = "top";
ctx.font = "14px 'Arial'";
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 10, 10);
ctx.fillStyle = "#00f";
ctx.fillText("FlashID", 2, 2);

// Extract base64-encoded PNG
const dataURL = canvas.toDataURL();

Các nền tảng tạo dấu vân tay phân tích dữ liệu này để:

1. So sánh đầu ra pixel theo pixel
2. Băm đầu ra PNG/JPEG đã mã hóa
3. Phát hiện dấu vân tay đường ống kết xuất — ví dụ: những khác biệt tinh tế trong bố cục văn bản hoặc xử lý độ dốc
4. Sử dụng các thuộc tính của Canvas2DRenderingContext để suy luận tính năng
5. Tương quan với đầu ra WebGL và WebGPU để xây dựng một nhận dạng kết xuất nhất quán

Hơn nữa:

• Các trình duyệt với navigator.userAgent giả mạo nhưng công cụ kết xuất thật vẫn sẽ tạo ra đầu ra Canvas duy nhất
• Các hệ thống không đầu (headless) và tự động hóa cho thấy hành vi kết xuất không nhất quán, đây là một dấu hiệu cảnh báo đỏ để phát hiện

3. Cách FlashID che giấu Dấu vân tay Canvas

FlashID cung cấp một kỹ thuật che giấu canvas đa lớp giúp bảo vệ chống lại việc nhận dạng dựa trên canvas và phân tích kết xuất văn bản.

Bảo vệ của FlashID bao gồm:

1. Che giấu Canvas.toDataURL và toBlob

   • FlashID can thiệp vào đầu ra dữ liệu của quá trình kết xuất canvas và thay thế nó bằng các hàm băm base64 ổn định được tạo sẵn
   • Mô phỏng các nguồn PNG giả mạo trong khi vẫn duy trì cùng hành vi mã hóa và sơ đồ nén

2. Kết xuất Văn bản và Hình dạng Ảo

   • Tạo ra đầu ra pixel giả mạo nhất quán cho bất kỳ mẫu vẽ nào
   • Hành vi khử răng cưa giả mạo, bắt chước máy tính để bàn tiêu chuẩn, di động hoặc thậm chí bộ đệm khung từ các hệ thống cũ

3. Giả mạo Canvas2DRenderingContext

   • Ẩn/giảm thiểu việc phát hiện dựa trên các lệnh gọi như isPointInPath, measureText, getImageData, createLinearGradient, v.v.

4. Công cụ Thống nhất Nội bộ Phông chữ

   • Mô phỏng ngăn xếp trình kết xuất phông chữ như CoreText, Skia, Freetype mà không phụ thuộc vào việc rasterize phông chữ của hệ điều hành thực

5. Tính năng Kết xuất Chống Phân tích Pháp y

   • Cho phép người dùng ngẫu nhiên hóa hoặc khóa các phản hồi kết xuất cho mỗi phiên trình duyệt
   • Hỗ trợ đầy đủ các chiến lược kết xuất không xác định (ngẫu nhiên hóa), tĩnh (đặt trước) hoặc chuẩn hóa (pha trộn)

6. Tích hợp với WebGL, WebGPU và ImageData

   • Tạo ra các cấu hình kết xuất GPU+Canvas thống nhất, khớp nhau
   • Ngăn chặn các cảnh báo không khớp giữa các API kết xuất

Các nền tảng dựa vào Canvas để tạo dấu vân tay (bao gồm Panopticlick, FingerprintJS và các công cụ AML thương mại) đều bị FlashID đánh bại. Kỹ thuật che giấu canvas của chúng tôi không yêu cầu các bản vá trình duyệt, các hook đặc biệt hoặc các sửa đổi triệt để — nó hoạt động âm thầm trong khi vẫn bảo toàn logic kết xuất và hành vi dự kiến.

Bạn Cũng Có Thể Thích