Canvas Fingerprint คืออะไร เว็บไซต์ระบุตัวอุปกรณ์จากการวาดภาพในเบราว์เซอร์ได้อย่างไร

สรุปสาระสำคัญ: Canvas Fingerprint เกิดจากการวาดภาพจริงเพียงครั้งเดียว ผลลัพธ์ถูกกำหนดโดยการ์ดจอ ระบบปฏิบัติการ ฟอนต์ และเอนจินเบราว์เซอร์ประกอบกัน ใช้ตัวเดียวระบุตัวตนไม่ได้ แต่เมื่อนำไปตรวจสอบข้ามกับพารามิเตอร์อื่น ก็จะเผยความจริงของสภาพแวดล้อมได้ไม่ยาก การจัดการพารามิเตอร์นี้ให้ยึดสองข้อ ค่าที่อ่านได้ในแต่ละโปรไฟล์ต้องนิ่ง และโปรไฟล์ต่อโปรไฟล์ต้องแตกต่างกันจริง ส่วนถัดไปเรียงตามลำดับ หลักการ ปัจจัยที่มีผล ขอบเขตการระบุตัวตน การตรวจสอบ และการเลือกตั้งค่าสองโหมดใน MostMate

เปิดเว็บไซต์เดียวกันบนเครื่องสองเครื่อง ภาพที่หน้าเว็บสั่งวาดด้วยระบบเดียวกันกลับให้พิกเซลไม่ตรงกัน นี่ไม่ใช่หน้าเว็บพัง แต่เพราะแต่ละเครื่องทิ้งร่องรอยเอาไว้ตอนวาดภาพ เว็บไซต์เก็บร่องรอยนี้ไปคำนวณเป็นค่าหนึ่ง นั่นก็คือ Canvas Fingerprint ซึ่งจัดเป็นพารามิเตอร์ที่แยกแยะได้สูงที่สุดกลุ่มหนึ่งในบรรดาฟิงเกอร์พรินต์ของเบราว์เซอร์ MostMate เป็นเบราว์เซอร์ป้องกันการตรวจจับ โดย Canvas เป็นหนึ่งในพารามิเตอร์พื้นฐานในหน้าตั้งค่าฟิงเกอร์พรินต์ของมัน บทความนี้จะพาไล่ดูเส้นทางของพารามิเตอร์นี้ตั้งแต่การเกิดจนถึงการตั้งค่า

เว็บไซต์ใช้ Canvas วาด "ภาพลายเซ็น" ให้อุปกรณ์อย่างไร

Canvas Fingerprint เกิดจากการวาดภาพจริงหนึ่งครั้ง เว็บไซต์สั่งให้เบราว์เซอร์วาดเนื้อหาที่กำหนดไว้ แล้วอ่านผลลัพธ์ออกมาคำนวณเป็นค่าลักษณะเฉพาะ สิ่งที่ใช้วาดคือส่วนติดต่อวาดภาพ Canvas ที่เบราว์เซอร์จัดเตรียมไว้ เว็บเกม กราฟ และตัวแก้ไขรูป ล้วนใช้ความสามารถผืนผ้าใบ 2D ชุดนี้ร่วมกัน รายละเอียดของ API ดูได้ที่ เอกสาร Canvas API ของ MDN กระบวนการทั้งหมดนี้ผู้ใช้ไม่รู้สึกตัว แยกเป็นสามขั้นได้แก่

1. วาดภาพ: สคริปต์ของหน้าเว็บวาดเนื้อหาชุดหนึ่งลงบนผืนผ้าใบ ที่พบบ่อยคือข้อความสั้น ๆ ร่วมกับรูปเรขาคณิตและบล็อกสีไล่เฉด.
2. อ่านค่า: สคริปต์ใช้ API อย่าง toDataURL() หรือ getImageData() ส่งออกผืนผ้าใบเป็นสตริงหรืออาร์เรย์พิกเซล.
3. เทียบค่า: ผลลัพธ์ที่ส่งออกถูกคำนวณเป็นค่าแฮช แล้วนำไปเทียบกับบันทึกเดิมของสภาพแวดล้อมนี้ หรือกับค่าที่คาดไว้จากสัญญาณอื่น.

ทำไมสองเครื่องวาดภาพเดียวกันถึงไม่ได้ภาพเหมือนกัน

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

