Client Rects คืออะไร?

Client Rects คือชุด API ที่เบราว์เซอร์จัดเตรียมไว้เพื่อใช้รับข้อมูลเลย์เอาต์ขององค์ประกอบบนหน้าเว็บ รวมถึงตำแหน่งที่แม่นยำและขนาดขององค์ประกอบบนหน้าเว็บ ข้อมูลเหล่านี้จะถูกส่งกลับมาในรูปแบบของ “สี่เหลี่ยม”（rects）ซึ่งประกอบด้วยรายละเอียดต่าง ๆ เช่น ด้านบน ด้านล่าง ด้านซ้าย ด้านขวา ความกว้าง และความสูงขององค์ประกอบ



Client Rects กลายเป็นลายนิ้วมือได้อย่างไร?

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



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



กระบวนการสร้างลายนิ้วมือ Client Rects

โดยทั่วไป เว็บไซต์จะรับลายนิ้วมือเบราว์เซอร์ผ่าน Client Rects ตามขั้นตอนต่อไปนี้:



ขั้นตอนที่หนึ่ง: เลือกหรือสร้างองค์ประกอบเป้าหมาย



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



ขั้นตอนที่สอง: รับ Client Rects ขององค์ประกอบ



เรียกใช้เมธอด getClientRects() ขององค์ประกอบผ่าน JavaScript เพื่อรับข้อมูลเลย์เอาต์ขององค์ประกอบนั้น ข้อมูลที่ส่งกลับมาจะประกอบด้วยข้อมูลตำแหน่งและขนาดขององค์ประกอบ——เช่น ด้านบน（top）, ด้านล่าง（bottom）, ด้านซ้าย（left）, ด้านขวา（right）, ความกว้าง（width）และความสูง（height）เป็นต้น



ขั้นตอนที่สาม: บันทึกหรือประมวลผลข้อมูล



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



ขั้นตอนที่สี่: สร้างลายนิ้วมือเบราว์เซอร์



สุดท้าย เว็บไซต์จะนำข้อมูลเลย์เอาต์เหล่านี้ไปรวมกับข้อมูลอื่น ๆ（เช่น ที่อยู่ IP, สตริง User-Agent เป็นต้น）แล้วใช้อัลกอริทึมเฉพาะเพื่อสร้างลายนิ้วมือเบราว์เซอร์ที่ไม่ซ้ำกัน สำหรับระบุและติดตามผู้ใช้



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



สามารถเข้าใจ Client Rects ได้ว่าเป็น “ไม้บรรทัด” ของเว็บไซต์——มันใช้วัดอย่างแม่นยำว่าเบราว์เซอร์ของคุณเรนเดอร์และจัดวางองค์ประกอบบนหน้าเว็บอย่างไร และผลการวัดเหล่านี้มีความแตกต่างเล็กน้อยแต่สามารถระบุได้ระหว่างอุปกรณ์ต่าง ๆ