Công nghệ Canvas trong hệ thống chống gian lận và các phương pháp xác định người dùng.

26.10.24

**Công nghệ Canvas trong hệ thống chống gian lận và các phương pháp nhận diện người dùng**

Canvas là một trong những công cụ mạnh mẽ nhất trong phát triển web, cung cấp các khả năng làm việc với đồ họa trực tiếp trên trình duyệt. Nền tảng của Canvas là khả năng vẽ và xử lý hình ảnh bằng JavaScript, làm cho nó trở thành công cụ không thể thiếu cho việc tạo ra các ứng dụng web động. Canvas không chỉ được sử dụng cho các hiệu ứng hình ảnh, trò chơi và hoạt hình, mà còn trong các hệ thống chống gian lận, nơi khả năng của nó giúp cá nhân hóa người dùng.

## Lịch sử phát triển và mục đích của Canvas

Công nghệ Canvas lần đầu tiên xuất hiện trong đặc tả HTML5, được phát triển vào đầu những năm 2000. Công ty Apple giới thiệu phiên bản đầu tiên của Canvas vào năm 2004 trong trình duyệt Safari. Ý tưởng ban đầu là tạo ra một cách để hiển thị đồ họa mà không cần sử dụng các plugin bên thứ ba như Flash, giúp cải thiện hiệu suất và bảo mật của trang web. Năm 2014, HTML5 trở thành tiêu chuẩn chính thức và Canvas đã trở thành công nghệ cốt lõi cho đồ họa web.
    
Canvas cung cấp cho các lập trình viên khả năng làm việc với dữ liệu pixel, mở ra một phạm vi ứng dụng rộng lớn trong thiết kế web, phát triển trò chơi và hoạt hình. Nhưng một trong những lĩnh vực sử dụng bất ngờ nhất là hệ thống chống gian lận, nơi Canvas giúp ngăn chặn gian lận bằng cách tạo dấu vân tay kỹ thuật số cho mỗi thiết bị.

## Các khả năng công nghệ của Canvas

Canvas cung cấp cho các nhà phát triển một bộ tính năng phong phú để làm việc với đồ họa:

- Vẽ hình dạng và đường nét. Canvas hỗ trợ các hình dạng đơn giản như hình chữ nhật, hình tròn và đường kẻ.
    
- Làm việc với hình ảnh. Nó cho phép tải hình ảnh, thay đổi kích thước, chồng hình, và xử lý từng pixel của hình ảnh.
    
- Hoạt hình. Canvas được sử dụng rộng rãi để tạo ra đồ họa tương tác và các hiệu ứng hình ảnh động.

Những khả năng này làm cho Canvas trở thành một công cụ đa năng cho phát triển web, được áp dụng trong nhiều lĩnh vực khác nhau — từ thiết kế trang web đến các ứng dụng tương tác phức tạp và trò chơi.

### Canvas và chống gian lận: bảo vệ khỏi kẻ gian lận

Các hệ thống chống gian lận, với mục đích xác định thiết bị của người dùng, gặp phải vấn đề giả mạo danh tính và dữ liệu. Để xác định chính xác hơn, họ bắt đầu sử dụng cách nhận dạng thiết bị qua cái gọi là dấu vân tay Canvas (Canvas fingerprinting), cho phép tạo ra dấu vân tay kỹ thuật số cho mỗi thiết bị.

**Canvas giúp nhận diện người dùng như thế nào?**

Khi trình duyệt hiển thị hình ảnh trên Canvas, các thiết bị thực hiện điều này có chút khác biệt. Các yếu tố như bộ xử lý đồ họa, trình điều khiển, hệ điều hành và thậm chí cả phông chữ đều ảnh hưởng đến quá trình này. Kết quả là hình ảnh, mặc dù trông giống nhau trên các thiết bị khác nhau, nhưng khi phân tích chi tiết ở cấp độ pixel có thể có những khác biệt độc đáo.