• GPU และไดรเวอร์ คำสั่งวาดชุดเดียวกัน การ์ดจอกับเวอร์ชันไดรเวอร์คนละรุ่นให้พิกเซลที่ต่างกันเล็กน้อย นี่คือแหล่งที่มาหลักของความต่างในผลลัพธ์.
• ระบบปฏิบัติการและการเรนเดอร์ตัวอักษร Windows, macOS และ Linux มีวิธีเรนเดอร์และกลยุทธ์ต้านหยักไม่เหมือนกัน วาดข้อความบรรทัดเดียวกัน ความเรียบของขอบก็ไม่เท่ากัน.
• สภาพแวดล้อมฟอนต์ ข้อความบนผืนผ้าใบต้องใช้ฟอนต์ในเครื่องเรนเดอร์ จึงมีทั้งรายชื่อฟอนต์และเวอร์ชันหลุดเข้าไปอยู่ในผลการวาด ตรรกะการตรวจรายการฟอนต์เคยแยกอธิบายไว้ในบทความ วิธีที่ฟอนต์ฟิงเกอร์พรินต์ถูกตรวจจับ ทั้งสองอย่างมีที่มาเดียวกัน.
• เอนจินเบราว์เซอร์และเวอร์ชัน Chromium, Firefox และ WebKit ลงมือวาดคนละแบบ การอัปเดตเวอร์ชันใหญ่ก็พาความเปลี่ยนแปลงยิบย่อยตามเข้ามาด้วย.

สี่จุดประกอบกันเป็นความสามารถแยกแยะของ Canvas ความต่างรายจุดมีแค่เล็กน้อย แต่พอถูกบีบเป็นแฮช โอกาสที่คนละเครื่องจะไม่ตรงกันก็สูงมาก เบื้องหลังภาพเล็ก ๆ หนึ่งใบ คือห่วงโซ่เรนเดอร์ทั้งหมดของเครื่องนั้นที่ออกมาโชว์ตัวพร้อมกัน

Canvas Fingerprint ระบุตัวตนได้ลึกแค่ไหน

Canvas Fingerprint เป็นลักษณะเฉพาะของอุปกรณ์ที่แยกแยะได้ค่อนข้างดี แต่ใช้ตัวเดียวระบุตัวตนไม่ได้ ขอบเขตของมันมีสามข้อ ขอพูดให้ชัดก่อน

ประการแรก แฮชเท่ากันไม่ได้แปลว่าเครื่องเดียวกัน สองเครื่องที่ห่วงโซ่เรนเดอร์บังเอิญตรงกันเป๊ะอาจได้ค่าเดียวกัน อีกอย่างสเปกยอดนิยมบนตลาดก็ซ้ำกันอยู่แล้วเป็นจำนวนมาก

ประการที่สอง เว็บไซต์ไม่ใช้ค่านี้ตัดสินใจคนเดียว ค่า Canvas จะถูกเอาไปตรวจข้ามกับ UA หน้าจอ ฟอนต์ และภาษา โดยทำหน้าที่เป็นหลักฐานแข็งในกลุ่มพารามิเตอร์นี้ ในฐานะตัวที่ "ป่าวประกาศตัวเองไม่ได้ ต้องวัดสดเท่านั้น"

ประการที่สาม มันกับ Cookie ไม่ใช่กลไกเดียวกัน Cookie เก็บอยู่ในเครื่อง ลบหรือปฏิเสธได้ ส่วน Canvas คำนวณสดตอนเข้าเว็บ การลบ Cookie จึงไม่กระทบมันเลย

สามข้อนี้รวมกันได้ข้อสรุปว่า Canvas ตัดสินชะตาบัญชีเองไม่ได้ แต่ถ้าสภาพแวดล้อมกลุ่มเดียวกันให้แฮชเหมือนกันหมด ในการตรวจข้ามก็เท่ากับยกมือสารภาพเอง

สามขั้นตอนดู Canvas Fingerprint ของสภาพแวดล้อมคุณ

ตรวจ Canvas ไม่ต้องติดตั้งเครื่องมือเพิ่ม ใช้หน้าตรวจหน้าเดียวกับการทวนสอบสองรอบก็พอ ทำตามลำดับนี้

