ฟิงเกอร์พรินต์ ClientRects คืออะไร คู่มือตรวจความสอดคล้องสภาพแวดล้อมหลายบัญชี

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

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

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

ฟิงเกอร์พรินต์ ClientRects คืออะไรกันแน่

พูดสั้น ๆ: ฟิงเกอร์พรินต์ ClientRects อ่านพิกัดกล่องที่แม่นยำขององค์ประกอบในหน้า เรียก getBoundingClientRect() จะได้ความกว้าง ความสูง และตำแหน่งเทียบกับ viewport ขององค์ประกอบ เอกสาร MDN นิยามว่า "คืนขนาดขององค์ประกอบและตำแหน่งเทียบกับ viewport" ส่วนองค์ประกอบแบบตัวอักษรที่ขึ้นบรรทัดใหม่ใช้ getClientRects() อ่าน หนึ่งบรรทัดต่อหนึ่งสี่เหลี่ยม

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

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

ทำไมค่าของสองสภาพแวดล้อมถึงไม่ตรงกัน

ความกว้างของข้อความถูกกำหนดด้วยไปป์ไลน์การจัดวางทั้งสาย:

• เอนจินจัดวางตัวอักษร: Windows, macOS, Linux ต่างก็มีของตัวเอง ฟอนต์เดียวกัน ตัวอักษรชุดเดียวกัน แต่ระยะห่างตัวอักษรที่คำนวณได้ต่างกัน
• การย่อขยายหน้าจอ: จอความละเอียดสูงกับการย่อขยายของระบบเปลี่ยนความละเอียดของการปัดเศษ ตำแหน่งทศนิยมจึงเปลี่ยนตาม
• การฟอลแบ็กฟอนต์: ฟอนต์ที่หน้าต้องการไม่มีในเครื่อง ต้องสลับไปฟอนต์สำรอง ความกว้างจึงเปลี่ยนไป
• เอนจินเบราว์เซอร์กับการซูมหน้า: แต่ละเคอร์เนลขึ้นบรรทัดใหม่ไม่เหมือนกัน และการซูมหน้าเข้าไปอยู่ในไปป์ไลน์เลย์เอาต์โดยตรง

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

ค่านี้เล่นบทบาทอะไรในความสอดคล้องของสภาพแวดล้อม

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

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

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

ใน MostMate ตั้งค่าอย่างไร

ในฟอร์มการตั้งค่าฟิงเกอร์พรินต์ของ MostMate ClientRects มีช่องของตัวเองโดด ๆ ข้าง ๆ คือ Canvas, AudioContext, SpeechVoices และ WebGL Image มันมีแค่สองโหมด: โหมด Real คืนการจัดวางจริงของเครื่อง ส่วนโหมด Noise คือโหมดสัญญาณรบกวน

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

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

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

ตั้งเสร็จแล้วตรวจอย่างไร

ตรวจสอบเป็นสองขั้น ดูก่อนว่าค่าเปลี่ยนตามคาด แล้วดูว่ายังสอดคล้องกัน

ขั้นที่ 1: เทียบค่าระหว่างสองสภาพแวดล้อม สร้างสองสภาพแวดล้อม เลือก Real หนึ่ง Noise หนึ่ง แล้วเปิดหน้าตรวจจับ Client Rects ของ BrowserLeaks ทั้งคู่ บนเครื่องเดียวกัน ค่าสี่เหลี่ยมของสภาพแวดล้อม Real ควรเท่ากัน สภาพแวดล้อม Noise ควรต่างจาก Real และสองสภาพแวดล้อม Noise ก็ควรแยกจากกัน ตอนบันทึกให้เน้นดูจากตำแหน่งทศนิยมที่สามเป็นต้นไป ความต่างมักเริ่มตรงนั้น จดค่าของแต่ละสภาพแวดล้อมไว้เป็นเส้นฐานของสภาพแวดล้อมนั้น

ขั้นที่ 2: ตรวจความสอดคล้อง จากนั้นต้องผ่านการตรวจไขว้:

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

ผ่านครบถึงจบ ไม่ผ่านขั้นไหน กลับไปแก้โหมดในการตั้งค่าฟิงเกอร์พรินต์

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

หน้าตรวจจับทำ ClientRects เป็นสีแดง แปลว่าสภาพแวดล้อมมีปัญหาแน่หรือ

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

ปรับซูมของเบราว์เซอร์แล้วฟิงเกอร์พรินต์ ClientRects เปลี่ยนไหม

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

ClientRects ปิดใช้งานได้ไหม

ไม่ได้ การคำนวณเลย์เอาต์เป็นพื้นฐานของการทำงานปกติของเว็บ การจัดข้อความ การวางตำแหน่งป๊อปอัป และอนิเมชันล้วนพึ่งพามัน เบราว์เซอร์ไม่มีสวิตช์ปิดให้ใช้ แนวทางในวงการคือลดความละเอียดของค่าแทนการปิด Tor Browser ก็ปัดค่าที่วัดได้เป็นจำนวนเต็มเพื่อลดความต่างที่จำแนกได้

ทำไมเบราว์เซอร์แบบ headless ถึงมักโดนจับได้ที่ค่าขนาดขององค์ประกอบ

viewport เริ่มต้นของสภาพแวดล้อม headless ค่อนข้างคงที่ สแตกการเรนเดอร์ข้อความก็รูปแบบเดียว สี่เหลี่ยมที่วัดได้มักไม่เข้ากับเครื่องที่ UA ที่ประกาศอ้างว่าเป็น ระบบควบคุมความเสี่ยงเอา rect ไปไขว้กับพารามิเตอร์ประกาศอื่น ๆ สภาพแวดล้อมแบบนี้จึงถูกคัดออกได้ง่าย

บทส่งท้าย

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

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