Canvas

1. Canvas ในการพิมพ์ลายนิ้วมือเบราว์เซอร์คืออะไร

Canvas (HTMLCanvasElement) เป็น API ที่รองรับอย่างกว้างขวาง ซึ่งใช้สำหรับการแสดงผลกราฟิก 2D และรูปภาพบนเว็บ แม้ว่าจะใช้สำหรับการวาดรูปร่างและจัดการรูปภาพเป็นหลัก แต่ก็ ได้รับการนำมาใช้อย่างแพร่หลายในเอนจิ้นการพิมพ์ลายนิ้วมือเบราว์เซอร์ เนื่องจาก เอาต์พุตพิกเซลกึ่งกำหนด (semi-deterministic) ของมัน

เบราว์เซอร์ทุกตัวที่ใช้ Canvas อาจแสดงผลข้อความ, การไล่ระดับสี, หรือรูปร่างเดียวกันด้วย ความแตกต่างทางสายตาที่ละเอียดอ่อน ซึ่งได้รับอิทธิพลจาก:

• สถานะการเร่งความเร็ว GPU (เปิดใช้งาน/ปิดใช้งาน)
• เอนจิ้นการแสดงผลฟอนต์ (FreeType, DirectWrite, CoreText และอื่นๆ)
• การลบรอยหยัก (Anti-aliasing), ความแม่นยำของซับพิกเซล
• สแต็กการประมวลผล Canvas และรูปภาพ (Skia ในเบราว์เซอร์ที่ใช้ Chromium)

ความแตกต่างระดับพิกเซลเหล่านี้เป็นพื้นฐานสำหรับการระบุอุปกรณ์ที่ไม่ซ้ำกันในแต่ละเว็บไซต์

2. แพลตฟอร์มต่างๆ ตรวจจับลายนิ้วมือ Canvas ได้อย่างไร

การพิมพ์ลายนิ้วมือ Canvas ทำได้โดยการเพิ่มองค์ประกอบ DOM <canvas> ที่ซ่อนอยู่ และดำเนินการคำสั่งการวาดที่เป็นมาตรฐานเพื่อดึงข้อมูลพิกเซลที่ถูกแรสเตอร์

ตัวอย่างโค้ดทดสอบที่แพลตฟอร์มลายนิ้วมือใช้:

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();

แพลตฟอร์มลายนิ้วมือวิเคราะห์ข้อมูลนี้เพื่อ:

1. เปรียบเทียบเอาต์พุตแบบพิกเซลต่อพิกเซล
2. แฮชเอาต์พุต PNG/JPEG ที่เข้ารหัส
3. ตรวจจับลายนิ้วมือของไปป์ไลน์การแสดงผล — เช่น ความแตกต่างที่ละเอียดอ่อนในการจัดวางข้อความหรือการจัดการการไล่ระดับสี
4. ใช้คุณสมบัติ Canvas2DRenderingContext สำหรับการอนุมานคุณสมบัติ
5. เชื่อมโยงกับเอาต์พุต WebGL และ WebGPU เพื่อสร้างเอกลักษณ์การแสดงผลที่สอดคล้องกัน

นอกจากนี้:

• เบราว์เซอร์ที่ปลอมแปลง navigator.userAgent แต่มีเอนจิ้นการแสดงผลจริงจะยังคงสร้างเอาต์พุต Canvas ที่ไม่ซ้ำกัน
• ระบบที่ไม่มีส่วนหัว (headless) และระบบอัตโนมัติแสดงพฤติกรรมการแสดงผลที่ไม่สอดคล้องกัน ซึ่งเป็นสัญญาณอันตรายสำหรับการตรวจจับ

3. FlashID ปกปิดลายนิ้วมือ Canvas ได้อย่างไร

FlashID นำเสนอ เทคนิคการปกปิด Canvas แบบหลายชั้น ที่ช่วยป้องกันการระบุตัวตนด้วย Canvas และการวิเคราะห์การแสดงผลข้อความ

การป้องกันของ FlashID ประกอบด้วย:

1. การปกปิด Canvas.toDataURL และ toBlob

   • FlashID จะดักจับเอาต์พุตข้อมูลของการแสดงผล Canvas และแทนที่ด้วย แฮช base64 ที่เสถียรซึ่งสร้างไว้ล่วงหน้า
   • จำลองแหล่งที่มาของ PNG ปลอมในขณะที่ยังคงรักษารูปแบบการเข้ารหัสและรูปแบบการบีบอัดเดียวกัน

2. การแสดงผลข้อความและรูปร่างเสมือน

   • สร้างเอาต์พุตพิกเซลปลอมที่สอดคล้องกันสำหรับรูปแบบการวาดใดๆ
   • พฤติกรรมการลบรอยหยักปลอม เลียนแบบเดสก์ท็อปมาตรฐาน มือถือ หรือแม้แต่เฟรมบัฟเฟอร์จากระบบเก่า

3. การปลอมแปลง Canvas2DRenderingContext

   • ซ่อน/ลดการตรวจจับที่อิงตามการเรียกใช้ เช่น isPointInPath, measureText, getImageData, createLinearGradient และอื่นๆ

4. เอนจิ้นความสอดคล้องภายในฟอนต์

   • เลียนแบบสแต็กการแสดงผลฟอนต์ เช่น CoreText, Skia, Freetype โดยไม่ต้องพึ่งการแรสเตอร์ฟอนต์ของระบบปฏิบัติการจริง

5. คุณสมบัติการแสดงผลเพื่อการต่อต้านนิติวิทยาศาสตร์

   • อนุญาตให้ผู้ใช้สุ่มหรือล็อกการตอบสนองการแสดงผลต่อเซสชันเบราว์เซอร์
   • รองรับกลยุทธ์การแสดงผลแบบไม่กำหนด (สุ่ม), คงที่ (กำหนดไว้ล่วงหน้า) หรือปกติ (ผสมผสาน) ได้อย่างสมบูรณ์

6. การรวมเข้ากับ WebGL, WebGPU และ ImageData

   • สร้าง โปรไฟล์การแสดงผล GPU+Canvas ที่ตรงกันและเป็นหนึ่งเดียว
   • ป้องกันการแจ้งเตือนความไม่ตรงกันระหว่าง API การแสดงผล

แพลตฟอร์มที่อาศัย Canvas สำหรับการพิมพ์ลายนิ้วมือ (รวมถึง Panopticlick, FingerprintJS และเอนจิ้น AML เชิงพาณิชย์) จะพ่ายแพ้ต่อ FlashID การปกปิด Canvas ของเราไม่จำเป็นต้องมีการแพตช์เบราว์เซอร์, ฮุกพิเศษ หรือการปรับเปลี่ยนที่รุนแรง — มันทำงานเงียบๆ ในขณะที่ยังคงรักษาตรรกะการแสดงผลและพฤติกรรมที่คาดหวังไว้

คุณอาจชอบ