1. จดค่าปัจจุบันไว้ เปิด หน้าตรวจ Canvas ของ BrowserLeaks ในสภาพแวดล้อมนั้น หน้าเว็บจะแสดงค่าแฮชและภาพตัวอย่างของสภาพแวดล้อมปัจจุบัน จดเอาไว้.
2. ทวนสอบในสภาพแวดล้อมเดิม ปิดหน้าเว็บแล้วเปิดใหม่ หรือรอหนึ่งสองวันค่อยวัดอีกรอบ ค่าแฮชของสภาพแวดล้อมเดียวกันควรนิ่งไม่เปลี่ยน ถ้าสองรอบไม่ตรงกัน แปลว่ามีการประมวลผลเพิ่มเติมมาแทรกค่าที่อ่านได้อยู่.
3. เทียบข้ามสภาพแวดล้อม เปิดสภาพแวดล้อมที่สองรันการตรวจแบบเดิม สองแฮชควรต่างกันเห็นได้ชัด ยิ่งห่างกันมาก แนวแบ่งระหว่างสภาพแวดล้อมยิ่งชัดเจน.

การอ่านค่าให้ดูที่ "นิ่งหรือไม่ ต่างกันหรือไม่" ไม่ต้องไล่ล่าตัวเลขเฉพาะเจาะจง ค่าแฮชจากคนละเว็บตรวจอาจไม่ตรงกัน เพราะแต่ละเจ้าวาดรูปต่างกัน ส่งออกต่างกัน และใช้อัลกอริทึมแฮชคนละแบบ เทียบข้ามเว็บไม่มีความหมาย เทียบก่อนหลังด้วยเครื่องมือเดียวกันต่างหากที่ใช้ได้จริง

เลือก Canvas สองโหมดใน MostMate อย่างไร

การตั้งค่าฟิงเกอร์พรินต์ของ MostMate รวม Canvas ไว้เป็นสองโหมด (หน้าจอแสดงเป็น Real／Noise) โดยค่าเริ่มต้นเป็นโหมด Real ภาพรวมของผลิตภัณฑ์ดูได้ที่ MostMate คืออะไร ส่วนในรายการตั้งค่าฟิงเกอร์พรินต์แบบทำมือบนเว็บไซต์ Canvas วางเรียงอยู่เคียงกับพารามิเตอร์อย่างเสียงและ WebGL ตั้งค่ากันอยู่ในบล็อกฟิงเกอร์พรินต์บล็อกเดียวกันตอนสร้างสภาพแวดล้อม ก่อนอื่นดูความต่างของสองโหมดจากตารางนี้

โหมด Real เหมาะกับกรณีที่เครื่องโฮสต์ "พื้นฐานสะอาด" เช่น เครื่องเป็น Windows ภาษาอังกฤษ งานที่ทำก็คือสภาพแวดล้อมอเมริกัน ใช้การเรนเดอร์จริง ค่าที่อ่านได้จึงตรงกับการเปิดเบราว์เซอร์เอง และไม่ทิ้งร่องรอยการประกอบขึ้น ข้อจำกัดก็ชัดเจน ถ้าหลายสภาพแวดล้อมบนเครื่องเดียวกันใช้โหมด Real ล้วน ค่า Canvas ก็คือค่าเดียวกันหมด ไม่มีความต่างระหว่างสภาพแวดล้อม

โหมด Noise เข้ามาเติมช่องว่างนี้ โดยใส่นอยส์ทับค่า Canvas ของสภาพแวดล้อม ทำให้ค่าแยกออกจากผลเรนเดอร์จริงของเครื่องโฮสต์ สภาพแวดล้อมที่สร้างเป็นชุดจึงต่างกันหมด เงื่อนไขคือนอยส์ต้องถูกควบคุม ค่าหลังใส่นอยส์ยังต้องอยู่ในช่วงปกติของอุปกรณ์จริง มิฉะนั้นความ "ต่าง" นี้เองจะกลายเป็นความผิดปกติที่โดดออกมา และถ้าสภาพแวดล้อมเดียวกันวัดสองรอบได้ค่าไม่ตรงกัน ก็ถือเป็นลักษณะผิดปกติเช่นกัน ความเสี่ยงจุดนี้มีข้อโต้แย้งครบถ้วนในบทความ ทำไมการสุ่มฟิงเกอร์พรินต์ถึงอันตราย