Các hệ thống chống gian lận sử dụng đặc điểm này để tạo ra dấu vân tay. Canvas vẽ hình ảnh, sau đó phân tích các pixel thông qua JavaScript, tìm ra các khác biệt nhỏ. Kết hợp với các yếu tố khác như phiên bản trình duyệt, hệ điều hành và độ phân giải màn hình, dấu vân tay giúp nhận diện thiết bị của người dùng.

## Các phương pháp thay thế dấu vân tay Canvas

Những kẻ gian lận, với mục đích vượt qua hệ thống chống gian lận, đã phát triển các cách để làm giả dấu vân tay Canvas. Trong số các phương pháp phổ biến, có thể kể đến:

1. Thêm nhiễu. Các chương trình có thể thêm một số biến dạng nhỏ vào quá trình hiển thị Canvas — ví dụ, thay đổi pixel, thêm nhiễu hoặc các biến dạng nhân tạo. Điều này có thể thay đổi dấu vân tay, che giấu thiết bị thực sự.
    
2. Sử dụng các kết quả đã chuẩn bị trước. Phương pháp này cho phép thay thế dấu vân tay Canvas bằng cách mô phỏng hoạt động của thiết bị thật. Thay vì tính toán quá trình hiển thị theo thời gian thực, các chương trình nhúng các dữ liệu đã được lưu trữ trước, tương ứng với dấu vân tay của các thiết bị thật. Cách tiếp cận này khiến việc phát hiện giả mạo trở nên khó khăn hơn vì hệ thống chống gian lận nhận được dữ liệu có vẻ đáng tin cậy nhưng không phản ánh đặc điểm thực tế của thiết bị.

## Cách hệ thống chống gian lận phát hiện giả mạo dấu vân tay

Hệ thống chống gian lận sử dụng các phương pháp khác nhau để phát hiện giả mạo dấu vân tay Canvas, bao gồm cả các yếu tố tĩnh và động trong quá trình hiển thị. Các phương pháp chính bao gồm:

1. **Phân tích nhiễu trên hình ảnh:** Để xác định sự tồn tại của nhiễu trong quá trình hiển thị, các hệ thống chống gian lận so sánh kết quả trên một số hình ảnh tương tự nhau. So sánh này cho phép phát hiện các bất thường, có thể là dấu hiệu của sự giả mạo. Ví dụ, so sánh các phần của kết quả hoặc sử dụng các phương pháp khác nhau để có được kết quả trên cùng một hình ảnh.
    
2. **Sử dụng các canvas động:** Canvas động là trường hợp phức tạp hơn cho việc giả mạo, vì nó yêu cầu thay đổi dữ liệu liên tục theo thời gian thực. Điều này làm cho việc giả mạo kết quả khó khăn hơn, vì chúng cần phù hợp với hành vi của thiết bị thật. Các hệ thống chống gian lận có thể tạo ra các canvas động để đánh giá hiệu suất của thiết bị trong thời gian thực và so sánh kết quả thu được với kết quả mong đợi. Tuy nhiên, kết quả cho canvas động khó có thể so sánh được vì tính biến đổi và phụ thuộc vào nhiều yếu tố.

Kết hợp phân tích nhiễu và các render động giúp các hệ thống chống gian lận phát hiện giả mạo hiệu quả hơn và xác định liệu các dấu vân tay Canvas có thật hay không.

## Ví dụ về việc sử dụng Canvas trong hệ thống chống gian lận

Hãy xem nguyên tắc thu thập dữ liệu cho dấu vân tay Canvas bằng cách bắt đầu với ví dụ về Canvas kích thước 9 pixel (3x3 px).

Màu của các pixel (Hex):

- ff0000
    
- 00ff00
    
- 0000ff
    
- ffff00
    
- ff00ff
    
- 00ffff
    
- ffffff
    
- 000000
    
- 808080

**Chuỗi Base64:**

iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAACBJREFUGFcVx4EJAAAMgzD9vJ87BhLQIAMMi/f7KZVtHB5jDn4u6zYbAAAAAElFTkSuQmCC

**Chuỗi Hex:**

6956424f5277304b47676f414141414e535568455567414141414d414141414443415941414142574b4c572f4141414141584e535230494172733463365141414143424a52454655474663567834454a4141414d677a4439764a383742684c5149414d4d692f66374b5a56744842356a446e3475367a59624141414141456c46546b5375516d4343

