สูตรคุกกี้ SameSite

Rowan Merewood

Chrome Firefox Edge และอีก คนเปลี่ยนลักษณะการทำงานเริ่มต้นให้สอดคล้องกับ IETF ข้อเสนอ คุกกี้ที่ดีขึ้นทีละน้อย ดังนั้น:

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

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

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

  • Chrome: 51.
  • ขอบ: 16
  • Firefox: 60
  • Safari: 13.

แหล่งที่มา

กรณีการใช้งานสำหรับคุกกี้ข้ามเว็บไซต์หรือคุกกี้ของบุคคลที่สาม

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

เนื้อหาใน <iframe>

เนื้อหาจากเว็บไซต์อื่นที่แสดงใน <iframe> เป็นของบุคคลที่สาม บริบท กรณีการใช้งานมาตรฐานมีดังนี้

  • เนื้อหาแบบฝังที่แชร์จากเว็บไซต์อื่น เช่น วิดีโอ แผนที่ ตัวอย่างโค้ด และโพสต์บนโซเชียลเน็ตเวิร์ก
  • วิดเจ็ตจากบริการภายนอก เช่น การชำระเงิน ปฏิทิน การจอง และ ฟีเจอร์การจอง
  • วิดเจ็ต เช่น ปุ่มโซเชียลหรือบริการป้องกันการฉ้อโกงที่ทำให้เกิดความไม่ชัดเจนน้อยลง <iframes>

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

วันที่ แผนภาพแสดงหน้าต่างเบราว์เซอร์ซึ่ง URL ของเนื้อหาที่ฝังไม่ตรงกับ URL ของหน้าเว็บ
หากเนื้อหาที่ฝังไม่ได้มาจากเว็บไซต์เดียวกับระดับบนสุด บริบทการท่องเว็บ เนื้อหาของบุคคลที่สาม

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

"ไม่ปลอดภัย" คำขอข้ามเว็บไซต์

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

วันที่ แผนภาพคำขอที่ย้ายจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง
หากคำขอที่เข้ามาใช้แท็ก "safe" หน้าเว็บจะส่งคุกกี้

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

แหล่งข้อมูลระยะไกล

ทรัพยากรระยะไกลในหน้าเว็บ เช่น จากแท็ก <img> หรือแท็ก <script> อาจต้องอาศัยคุกกี้ที่ส่งไปกับคำขอ กรณีการใช้งานที่พบบ่อย ได้แก่ พิกเซลการติดตามและการปรับเปลี่ยนเนื้อหาในแบบของคุณ

การตั้งค่านี้จะมีผลกับคำขอที่ส่งจาก JavaScript ของคุณโดยใช้ fetch หรือ XMLHttpRequest หากมีการเรียก fetch() ด้วยฟังก์ชัน credentials: 'include' ตัวเลือก คำขอเหล่านั้นก็มีแนวโน้มว่าจะมีคุกกี้ด้วย สำหรับ XMLHttpRequest คุกกี้ที่คาดไว้มักจะระบุด้วย ค่า withCredentials สำหรับ true คุกกี้เหล่านี้จะต้องได้รับการทำเครื่องหมายอย่างเหมาะสมเพื่อให้อยู่ใน คำขอข้ามเว็บไซต์

เนื้อหาภายใน WebView

WebView ในแอปเฉพาะแพลตฟอร์มขับเคลื่อนโดยเบราว์เซอร์ นักพัฒนาแอปต้อง ทดสอบว่าข้อจำกัดหรือปัญหาที่ส่งผลกระทบต่อแอป WebView ในแอปของตน

นอกจากนี้ Android ยังอนุญาตให้แอปเฉพาะแพลตฟอร์มตั้งค่าคุกกี้โดยตรงด้วย CookieManager API เช่นเดียวกับคุกกี้ที่ตั้งค่าโดยใช้ส่วนหัวหรือ JavaScript ให้พิจารณารวม SameSite=None; Secure หากมีไว้เพื่อใช้ข้ามเว็บไซต์

วิธีใช้ SameSite วันนี้เลย

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

Set-Cookie: first_party_var=value; SameSite=Lax

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

Set-Cookie: third_party_var=value; SameSite=None; Secure

จัดการไคลเอ็นต์ที่ทำงานร่วมกันไม่ได้

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

วิธีแก้ปัญหาเบื้องต้นอย่างหนึ่งที่เป็นไปได้คือ การตั้งค่าคุกกี้แต่ละรายการทั้งในสไตล์ใหม่และแบบเดิม

Set-cookie: 3pcookie=value; SameSite=None; Secure
Set-cookie: 3pcookie-legacy=value; Secure

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

ตัวอย่างต่อไปนี้แสดงวิธีดำเนินการใน Node.js โดยใช้ เฟรมเวิร์ก Express และ มิดเดิลแวร์cookie-parser

const express = require('express');
const cp = require('cookie-parser');
const app = express();
app.use(cp());

app.get('/set', (req, res) => {
  // Set the new style cookie
  res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
  // And set the same value in the legacy cookie
  res.cookie('3pcookie-legacy', 'value', { secure: true });
  res.end();
});

app.get('/', (req, res) => {
  let cookieVal = null;

  if (req.cookies['3pcookie']) {
    // check the new style cookie first
    cookieVal = req.cookies['3pcookie'];
  } else if (req.cookies['3pcookie-legacy']) {
    // otherwise fall back to the legacy cookie
    cookieVal = req.cookies['3pcookie-legacy'];
  }

  res.end();
});

app.listen(process.env.PORT);

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

หรือคุณจะตรวจหาไคลเอ็นต์โดยใช้สตริง User Agent เมื่อ ส่งส่วนหัว Set-Cookie แล้ว โปรดดู รายชื่อไคลเอ็นต์ที่ทำงานร่วมกันไม่ได้ และใช้ไลบรารีการตรวจจับ User Agent ที่เหมาะสมสำหรับแพลตฟอร์มของคุณ ตัวอย่างเช่น ไลบรารี ua-parser-js บน Node.js วิธีนี้กําหนดให้คุณทำการเปลี่ยนแปลงเพียงรายการเดียว แต่ให้ User Agent การดมกลิ่นอาจตรวจจับผู้ใช้ที่ได้รับผลกระทบได้ไม่ครบทุกคน

รองรับ SameSite=None ในภาษา ไลบรารี และเฟรมเวิร์ก

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

การขอความช่วยเหลือ

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