Canvas ยังต้องเอามาเช็กคู่กับพารามิเตอร์ต้นทางเดียวกันด้วย การเรนเดอร์ผืนผ้าใบแยกไม่ได้จากระบบปฏิบัติการ ฟอนต์ และการ์ดจอ พารามิเตอร์กลุ่มนี้จึงควรชี้ไปที่ภาพอุปกรณ์ชุดเดียวกัน ถ้าเลือกสภาพแวดล้อมเป็น macOS พารามิเตอร์กลุ่มเดียวกันอย่างเสียงและภาพ WebGL ก็ต้องยืนยันตามช่วงที่สมเหตุสมผลของ macOS ไปพร้อมกัน ดู Canvas ลำพังตัวเดียวง่ายจะพลาดความไม่ตรงกันในกลุ่ม ส่วนตรรกะการเลือกโหมดของเสียง เคยอธิบายไว้ในบทความ ตั้งค่า AudioContext Fingerprint อย่างไร ใช้แนวคิดเดียวกันต่อได้เลย

หลังตั้งค่าเสร็จ ให้ทำการตรวจรับอีกรอบ ยืนยันโหมด Canvas ในหน้าตั้งค่าฟิงเกอร์พรินต์ ช่อง Canvas บนแผงพรีวิวฟิงเกอร์พรินต์ด้านขวาจะแสดงรหัสอย่าง Noise[3LR450] ซึ่งเป็นตัวระบุของชุดนอยส์นี้ แต่ละสภาพแวดล้อมมีหนึ่งชุดเป็นของตัวเอง คนละเรื่องกับค่าแฮชที่หน้าตรวจคำนวณได้ อย่าเอารหัสไปเทียบกับแฮช ส่วนค่าที่อ่านได้จริงต้องเปิดสภาพแวดล้อมเข้าหน้าตรวจดู แล้วเทียบว่าตรงตามคาดหมายหรือไม่ หลังจากนี้ทุกครั้งที่เปลี่ยนพร็อกซีหรือปรับตั้งค่าฟิงเกอร์พรินต์ ให้ทวนสอบอีกรอบก่อนนำไปใช้งาน

คำถามที่พบบ่อย

Canvas Fingerprint กับฟิงเกอร์พรินต์ของเบราว์เซอร์เป็นเรื่องเดียวกันหรือไม่

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

ปิด Canvas ช่วยกันการถูกระบุตัวตนได้หรือไม่

ไม่แนะนำ ฟังก์ชันเว็บจำนวนมากพึ่งพา Canvas การปิดจึงกระทบการใช้งานปกติ เบราว์เซอร์ทั่วไปเกือบทั้งหมดรองรับ Canvas "ไม่รองรับ" กลายเป็นลักษณะหายาก ยิ่งถูกคัดออกมาง่าย ทางที่เหมาะคือควบคุมแหล่งที่มาและความสม่ำเสมอของค่า ไม่ใช่ปิด API ทิ้ง

Canvas Fingerprint เปลี่ยนตามการอัปเดตเบราว์เซอร์หรือไม่

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

เบราว์เซอร์ป้องกันการตรวจจับทำให้ Canvas ของแต่ละสภาพแวดล้อมต่างกันได้หรือไม่

ได้ โหมด Noise ทำหน้าที่ตรงจุดนี้ ใส่นอยส์ทับค่า Canvas เพื่อดันค่าของสภาพแวดล้อมจำนวนมากให้ออกห่างกัน เงื่อนไขคือขนาดนอยส์ต้องสมเหตุสมผล ค่าที่ได้ยังต้องอยู่ในช่วงปกติของระบบนั้น ๆ

บทส่งท้าย

แก่นของ Canvas Fingerprint คือห่วงโซ่เรนเดอร์ของอุปกรณ์ที่มารวมตัวโชว์บนผืนผ้าใบหนึ่งใบ ใช้ตัวเดียวระบุตัวตนไม่ได้ แต่เป็นรายการที่ป่าวประกาศตัวเองไม่ได้และต้องวัดสดเท่านั้น ด้านการจัดการให้ยึดสองข้อ ค่าของแต่ละสภาพแวดล้อมต้องผ่านการทวนสอบได้ แฮชระหว่างสภาพแวดล้อมต้องห่างกันจริง และพารามิเตอร์ต้นทางเดียวกันต้องชี้ไปที่ภาพอุปกรณ์ชุดเดียวกัน ถ้าอยากรันสภาพแวดล้อมตั้งแต่ศูนย์ ดาวน์โหลด MostMate สร้างสภาพแวดล้อมเสร็จแล้วทวนสอบค่า Canvas ของทุกสภาพแวดล้อมก่อนนำไปใช้งาน