Quá trình mã hóa sang hex bao gồm một số bước: thông thường màu của các pixel trước tiên được mã hóa thành base64, sau đó chuỗi base64 được chuyển đổi sang định dạng hexadecimal (hex) và được gửi đến máy chủ để tính toán tiếp theo.

Giờ đây, khi chúng ta đã hiểu cách vẽ hình ảnh trong trình duyệt, hãy xem cách nhiễu được áp dụng trong các trình duyệt chống phát hiện.

Để thực hiện nhiệm vụ phức tạp hơn trong việc vẽ, chúng ta sử dụng ví dụ về canvas từ một công cụ kiểm tra trình duyệt nổi tiếng và thực hiện một số bài kiểm tra. Chúng ta sẽ so sánh độ dài của chuỗi Hex được gửi đến máy chủ sau khi vẽ và mã hóa, đồng thời so sánh giá trị nếu cần.

**Kết quả cho trình duyệt Chrome:**

- Độ dài của chuỗi Base64: 15452
- Độ dài của chuỗi Hex: 30948

**Kết quả cho trình duyệt chống phát hiện không thêm nhiễu:**

- Độ dài của chuỗi Base64: 15452
- Độ dài của chuỗi Hex: 30948

**Kết quả cho trình duyệt chống phát hiện có thêm nhiễu:**

- Độ dài của chuỗi Base64: 15936
- Độ dài của chuỗi Hex: 31916

Khi sử dụng nhiễu, độ dài của chuỗi Base64 tăng thêm 484 ký tự, còn trong các trường hợp khác giá trị Hex vẫn giống nhau.

Qua ví dụ đơn giản này, chúng ta đã thấy cách kết quả thay đổi khi sử dụng nhiễu trong các trình duyệt chống phát hiện.

### Xem xét dấu vân tay Canvas qua ví dụ Amazon

Trên trang đăng ký của Amazon, có ba nhiệm vụ vẽ trên canvas.

Nhiệm vụ đầu tiên và thứ hai giống nhau, chỉ khác nhau về phương pháp thu thập và ghi lại kết quả.

Trong nhiệm vụ đầu tiên, Hex được tính bằng cách mã hóa tập hợp các màu của các pixel, còn trong nhiệm vụ thứ hai, tập hợp các màu được mã hóa thành base64 trước, sau đó mới thành hex.

Nhiệm vụ thứ ba có một chút khác biệt, nó thiếu một phần nhỏ của nhiệm vụ liên quan đến việc hiển thị "NOT AVAILABLE", điều này có thể được nhận thấy trên các hình ảnh.

Cần lưu ý rằng người dùng sẽ nhận được bộ nhiệm vụ vẽ tương tự khi cố gắng đăng nhập vào tài khoản Amazon.

Bộ giá trị này, thu được từ quá trình vẽ, cho phép trang web xác định số lượng thiết bị đăng nhập vào tài khoản, áp dụng các biện pháp kiểm tra bổ sung khi đăng nhập từ các thiết bị khác. Ngoài ra, với bộ giá trị thu được bằng các phương pháp khác nhau, trang web có thể phân biệt các thiết bị với độ chính xác cao, chẳng hạn như các máy tính giống nhau không có card đồ họa rời với bộ xử lý giống nhau trong các phiên bản trình duyệt giống nhau vẫn cho kết quả khác nhau.

Độ chính xác cao trong việc xác định thiết bị đạt được nhờ vào một số tham số: các hệ thống khác nhau hiển thị các tông màu bán trong suốt theo các cách khác nhau, sử dụng các phông chữ cho các nhiệm vụ vẽ; trong canvas cũng thường xuất hiện các ký hiệu emoji.

