การแสดงตัวอย่างต่อไปนี้แสดงลักษณะการทํางานของเบราว์เซอร์เมื่อเว็บไซต์ที่คุณกําลังเข้าชม (คุกกี้ของบุคคลที่หนึ่ง) หรือจากเว็บไซต์อื่น (คุกกี้ของบุคคลที่สาม) ตั้งค่าคุกกี้
หน้าสาธิตแต่ละหน้าที่มีลิงก์จะมีวิธีการอย่างละเอียด
คุกกี้ของบุคคลที่สามถูกจำกัดโดยค่าเริ่มต้นสำหรับ 1% ของผู้ใช้ Chrome เพื่อเอื้อต่อการทดสอบ หากคุณอยู่ในกลุ่มนี้ ระบบจะจำกัดคุกกี้ของบุคคลที่สามโดยค่าเริ่มต้น และระบบจะบล็อกคุกกี้ของบุคคลที่สามสําหรับเดโมคุกกี้ของบุคคลที่สามที่แสดงในหน้านี้ หน้า chrome://settings/cookies จะปรากฏดังนี้
บทความในศูนย์ช่วยเหลือของ Chrome เรื่องจัดการการตั้งค่าคุกกี้ของบุคคลที่สามสำหรับผู้ใช้ในกลุ่มทดสอบอธิบายวิธีที่ผู้ใช้ในกลุ่มนี้บล็อกคุกกี้ของบุคคลที่สามได้ทั้งหมด
เดโมคุกกี้ของบุคคลที่หนึ่ง
👉 สาธิต: 1pc.glitch.me
หน้าเดโมมีรูปภาพและ iframe จากเว็บไซต์เดียวกับหน้าระดับบนสุด ส่วนหัว Set-Cookie จะรวมอยู่ในการตอบกลับคําขอทั้งรูปภาพและ iframe แต่ส่วนหัว Set-Cookie จะมีค่า Path และ Max-Age ที่แตกต่างกัน
เดโมคุกกี้ของบุคคลที่สาม
👉 ตัวอย่าง: 3pc.glitch.me
รูปภาพและ iframe ในหน้าเดโมมาจากเว็บไซต์อื่น นั่นคือ 3p-site.glitch.me
ส่วนหัว Set-Cookie จะรวมอยู่ในการตอบกลับคําขอทั้งรูปภาพและ iframe อย่างไรก็ตาม Set-Cookieส่วนหัวคำตอบสำหรับรูปภาพและ iframe แต่ละรายการมีค่า SameSite ที่แตกต่างกัน ซึ่งส่งผลต่อวิธีที่เบราว์เซอร์จัดการ
การสาธิตนี้แสดงวิธีที่คุกกี้ของบุคคลที่สามอาจถูกบล็อกโดยข้อจํากัดของเบราว์เซอร์ การตั้งค่าของผู้ใช้ การตั้งค่า Flag ของนักพัฒนาซอฟต์แวร์ หรือนโยบายขององค์กร
ดูข้อมูลเพิ่มเติม
ตัวอย่างคุกกี้ JavaScript
👉 สาธิต: javascript-cookie.glitch.me
JavaScript ที่รวมอยู่ในหน้าเดโมจะตั้งค่าคุกกี้ดังนี้
document.cookie = 'cat=tabby';
เมื่อตั้งค่าแล้ว คุกกี้จะรวมอยู่ในคําขอทรัพยากรใน javascript-cookie.glitch.me คุกกี้นี้จัดว่าเป็นคุกกี้ของบุคคลที่หนึ่งเนื่องจากเว็บไซต์ที่คุณเข้าชมเป็นผู้ตั้งค่า หากมีการเรียกใช้ JavaScript เดียวกันใน iframe แบบข้ามเว็บไซต์ เบราว์เซอร์จะถือว่ารายการนี้เป็นคุกกี้ของบุคคลที่สาม
เดโมคุกกี้ SameSite
การสาธิตนี้ประกอบด้วยหน้าเว็บ 2 หน้า ซึ่งแต่ละหน้าอยู่ในเว็บไซต์อื่น
👉 samesite-a.glitch.me
👉 samesite-b.glitch.me
แต่ละหน้าจะมีข้อมูลต่อไปนี้
- รูปภาพจากเว็บไซต์อื่น
- ลิงก์ไปยังเว็บไซต์อื่น
ทั้ง 2 เว็บไซต์ตั้งค่าคุกกี้เพื่อตอบสนองคําขอโดยใช้ค่า Lax SameSite เริ่มต้น
SameSite=Lax อนุญาตให้ตั้งค่าคุกกี้เพื่อตอบสนองต่อคำขอการนําทางข้ามเว็บไซต์ (การไปยังลิงก์) แต่จะไม่อนุญาตให้ตั้งค่าคุกกี้ในคำขออื่นๆ ข้ามเว็บไซต์ (เช่น การโหลดรูปภาพ)
ไปที่หน้าเดโมเพื่อดูวิธีที่เบราว์เซอร์จัดการคุกกี้ SameSite=Lax แตกต่างกันเมื่อไปยังลิงก์และเมื่อโหลดรูปภาพ
การสาธิตการติดตามด้วยคุกกี้ข้ามเว็บไซต์
การสาธิตนี้ประกอบด้วย 2 เว็บไซต์ ได้แก่
👉 example-a.glitch.me
👉 example-b.glitch.me
หน้าแรกใน example-a.glitch.me และ example-b.glitch.me ทั้ง 2 หน้ามี iframe จาก tracker-site.glitch.me ซึ่งใช้คุกกี้เพื่อติดตามกิจกรรมการท่องเว็บในหน้าที่ฝัง iframe
ขณะที่คุณไปยังส่วนต่างๆ ระหว่าง example-a.glitch.me และ example-b.glitch.me เนื้อหาของ iframe ติดตามจะอัปเดตเพื่อแสดงว่า tracker-site.glitch.me กำลังติดตามกิจกรรมของคุณใน 2 เว็บไซต์นี้ (ไม่ได้ฝังในเว็บไซต์อื่น)
การสาธิตนี้แสดงวิธีที่เครื่องมือติดตามใช้คุกกี้เพื่อบันทึกกิจกรรมของคุณในเว็บไซต์ต่างๆ
ตัวอย่างพิกเซลการติดตาม
การสาธิตนี้ประกอบด้วย 2 เว็บไซต์ ได้แก่
👉 tracking-pixel-a.glitch.me
👉 tracking-pixel-b.glitch.me
ทั้ง 2 รายการมีรูปภาพขนาด 1 พิกเซลจาก tracking-pixel-server.glitch.me ซึ่งอนุญาตให้ใช้คุกกี้เพื่อติดตามกิจกรรมของคุณในเว็บไซต์ที่มีรูปภาพดังกล่าว
ทั้ง 2 หน้ายังมี iframe จาก tracking-pixel-server.glitch.me ที่แสดงการเข้าชมหน้าเว็บที่บันทึกไว้สําหรับหน้าเว็บที่มีพิกเซลการติดตาม
การสาธิตนี้แสดงวิธีใช้พิกเซลติดตามกับคุกกี้เพื่อบันทึกกิจกรรมของคุณในหลายเว็บไซต์
การสาธิตการดึงข้อมูลคุกกี้
👉 สาธิต: fetch-cookie.glitch.me
JavaScript ที่รวมอยู่ในหน้านี้ทําการเรียกfetch()ข้ามเว็บไซต์ไปยัง
3p-site.glitch.me/fetch ซึ่งจะตั้งค่าคุกกี้ fetch=true เพื่อตอบสนอง
