การป้องกัน CSRF ในรีแอ็กต์และการตั้งค่า API
ใช้งานคุกกี้ SameSite โทเคน CSRF และรูปแบบคุกกี้ส่งซ้ำสองครั้งใน SPA และการตั้งค่า SSR ของรีแอ็กต์
การป้องกัน CSRF ในรีแอ็กต์และการตั้งค่า API เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
CSRF คืออะไร
การปลอมแปลงคำขอข้ามไซต์ (CSRF) คือการโจมตีที่เว็บไซต์อันตรายหลอกให้เบราว์เซอร์ของผู้ใช้ส่งคำขอที่ผ่านการยืนยันตัวตนไปยัง API ของคุณ เนื่องจากเบราว์เซอร์แนบคุกกี้กับคำขอโดยอัตโนมัติ เซิร์ฟเวอร์จึงไม่สามารถแยกได้ว่าคำขอนั้นเป็นคำขอที่ถูกต้องจากแอปของคุณหรือเป็นคำขอปลอมจากเว็บไซต์ของผู้โจมตี
เหตุใดคุกกี้จึงทำให้เกิด CSRF
คุกกี้เป็นต้นเหตุหลักของช่องโหว่ CSRF เมื่อผู้ใช้เข้าสู่ระบบในแอปของคุณ คุกกี้เซสชันจะถูกจัดเก็บไว้ในเบราว์เซอร์ เมื่อผู้ใช้เข้าชมหน้าเว็บของผู้โจมตี ผู้โจมตีสามารถทำให้เกิดการส่งแบบฟอร์มหรือคำขอ fetch ไปยัง API ของคุณได้ และเบราว์เซอร์จะแนบคุกกี้เซสชันไปด้วยโดยอัตโนมัติ ทำให้คำขออันตรายผ่านการยืนยันตัวตน
แอตทริบิวต์คุกกี้ SameSite
แอตทริบิวต์คุกกี้ SameSite บอกเบราว์เซอร์ว่าควรแนบคุกกี้เมื่อใดในคำขอข้ามไซต์ มีสามค่า ได้แก่ Lax (ค่าเริ่มต้นในเบราว์เซอร์สมัยใหม่ บล็อก POST ข้ามไซต์แต่อนุญาต GET), Strict (บล็อกคำขอข้ามไซต์ทั้งหมด รวมถึงการนำทางด้วย GET) และ None (อนุญาตคำขอข้ามไซต์ แต่ต้องใช้แฟล็ก HTTPS Secure)
SameSite=Lax และ API ที่ปลอดภัย
SameSite=Lax บล็อกคำขอข้ามไซต์แบบ POST, PUT, DELETE และ PATCH ซึ่งเป็นเมธอดที่ใช้เปลี่ยนแปลงข้อมูล หาก API ของคุณใช้ GET สำหรับการอ่านข้อมูลเท่านั้น และใช้ POST สำหรับการเปลี่ยนแปลงข้อมูลทั้งหมด SameSite=Lax จะป้องกัน CSRF สำหรับ SPA ได้อย่างมีประสิทธิภาพในเบราว์เซอร์สมัยใหม่ นี่คือมาตรการพื้นฐานที่แอปพลิเคชันส่วนใหญ่ใช้ในปัจจุบัน
รูปแบบการส่งคุกกี้ซ้ำสองครั้ง
X-CSRF-Token จากนั้นเซิร์ฟเวอร์จะตรวจสอบว่าค่าส่วนหัวตรงกับค่าคุกกี้หรือไม่ ผู้โจมตีไม่สามารถอ่านคุกกี้จากต้นทางอื่นได้ จึงไม่สามารถตั้งค่าส่วนหัวที่ถูกต้องได้รูปแบบโทเค็นซิงโครไนเซอร์
รูปแบบโทเค็นซิงโครไนเซอร์จะสร้างโทเค็น CSRF ที่ไม่ซ้ำกันสำหรับแต่ละเซสชันผู้ใช้บนเซิร์ฟเวอร์ สำหรับแบบฟอร์ม HTML โทเค็นจะฝังอยู่ในฟิลด์ที่ซ่อนอยู่ สำหรับการเรียก API ของ SPA โทเค็นจะส่งผ่านจุดปลายทางหรือแท็กเมตา และส่งไปในส่วนหัวแบบกำหนดเอง เซิร์ฟเวอร์จะตรวจสอบโทเค็นในทุกคำขอที่เปลี่ยนสถานะ
JWT ในส่วนหัว Authorization: ไม่เสี่ยงต่อ CSRF
SPA ที่ใช้ React ซึ่งจัดเก็บ JWT ไว้ในหน่วยความจำหรือ localStorage และส่ง JWT ในส่วนหัว Authorization: Bearer จะไม่เสี่ยงต่อ CSRF แบบดั้งเดิม การโจมตี CSRF อาศัยการยืนยันตัวตนด้วยคุกกี้ หน้าเว็บของผู้โจมตีไม่สามารถตั้งค่าส่วนหัวแบบกำหนดเองในคำขอข้ามต้นทางได้เนื่องจากข้อจำกัดของ CORS จึงปลอมแปลงส่วนหัว Authorization ไม่ได้
ส่วนหัวคำขอแบบกำหนดเองเป็นมาตรการลดความเสี่ยงจาก CSRF
คำขอข้ามต้นทางแบบง่าย (การส่งแบบฟอร์ม การโหลดรูปภาพ) ไม่อนุญาตให้ใช้ส่วนหัวแบบกำหนดเอง เฉพาะคำขอที่ผ่านการตรวจสอบล่วงหน้าของ CORS เท่านั้นที่สามารถมีส่วนหัวแบบกำหนดเองได้ และคำขอที่ผ่านการตรวจสอบล่วงหน้าต้องได้รับอนุญาตจากเซิร์ฟเวอร์อย่างชัดเจน API ที่กำหนดให้ต้องมีส่วนหัวแบบกำหนดเอง เช่น X-Requested-With: XMLHttpRequest สำหรับการเปลี่ยนแปลงข้อมูลทุกครั้ง จะได้รับการป้องกันจากการโจมตี CSRF แบบง่ายโดยธรรมชาติ
CORS และ CSRF แตกต่างกัน
CORS ควบคุมว่าต้นทางใดบ้างสามารถอ่านการตอบกลับจากคำขอข้ามต้นทางได้ ส่วน CSRF เกี่ยวข้องกับต้นทางใดบ้างที่สามารถส่งคำขอซึ่งเปลี่ยนแปลงสถานะได้ การกำหนดค่า CORS เพื่อจำกัดต้นทางไม่ได้ป้องกัน CSRF — เบราว์เซอร์ยังคงส่งคำขอและคุกกี้อยู่ โดย CORS ควบคุมเพียงว่าการตอบกลับจะมองเห็นได้โดย JavaScript หรือไม่ การโจมตี CSRF ไม่จำเป็นต้องอ่านการตอบกลับ
แนวทางปฏิบัติที่ดีสำหรับคุกกี้เซสชัน
กำหนดค่าคุกกี้เซสชันด้วย: HttpOnly: true (ป้องกันไม่ให้ JavaScript อ่านคุกกี้ จึงสกัดการขโมยโทเค็นที่อาศัย XSS), Secure: true (ส่งผ่านการเชื่อมต่อที่เข้ารหัสเท่านั้น), SameSite: Lax หรือ Strict (ป้องกัน CSRF) และ Max-Age หรือวันหมดอายุที่เหมาะสม แอตทริบิวต์ทั้งสี่นี้ช่วยทำให้การจัดการเซสชันปลอดภัยขึ้นอย่างมากเมื่อใช้ร่วมกัน
CSRF ในตัวจัดเส้นทางแอปของ Next.js
ตัวจัดเส้นทางแอปของ Next.js ใช้การดำเนินการฝั่งเซิร์ฟเวอร์ ซึ่งเป็นคำขอ POST โดย Next.js ใช้การป้องกัน CSRF ด้วยการตรวจสอบส่วนหัวต้นทางกับโฮสต์ — คำขอจากต้นทางที่ไม่คาดหมายจะถูกปฏิเสธ การตรวจสอบในตัวนี้ เมื่อใช้ร่วมกับคุกกี้เซสชัน SameSite=Lax จะให้การป้องกัน CSRF ที่แข็งแกร่งสำหรับการเปลี่ยนแปลงข้อมูลผ่านการดำเนินการฝั่งเซิร์ฟเวอร์
แอตทริบิวต์ SameSite ของคุกกี้
ค่าคุกกี้ SameSite ค่าใดที่บล็อกคำขอ POST ข้ามไซต์ แต่อนุญาตการนำทาง GET ข้ามไซต์
ทบทวนบทเรียน
CSRF ใช้ประโยชน์จากการยืนยันตัวตนที่อาศัยคุกกี้ โดยหลอกให้เบราว์เซอร์ส่งคำขอข้ามไซต์ที่ผ่านการยืนยันตัวตนแล้ว SameSite=Lax คือแนวป้องกันพื้นฐานสำหรับเบราว์เซอร์สมัยใหม่ รูปแบบคุกกี้ส่งซ้ำสองครั้งและรูปแบบโทเค็นซิงโครไนเซอร์ช่วยเพิ่มการป้องกันได้อีก แอป SPA ของรีแอกต์ที่ใช้โทเค็นเว็บ JSON ในส่วนหัวการอนุญาตมีภูมิต้านทานต่อ CSRF โดยธรรมชาติ ส่วนหัวที่กำหนดเองและจำเป็น รวมถึงการตรวจสอบ CORS ล่วงหน้า ก็ช่วยลดความเสี่ยงจาก CSRF ได้เช่นกัน ควรใช้ HttpOnly + Secure + SameSite ร่วมกันกับคุกกี้เซสชันเสมอ
คำถามที่พบบ่อย
บทเรียน “การป้องกัน CSRF ในรีแอ็กต์และการตั้งค่า API” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การป้องกัน CSRF ในรีแอ็กต์และการตั้งค่า API” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การป้องกัน CSRF ในรีแอ็กต์และการตั้งค่า API”
ใช้งานคุกกี้ SameSite โทเคน CSRF และรูปแบบคุกกี้ส่งซ้ำสองครั้งใน SPA และการตั้งค่า SSR ของรีแอ็กต์ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การป้องกัน CSRF ในรีแอ็กต์และการตั้งค่า API” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- XSS ในรีแอ็กต์: dangerouslySetInnerHTML และสคริปต์จากบุคคลที่สาม
- การป้องกัน CSRF ในรีแอ็กต์และการตั้งค่า API
- นโยบายความปลอดภัยเนื้อหาสำหรับแอปรีแอ็กต์
- การจัดการความลับและตัวแปรสภาพแวดล้อม