ลายนิ้วมือ WebGL คืออะไร ข้อมูลการ์ดจอกลายเป็นส่วนหนึ่งของลายนิ้วมือเบราว์เซอร์ได้อย่างไร

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

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

ข้อมูลสองประเภท พารามิเตอร์ที่รายงาน และภาพที่วาดขึ้น

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

มาดูส่วนที่ถามออกมาก่อน ช่องข้อมูลที่พบบ่อยในหน้าตรวจจับมีดังนี้

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

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

เพราะเหตุใดการ์ดจอจึงกลายเป็นลักษณะสภาพแวดล้อม

ความจำเพาะของพารามิเตอร์มาจากการประกอบกัน ไม่ใช่จากช่องใดช่องหนึ่ง ตลาดการ์ดจอรวมศูนย์สูงมาก NVIDIA AMD Apple และ Intel รวมกันครอบคลุมอุปกรณ์เกือบทั้งหมด ช่อง Renderer เพียงช่องเดียวระบุตัวบุคคลไม่ได้ แต่เมื่อประกอบเข้ากับสัญญาณอื่น ความจำเพาะก็อาจสูงขึ้น เช่น อุปกรณ์ Windows ที่ใช้เบราว์เซอร์ Chrome สภาพแวดล้อมกราฟิกที่ WebGL เปิดเผยมักสอดคล้องกับการตั้งค่าระบบและเบราว์เซอร์ที่เกี่ยวข้อง หากข้อมูลเบราว์เซอร์ระบุว่า Windows แต่สภาพแวดล้อมกราฟิกกลับแสดงลักษณะที่ตรงกับอุปกรณ์ macOS ก็สมควรได้รับการตรวจสอบเพิ่มเติม หากพารามิเตอร์อื่นอย่างเขตเวลาก็ไม่ตรงกับสภาพแวดล้อมที่คาดหวังเช่นกัน การตั้งค่าโดยรวมอาจแสดงสัญญาณที่ขัดแย้งกันเอง

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

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

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

WebGL, Canvas, WebGPU ต่างกันอย่างไร

สามชื่อมักปรากฏร่วมกัน แต่สิ่งที่สังเกตต่างกัน จัดเป็นตาราง:

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

ตรวจสอบลายนิ้วมือ WebGL ของตัวเองอย่างไร

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

1. เปิดหน้าตรวจสอบ IP แบบเข้าถึงสภาพแวดล้อม หรือเครื่องมือแนว BrowserLeaks แล้วหาบล็อก WebGL จดสี่ค่า ได้แก่ Vendor, Renderer, WebGL Version และจำนวนส่วนขยาย
2. เว้นช่วงแล้วทดสอบสภาพแวดล้อมเดิมซ้ำ เทียบผลทั้งสองครั้ง หากพารามิเตอร์เปลี่ยนจากการ์ดจริงไปเป็นการเรนเดอร์ด้วยซอฟต์แวร์อย่าง SwiftShader หรือจำนวนส่วนขยายเปลี่ยนชัดเจน ย่อมแปลว่าสภาพแวดล้อมมีการเปลี่ยนแปลง
3. นำผล WebGL ไปตรวจร่วมกับการตั้งค่าสภาพแวดล้อมทั้งชุด หาก WebGL รายงาน Windows กับ NVIDIA, UA กับระบบปฏิบัติการก็ต้องเป็น Windows และเขตเวลา ภาษา กับภูมิภาค IP ต้องเข้ากันเองด้วย สภาพแวดล้อมที่รายการเดียวปกติแต่ประกอบกันแล้วขัดแย้ง ก็ยังโดดออกมาให้เห็น

มีข้อความเตือนอีกประเภทที่ควรพูดแยกไว้ หากหน้าตรวจจับแสดงคำอย่าง SwiftShader หรือ ANGLE (Google) ซึ่งเป็นการเรนเดอร์ด้วยซอฟต์แวร์ อาจเป็นเพราะสภาพแวดล้อมนั้นไม่มีการ์ดจอจริง หรือเบราว์เซอร์เดินเครื่องด้วยการเรนเดอร์ซอฟต์แวร์ก็เป็นได้ อุปกรณ์จริงแทบไม่เคยให้ค่าลักษณะนี้ หากอยู่ในสภาพแวดล้อมที่ดูแลระยะยาว ถือเป็นสัญญาณที่ต้องจัดการ

ใช้พารามิเตอร์ WebGL image ของ MostMate อย่างไร

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

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

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

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

คำถามที่พบบ่อยเกี่ยวกับลายนิ้วมือ WebGL

เว็บไซต์เห็นรุ่นการ์ดจอจริงของฉันได้ไหม

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

ปิด WebGL แล้วเลี่ยงการระบุตัวด้วยลายนิ้วมือได้ไหม

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

ลายนิ้วมือ WebGL กับ Canvas fingerprint เป็นเรื่องเดียวกันไหม

ไม่ใช่ ทั้งสองอาศัยความต่างของการเรนเดอร์เหมือนกัน แต่ Canvas เดินการวาด 2D ส่วน WebGL เดินท่อ 3D และมีชั้นพารามิเตอร์ความสามารถเพิ่มมาอีกหนึ่งชั้น บนหน้าตรวจจับทั้งสองเป็นบล็อกแยกจากกัน ค่าของฝ่ายใดฝ่ายหนึ่งแทนอีกฝ่ายไม่ได้

โบราวเซอร์ลายนิ้วมือเปลี่ยน WebGL ให้เป็นการ์ดรุ่นใดก็ได้หรือไม่

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

บทส่งท้าย

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

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