Trong các ví dụ canvas đã xem xét ở trên, Amazon kiểm tra cách phông chữ Arial sẽ được hiển thị, và văn bản trên hình ảnh sử dụng phông chữ này, do phông chữ Arial không có trên nhiều thiết bị di động, và trên các thiết bị như vậy phông chữ sẽ được thay thế bằng phông hệ thống hoặc phông tương tự Arial, dẫn đến kết quả khác biệt đáng kể so với các thiết bị máy tính để bàn. Trong các nhiệm vụ với phông chữ Arial, người dùng thường gặp phải các phông chữ không tồn tại. Khi thực hiện nhiệm vụ này, thiết bị sẽ tự chọn một phông hệ thống khác, điều này được thực hiện để xác định người dùng chính xác hơn. Điều tương tự xảy ra với emoji, tùy thuộc vào thiết bị và hệ điều hành, hiển thị emoji trên canvas cũng sẽ cho kết quả khác nhau.

Trên hình ảnh bên trái — emoji trong trình duyệt Chrome trên thiết bị máy tính để bàn, bên phải — trong trình duyệt Chrome trên thiết bị di động Android. Dưới đây là các ví dụ về kết quả hiển thị emoji. Chúng ta sẽ so sánh độ dài của các chuỗi Base64 và Hex:

**Kết quả cho trình duyệt Chrome**

- Độ dài của chuỗi Base64: 1480
- Độ dài của chuỗi Hex: 3004

**Kết quả cho trình duyệt chống phát hiện không thêm nhiễu**

- Độ dài của chuỗi Base64: 1480
- Độ dài của chuỗi Hex: 3004

**Kết quả cho trình duyệt chống phát hiện có thêm nhiễu**

- Độ dài của chuỗi Base64: 1708
- Độ dài của chuỗi Hex: 3460

**Kết quả cho Samsung**

- Độ dài của chuỗi Base64: 2240
- Độ dài của chuỗi Hex: 4556

**Kết quả cho Xiaomi**

- Độ dài của chuỗi Base64: 1780
- Độ dài của chuỗi Hex: 3604

Trong ví dụ về hiển thị emoji trong canvas, chúng ta thấy rằng kết quả trên các thiết bị máy tính để bàn khác biệt đáng kể so với các thiết bị di động.

## Kiểm tra tính duy nhất của dấu vân tay Canvas

Kiểm tra kết quả hiển thị của Canvas trên trang web <a href="https://browserleaks.com/canvas" target="_blank">Browserleaks</a>

Trong trình duyệt chống phát hiện không thêm nhiễu, chúng ta thu được các kết quả sau:

Dấu vân tay Canvas của chúng ta trùng khớp với dấu vân tay của 142 thiết bị trong cơ sở dữ liệu Browserleaks. Kích thước của dấu vân tay là 4666 bytes.

Hãy thử bật thêm nhiễu và kiểm tra lại:

Khi sử dụng nhiễu, dấu vân tay của chúng ta trở nên hoàn toàn độc nhất trên Browserleaks, với kích thước dấu vân tay tăng lên 4718 bytes.

Nhiều hệ thống chống gian lận lớn kiểm tra dấu vân tay Canvas để tìm sự độc nhất và có thái độ nghi ngờ với những người dùng có dấu vân tay hiếm gặp.

Hãy kiểm tra độ chính xác mà qua đó dấu vân tay Canvas có thể nhận diện người dùng. Để thử nghiệm, chúng ta sẽ sử dụng các máy chủ thuê với bộ xử lý Ryzen 5 3600, Ryzen 7 3700X và Ryzen 9 5950X không có card đồ họa, cùng với trình duyệt Chromium phiên bản 131.

**Kết quả thử nghiệm:**

Trong trình duyệt Chromium 131, chúng ta thu được các kết quả giống nhau trên tất cả các thiết bị.

Hãy kiểm tra dấu vân tay Canvas trong các phiên bản khác của trình duyệt Chromium:

Chromium v130

Chromium v129

Chromium v128

Chromium v126

Chromium v125

Chromium v123

Kết quả kiểm tra trên các phiên bản khác nhau của trình duyệt Chromium cho thấy sự khác biệt về dấu vân tay Canvas giữa các phiên bản.

Để xác định cách dấu vân tay Canvas thay đổi trong các trình duyệt khác nhau, chúng ta sẽ thực hiện kiểm tra cuối cùng và mở trang web trong trình duyệt.

