เดโมต่อไปนี้แสดงวิธีที่เบราว์เซอร์จัดการคุกกี้
- คุกกี้ของบุคคลที่หนึ่ง: ตั้งค่าโดยเว็บไซต์ที่คุณเข้าชม
- คุกกี้ของบุคคลที่สาม: ตั้งค่าโดยเว็บไซต์อื่น
เดโมคุกกี้ของบุคคลที่หนึ่ง
👉 สาธิต: 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
เพื่อตอบสนอง
