ClientRects

1. ClientRects ในการสร้างลายนิ้วมือของเบราว์เซอร์คืออะไร

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

• การตั้งค่า DPI / การปรับขนาด
• ความคลาดเคลื่อนในการโหลดฟอนต์
• ความหลากหลายของระดับการซูม
• เอนจินการเรนเดอร์เค้าโครงของเบราว์เซอร์ (เช่น สไตล์ Blink, WebKit, Gecko)

แพลตฟอร์มป้องกันการฉ้อโกงบางแห่งสังเกตเห็นรูปแบบต่างๆ เช่น:

• ความแม่นยำระดับซับพิกเซลของการปรับขนาด
• การปัดเศษและการจัดการทศนิยมของตำแหน่งเค้าโครงที่อิงตามเลขทศนิยม
• ความแตกต่างของขนาดสัมพัทธ์ระหว่างคอนเทนเนอร์ที่ซ่อนมาตรฐานซึ่งใช้สำหรับการทดสอบ

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

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

ระบบป้องกันการฉ้อโกงสามารถสร้างลายนิ้วมือของเบราว์เซอร์ได้โดย:

1. การวัดพิกัดกล่องขององค์ประกอบทดสอบที่มองไม่เห็น: โดยการซ่อนองค์ประกอบนอกหน้าจอหรือซ่อนอย่างถาวรในเค้าโครง พวกเขาสามารถเปรียบเทียบค่า rect ที่คาดหวังกับค่าจริงเพื่อหาจุดบอกการปลอมแปลง
2. การเฝ้าดูพฤติกรรมการปรับขนาดระหว่างการซูม: เป็นวิธีการที่เรียบง่ายแต่มีประสิทธิภาพ — ผู้สังเกตการณ์จะติดตามการแปลงและการอัปเดต rect ของเบราว์เซอร์ของคุณระหว่างการ “ซูม” หรือปรับขนาดจำลอง และเชื่อมโยงตรรกะ
3. การรั่วไหลของการคำนวณเลขทศนิยมลอยตัว: ความแตกต่างเล็กน้อยในความแม่นยำของทศนิยมสามารถระบุเอนจินเค้าโครงภายในของเอนจินเบราว์เซอร์ได้ — เช่น Chrome คำนวณแตกต่างจาก Safari หรือ Firefox
4. ความสอดคล้องของสไตล์ CSS: ระบบขั้นสูงบางระบบใช้ประโยชน์จากความแปรปรวนของการจัดเรียงใหม่ (reflow) และการจัดเค้าโครงใหม่ (relayout) ที่เกิดจากการอัปเดตสไตล์ที่ปรากฏในข้อมูล rect เพื่ออนุมานความไม่สอดคล้องของเบราว์เซอร์
5. การตรวจสอบการปัดเศษขนาดฟอนต์: องค์ประกอบทดสอบที่เรนเดอร์ไว้ล่วงหน้าด้วยขนาดฟอนต์คงที่สามารถเปิดเผยเอนจินการเรนเดอร์ฟอนต์ ซึ่งโดยทั่วไปจะเชื่อมโยงกับประเภท OS เช่น Windows, macOS หรือ Linux/Android

หากค่าทศนิยมของเค้าโครงที่เรนเดอร์นั้น “สะอาด” ทางคณิตศาสตร์มากเกินไป หรือไม่สามารถแปรผันได้แม้ตามกฎการเรนเดอร์ที่เล็กที่สุด — ซึ่ง FlashID สร้างขึ้นใน รูปแบบความเบี่ยงเบนที่สมจริง — เอนจินป้องกันลายนิ้วมือจะบันทึกสิ่งเหล่านี้ว่าเป็นความผิดปกติ

3. FlashID ซ่อนลายนิ้วมือ ClientRects ได้อย่างไร

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

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

โซลูชันลายนิ้วมือ ClientRects ของ FlashID ประกอบด้วย:

1. การปลอมแปลง ClientRect ผ่านการจัดการองค์ประกอบแบบไดนามิก: FlashID จะฉีดและแก้ปัญหาการวัดรูปสี่เหลี่ยมแบบไดนามิก โดยส่งคืน ค่า rect ที่กำหนดเองแต่เป็นไปได้ ตามโปรไฟล์เบราว์เซอร์แต่ละรายการ
2. ความแม่นยำในการปัดเศษที่ปรับได้: ความแม่นยำของเลขทศนิยมลอยตัวสำหรับมิติของ rect สามารถกำหนดค่าเล็กน้อยได้ในแต่ละเซสชัน — ซึ่งสะท้อนพฤติกรรมของเบราว์เซอร์และระบบตามธรรมชาติ
3. การซิงโครไนซ์การปลอมแปลงกับโมดูล CSS/ฟอนต์และซูม: การปลอมแปลง ClientRects ทำงานร่วมกับฟอนต์เบราว์เซอร์ การซูม และการตั้งค่าสไตล์ เพื่อให้มั่นใจว่าตรงกับผลลัพธ์การเรนเดอร์ที่คาดหวัง
4. การฉีดความแปรปรวนเดลต้า: FlashID จะฉีดความแปรปรวนเทียมเข้าไปในการวัดที่อิงตาม rect เพื่อป้องกันการจับคู่เซสชัน — แต่ยังคงอยู่ภายในขอบเขตของการปัดเศษที่เบราว์เซอร์คาดหวังหรือ ‘สัญญาณรบกวน’ ของเค้าโครง
5. หลีกเลี่ยงการตรวจสอบ DOM ที่มองไม่เห็นแบบมาตรฐาน: ระบบจะจำลองและคำนวณค่า rect ที่จำเป็นทั้งหมด แม้กระทั่งสำหรับองค์ประกอบที่ซ่อนอยู่ หลอกระบบตรวจจับให้เชื่อถือพฤติกรรมที่ผิดปกติ
6. การกระเพื่อมขององค์ประกอบที่วัดได้: สำหรับแต่ละโปรไฟล์ การเบี่ยงเบนและการกระเพื่อมเล็กน้อยที่ใช้กับค่าขนาดองค์ประกอบ จะทำให้เบราว์เซอร์ FlashID มีโปรไฟล์การเรนเดอร์ที่สมจริง

การแยกพฤติกรรมนี้ช่วยให้มั่นใจได้ว่า แม้ในเว็บไซต์ที่เน้นการติดตามเชิงลึกโดยใช้ reflow เบราว์เซอร์ FlashID ของคุณยังคง ไม่สัมพันธ์กัน ไม่เชื่อมโยง และ ยากต่อการติดตาม โดยใช้วิธีการเค้าโครง

คุณอาจชอบ