คุกกี้คือกลุ่มของข้อมูลที่จัดเก็บอยู่ในเบราว์เซอร์เพื่อคงสถานะไว้และข้อมูลอื่นๆ ที่เว็บไซต์ต้องใช้เพื่อที่จะเรียกใช้คุณลักษณะของเว็บไซต์
คุกกี้เป็นไฟล์ขนาดเล็กที่เว็บไซต์จัดเก็บไว้ในเครื่องของผู้ใช้ โดยข้อมูลที่คุกกี้จัดเก็บไว้จะเดินทางไปมาระหว่างเบราว์เซอร์และเว็บไซต์
คุกกี้แต่ละรายการเป็นคู่คีย์-ค่าพร้อมกับแอตทริบิวต์จำนวนหนึ่งที่ควบคุมว่าจะใช้คุกกี้นั้นที่ไหนและเมื่อใด แอตทริบิวต์เหล่านี้ใช้เพื่อกำหนดสิ่งต่างๆ เช่น วันที่หมดอายุ หรือระบุว่าให้ส่งคุกกี้ผ่าน HTTPS เท่านั้น คุณสามารถตั้งค่าคุกกี้ในส่วนหัว HTTP หรือผ่านอินเทอร์เฟซ JavaScript ได้
คุกกี้เป็นวิธีหนึ่งที่มีไว้สำหรับการเพิ่มสถานะถาวรในเว็บไซต์ ในช่วงหลายปีที่ผ่านมา ความสามารถต่างๆ ก็เติบโตและพัฒนาขึ้น แต่กลับจากแพลตฟอร์มมีปัญหาเดิมบางอย่าง เพื่อจัดการกับปัญหานี้ เบราว์เซอร์ (รวมถึง Chrome, Firefox และ Edge) จึงเปลี่ยนลักษณะการทำงานเพื่อบังคับใช้ค่าเริ่มต้นของการรักษาความเป็นส่วนตัวมากขึ้น
การทำงานของคุกกี้
สมมติว่าคุณมีบล็อกที่ต้องการแสดงโปรโมชัน "มีอะไรใหม่" แก่ผู้ใช้ ผู้ใช้สามารถปิดโปรโมชันนั้นและจะไม่เห็นโปรโมชันนั้นอีกสักพัก คุณสามารถจัดเก็บค่ากำหนดนั้นในคุกกี้ ตั้งค่าให้หมดอายุใน 1 เดือน (2,600,000 วินาที) และส่งผ่าน HTTPS เท่านั้น ส่วนหัวจะมีลักษณะดังนี้
Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
![คุกกี้ 3 รายการที่ส่งไปยังเบราว์เซอร์จากเซิร์ฟเวอร์ในการตอบสนอง](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-1.png?authuser=6&hl=th)
Set-Cookie
เมื่อผู้อ่านดูหน้าเว็บที่ตรงกับข้อกำหนดเหล่านั้น และกำลังอยู่ในการเชื่อมต่อที่ปลอดภัยและคุกกี้มีอายุไม่ถึง 1 เดือน เบราว์เซอร์จะส่งส่วนหัวนี้ไปในคำขอ
Cookie: promo_shown=1
![คุกกี้ 3 รายการที่ส่งจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์ในคำขอ](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-2.png?authuser=6&hl=th)
Cookie
นอกจากนี้ คุณยังเพิ่มและอ่านคุกกี้ที่เว็บไซต์ดังกล่าวเข้าถึงได้ใน JavaScript โดยใช้ document.cookie
การมอบหมายให้กับ document.cookie
จะสร้างหรือลบล้างคุกกี้ด้วยคีย์นั้น เช่น คุณอาจลองใช้วิธีต่อไปนี้ในคอนโซล JavaScript ของเบราว์เซอร์
→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"
การอ่าน document.cookie
จะแสดงผลคุกกี้ทั้งหมดที่เข้าถึงได้ในบริบทปัจจุบัน โดยคุกกี้แต่ละรายการจะคั่นด้วยเครื่องหมายอัฒภาค ดังนี้
→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"
![JavaScript ที่เข้าถึงคุกกี้ภายในเบราว์เซอร์](https://web.dev/static/articles/understanding-cookies/image/javascript-accessing-cook-4ae4ebde94edc.png?authuser=6&hl=th)
document.cookie
หากลองทดสอบกับเว็บไซต์ยอดนิยมต่างๆ จะเห็นได้ว่า เว็บไซต์ส่วนใหญ่เหล่านั้นตั้งค่ามากกว่าคุกกี้ 3 อย่างอย่างมาก ในกรณีส่วนใหญ่ คุกกี้เหล่านั้นจะส่งทุกครั้งที่ส่งคำขอไปยังโดเมนนั้น ซึ่งมีผลหลายประการ แบนด์วิดท์การอัปโหลดมักถูกจำกัดมากกว่าการดาวน์โหลดสำหรับผู้ใช้ ดังนั้นโอเวอร์เฮดคำขอขาออกทั้งหมดจึงเพิ่มการหน่วงเวลาในการไบต์แรก พยายามรักษาจำนวนและขนาดของคุกกี้ที่คุณตั้งค่าไว้ ใช้แอตทริบิวต์ Max-Age
เพื่อให้มั่นใจว่าคุกกี้จะไม่คงอยู่นานเกินกว่าที่จำเป็น
คุกกี้ของบุคคลที่หนึ่งและบุคคลที่สามคืออะไร
หากคุณกลับไปที่ตัวเลือกเว็บไซต์ที่คุณดูอยู่ก่อนหน้านี้ คุณอาจสังเกตเห็นว่ามีคุกกี้สำหรับหลายโดเมน ไม่ใช่แค่โดเมนที่คุณกำลังเข้าชมอยู่เท่านั้น คุกกี้ที่ตรงกับโดเมนของเว็บไซต์ปัจจุบัน ซึ่งก็คือสิ่งที่แสดงในแถบที่อยู่ของเบราว์เซอร์ จะเรียกว่าคุกกี้บุคคลที่หนึ่ง ในทำนองเดียวกัน คุกกี้จากโดเมนอื่นนอกเหนือจากเว็บไซต์ปัจจุบันจะเรียกว่าคุกกี้บุคคลที่สาม ป้ายกำกับนี้ไม่ใช่ป้ายกำกับที่สมบูรณ์ แต่เกี่ยวข้องกับบริบทของผู้ใช้ คุกกี้เดียวกันอาจเป็นบุคคลที่หนึ่งหรือบุคคลที่สามก็ได้ ขึ้นอยู่กับว่าผู้ใช้อยู่เว็บไซต์ใดในขณะนั้น
![คุกกี้ 3 รายการที่ส่งคำขอหลายรายการในหน้าเดียวกันไปยังเบราว์เซอร์หนึ่ง](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-93367a53e4231.png?authuser=6&hl=th)
ต่อจากตัวอย่างด้านบน สมมติว่าบล็อกโพสต์หนึ่งมีรูปแมวน่ารักๆ หนึ่งตัว โดยโฮสต์อยู่ที่ /blog/img/amazing-cat.png
เนื่องจากเป็นภาพที่น่าทึ่ง
ทำให้ผู้อื่นนำภาพนี้ไปใช้ในเว็บไซต์ของตนโดยตรง หากผู้เข้าชมเคยเข้าชมบล็อกของคุณและมีคุกกี้ promo_shown
อยู่ เมื่อผู้เข้าชมดู amazing-cat.png
ในเว็บไซต์ของอีกฝ่าย ระบบจะส่งคุกกี้นี้ในคำขอรูปภาพนั้น วิธีนี้ไม่มีประโยชน์สำหรับใครเลย เนื่องจาก promo_shown
ไม่ได้ใช้เพื่อวัตถุประสงค์ใดๆ ในเว็บไซต์ของคนอื่น แต่เป็นแค่การเพิ่มโอเวอร์เฮดในคำขอเท่านั้น
หากนั่นเป็นผลกระทบที่เกิดขึ้นโดยไม่ได้ตั้งใจ เหตุใดคุณจึงควรทำเช่นนี้ ซึ่งเป็นกลไกที่ช่วยให้เว็บไซต์คงสถานะไว้เมื่อมีการนำไปใช้ในบริบทของบุคคลที่สาม เช่น หากคุณฝังวิดีโอ YouTube ในเว็บไซต์ ผู้เข้าชมจะเห็นตัวเลือก "ดูภายหลัง" ในโปรแกรมเล่น หากผู้เข้าชมลงชื่อเข้าใช้ YouTube อยู่แล้ว คุกกี้ของบุคคลที่สามจะทำให้เซสชันนั้นใช้งานได้ในโปรแกรมเล่นแบบฝัง ซึ่งหมายความว่าปุ่ม "ดูภายหลัง" จะบันทึกวิดีโอเพียงครั้งเดียว แทนที่จะแจ้งให้ผู้เข้าชมลงชื่อเข้าใช้หรือต้องออกจากหน้าเว็บของคุณแล้วกลับมาที่ YouTube อีก
![คุกกี้เดียวกันที่ส่งในบริบทที่ต่างกัน 3 บริบท](https://web.dev/static/articles/understanding-cookies/image/the-same-cookie-being-sen-8e25fd5cdbf86.png?authuser=6&hl=th)
คุณสมบัติทางวัฒนธรรมอย่างหนึ่งของเว็บนี้คือเว็บมีแนวโน้มที่จะเปิดโดยค่าเริ่มต้น สิ่งนี้เองที่ทำให้คนจำนวนมากสามารถสร้าง
เนื้อหาและแอปของตนเองที่นั่นได้ แต่วิธีนี้ก็ได้นำมาซึ่ง
ข้อกังวลด้านความปลอดภัยและความเป็นส่วนตัวอีกมากมาย การโจมตีด้วยการปลอมแปลงคำขอแบบข้ามเว็บไซต์ (CSRF) อาศัยข้อเท็จจริงที่ว่าคุกกี้แนบอยู่กับคำขอใดก็ตามไปยังต้นทางที่ระบุ ไม่ว่าใครจะเป็นผู้ส่งคำขอให้ก็ตาม ตัวอย่างเช่น ถ้าคุณไปที่ evil.example
จะทำให้ระบบส่งคำขอไปยัง your-blog.example
ได้ และเบราว์เซอร์ของคุณจะแนบคุกกี้ที่เชื่อมโยงอยู่ด้วย หากบล็อกของคุณไม่ระมัดระวังในการตรวจสอบคำขอเหล่านั้น evil.example
อาจทริกเกอร์การดำเนินการต่างๆ เช่น การลบโพสต์หรือเพิ่มเนื้อหาของตนเองได้
นอกจากนี้ ผู้ใช้ยังตระหนักถึงวิธีใช้คุกกี้เพื่อติดตามกิจกรรมของตนในเว็บไซต์ต่างๆ มากขึ้นอีกด้วย อย่างไรก็ตาม ก่อนหน้านี้ยังไม่มีวิธีระบุเจตนาของคุณอย่างชัดแจ้งกับคุกกี้ คุณควรส่งคุกกี้ promo_shown
ในบริบทของบุคคลที่หนึ่งเท่านั้น ในขณะที่คุกกี้เซสชันสำหรับวิดเจ็ตที่มีจุดประสงค์เพื่อฝังในเว็บไซต์อื่นๆ มีไว้เพื่อแสดงสถานะการลงชื่อเข้าใช้ในบริบทของบุคคลที่สาม
คุณระบุ Intent อย่างชัดแจ้งด้วยคุกกี้ได้โดยการตั้งค่าแอตทริบิวต์ SameSite ที่เหมาะสม
หากต้องการระบุคุกกี้ของบุคคลที่หนึ่งและกำหนดแอตทริบิวต์ที่เหมาะสม โปรดดูสูตรคุกกี้ของบุคคลที่หนึ่ง