คำอธิบายเกี่ยวกับคุกกี้ SameSite

การรองรับเบราว์เซอร์

  • Chrome: 51.
  • Edge: 16.
  • Firefox: 60
  • Safari: 13.

แหล่งที่มา

คุกกี้ทุกรายการมีคู่คีย์-ค่าพร้อมกับแอตทริบิวต์จํานวนหนึ่งที่ควบคุมเวลาและตําแหน่งที่จะใช้คุกกี้นั้น

การใช้แอตทริบิวต์ SameSite (ที่ระบุไว้ใน RFC6265bis) ช่วยให้คุณประกาศได้ว่าคุกกี้ของคุณจํากัดอยู่ในบริบทของบุคคลที่หนึ่งหรือบริบทของเว็บไซต์เดียวกัน เราขอแนะนำให้เข้าใจว่า "เว็บไซต์" ในที่นี้หมายถึงอะไร เว็บไซต์คือส่วนต่อท้ายโดเมนและส่วนของโดเมนก่อนหน้า เช่น โดเมน www.web.dev เป็นส่วนหนึ่งของเว็บไซต์ web.dev

คีย์เวิร์ด: หากผู้ใช้อยู่ใน www.web.dev และขอรูปภาพจาก static.web.dev จะถือว่าเป็นคำขอแบบเว็บไซต์เดียวกัน

รายการคำต่อท้ายสาธารณะจะกำหนดว่าหน้าใดอยู่ในเว็บไซต์เดียวกัน ซึ่งไม่เพียงแต่ขึ้นอยู่กับโดเมนระดับบนสุด เช่น .com แต่ยังรวมบริการอย่าง github.io ไว้ด้วย วิธีนี้จะช่วยให้ระบบนับ your-project.github.io และ my-project.github.io เป็นเว็บไซต์แยกกัน

คีย์เวิร์ด: หากผู้ใช้อยู่ใน your-project.github.io และขอรูปภาพจาก my-project.github.io นั่นคือคำขอข้ามเว็บไซต์

ใช้แอตทริบิวต์ SameSite เพื่อประกาศการใช้คุกกี้

แอตทริบิวต์ SameSite ในคุกกี้มี 3 วิธีในการควบคุมลักษณะการทํางานนี้ คุณเลือกที่จะไม่ระบุแอตทริบิวต์ หรือจะใช้ Strict หรือ Lax เพื่อจํากัดคุกกี้ให้ใช้กับคําขอในเว็บไซต์เดียวกันก็ได้

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

Set-Cookie: promo_shown=1; SameSite=Strict

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

SameSite=Lax ช่วยให้เบราว์เซอร์ส่งคุกกี้ด้วยการนำทางระดับบนสุดเหล่านี้ได้ ตัวอย่างเช่น หากเว็บไซต์อื่นอ้างอิงเนื้อหาของเว็บไซต์คุณ ในกรณีนี้โดยใช้รูปภาพแมวของคุณและระบุลิงก์ไปยังบทความของคุณ ดังนี้

<p>Look at this amazing cat!</p>
<img src="https://blog.example/blog/img/amazing-cat.png" />
<p>Read the <a href="https://blog.example/blog/cat.html">article</a>.</p>

เมื่อตั้งค่าคุกกี้เป็น Lax ดังนี้

Set-Cookie: promo_shown=1; SameSite=Lax

เมื่อเบราว์เซอร์ขอ amazing-cat.png สำหรับบล็อกของบุคคลอื่น เว็บไซต์ของคุณจะไม่ส่งคุกกี้ อย่างไรก็ตาม เมื่อผู้อ่านไปที่ลิงก์ไปยัง cat.html ในเว็บไซต์ของคุณ คําขอดังกล่าวจะมีคุกกี้รวมอยู่ด้วย

เราขอแนะนำให้ใช้ SameSite ในลักษณะนี้ โดยตั้งค่าคุกกี้ที่ส่งผลต่อการแสดงผลเว็บไซต์เป็น Lax และตั้งค่าคุกกี้ที่เกี่ยวข้องกับการดำเนินการของผู้ใช้เป็น Strict

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

คุกกี้ 3 รายการที่มีป้ายกำกับว่า &quot;ไม่มี&quot; &quot;ผ่อนปรน&quot; หรือ &quot;เข้มงวด&quot; โดยขึ้นอยู่กับบริบท
ทําเครื่องหมายบริบทของคุกกี้เป็น None, Lax หรือ Strict อย่างชัดเจน

การเปลี่ยนแปลงลักษณะการทำงานเริ่มต้นโดยไม่มี SameSite

การรองรับเบราว์เซอร์

  • Chrome: 80
  • Edge: 86
  • Firefox: อยู่หลังธง
  • Safari: ไม่รองรับ

แอตทริบิวต์ SameSite ได้รับการรองรับอย่างกว้างขวาง แต่ยังไม่มีการนำไปใช้อย่างแพร่หลาย ก่อนหน้านี้ การตั้งค่าคุกกี้โดยไม่มี SameSite จะส่งคุกกี้ในบริบททั้งหมดโดยค่าเริ่มต้น ซึ่งทำให้ผู้ใช้เสี่ยงที่จะเกิด CSRF และการรั่วไหลของข้อมูลโดยไม่ตั้งใจ เพื่อส่งเสริมให้นักพัฒนาแอประบุความตั้งใจของตนและมอบประสบการณ์การใช้งานที่ปลอดภัยยิ่งขึ้น เอกสารข้อเสนอของ IETF เรื่อง คุกกี้ที่ดีขึ้นเรื่อยๆ ได้ระบุการเปลี่ยนแปลงสำคัญ 2 ประการดังนี้

  • ระบบจะถือว่าคุกกี้ที่ไม่มีแอตทริบิวต์ SameSite เป็น SameSite=Lax
  • คุกกี้ที่มี SameSite=None จะต้องระบุ Secure ด้วย ซึ่งหมายความว่าต้องใช้บริบทที่ปลอดภัย

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

SameSite=Lax โดยค่าเริ่มต้น

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

SameSite=None ต้องปลอดภัย

เมื่อสร้างคุกกี้ข้ามเว็บไซต์โดยใช้ SameSite=None คุณต้องตั้งค่าคุกกี้เหล่านั้นเป็น Secure เพื่อให้เบราว์เซอร์ยอมรับคุกกี้เหล่านั้นด้วย โดยทำดังนี้

Set-Cookie: widget_session=abc123; SameSite=None; Secure

คุณสามารถทดสอบลักษณะการทํางานนี้ได้ตั้งแต่ Chrome 76 โดยเปิดใช้ about://flags/#cookies-without-same-site-must-be-secure และจาก Firefox 69 โดยตั้งค่า network.cookie.sameSite.noneRequiresSecure ใน about:config

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

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

ขอขอบคุณ Lily Chen, Malte Ubl, Mike West, Rob Dodson, Tom Steiner และ Vivek Sekhar ที่ให้ความร่วมมือและแสดงความคิดเห็น

รูปภาพหลักของ Cookie โดย Pille-Riin Priske ใน Unsplash