Chrome v130

Dấu vân tay trong các trình duyệt Chrome v130 và Chromium v130-131 hoàn toàn trùng khớp.

Như chúng ta thấy, Canvas được trình bày trên trang web không thể phân biệt người dùng với độ chính xác cao.

## Kết luận

Kết quả của quá trình thử nghiệm cho thấy ảnh hưởng của việc thêm nhiễu vào hiển thị hình ảnh trong các trình duyệt khác nhau. Các trình duyệt sử dụng các phông chữ khác nhau và không hỗ trợ một số ký tự nhất định có thể cho kết quả khác nhau.

Việc thêm nhiễu gây ra những thay đổi đáng kể trong chuỗi Hex, điều này có thể trở thành tín hiệu cho các hệ thống chống gian lận.

Công nghệ Canvas tự nó không có ý nghĩa quan trọng đối với các hệ thống chống gian lận. Kết quả hiệu quả chỉ có thể đạt được khi kết hợp với các phương pháp khác được sử dụng trong chống gian lận. Tuy nhiên, hiện nay vẫn tồn tại một lượng lớn lưu lượng gian lận sử dụng nhiễu trong Canvas, và việc phát hiện loại lưu lượng này ngay từ lần truy cập đầu tiên vào trang web giúp các hệ thống chống gian lận dễ dàng hoàn thành nhiệm vụ.

Hãy xem xét phương pháp xác định nhiễu đòi hỏi tối thiểu chi phí tính toán. Ý tưởng của cách tiếp cận này đã đến với tôi từ lâu, và tôi chưa từng thấy nó được áp dụng trong các hệ thống chống gian lận.

Phương pháp này bao gồm việc so sánh kết quả hiển thị của hình ảnh gốc và phiên bản đảo ngược của nó. Để ngăn việc sử dụng các giá trị chuẩn bị trước khi hiển thị, chúng ta áp dụng canvas động, nơi mỗi hình ảnh mới chứa các yếu tố thay đổi.

Quá trình phát hiện nhiễu và giả mạo bao gồm so sánh từng pixel của hình ảnh gốc với pixel tương ứng của hình ảnh đảo ngược. Nếu quá trình hiển thị diễn ra chính xác và không có sự can thiệp, cả hai hình ảnh phải giống hệt nhau. Ngược lại, ta có thể mong đợi sự khác biệt, điều này có thể chỉ ra sự giả mạo hoặc vi phạm tính toàn vẹn của dữ liệu.

##Kết quả kiểm tra:

Trình duyệt Chrome:
<img src='/media/mdeditor/Chrome_20241028195520098291.jpg' />

Trình duyệt chống phát hiện không có tiếng ồn:
<img src='/media/mdeditor/ADBnot_20241028195610453234.jpg' />

Chống phát hiện trình duyệt sử dụng tiếng ồn:
<img src='/media/mdeditor/ADBnoise_20241028195646281993.jpg' />

Samsung Chrome:
<img src='/media/mdeditor/Android_20241028195727399341.jpg' />

Xiaomi Chrome:
<img src='/media/mdeditor/xiaomi_20241028195814063105.jpg' />

Cách tiếp cận này cho phép bạn xác định chính xác việc sử dụng nhiễu trong dấu vân tay canvas.

Trong bài viết này, chúng ta đã xem xét cách hệ thống chống gian lận có thể sử dụng công nghệ canvas để phát hiện lưu lượng truy cập gian lận. Nhưng đừng quên rằng nhiệm vụ của hệ thống Chống gian lận có thể không phải là phát hiện lớp nhiễu mà là sự khác biệt giữa dấu vân tay canvas và trình duyệt hoặc hệ điều hành đã khai báo.

Trong bài viết tiếp theo, chúng tôi sẽ tiếp tục phân tích các công nghệ trình duyệt được sử dụng trong các hệ thống chống gian lận.

*Bannykh M.V.*

Chưa tham gia cùng chúng tôi?

Đăng ký để truy cập tất cả các tính năng của trang web.

Đăng ký