Vue Academy · บทเรียน

การป้องกัน CSRF ใน SPA ของ Vue

คุกกี้ SameSite โทเค็น CSRF ใน Axios และรูปแบบคุกกี้ส่งซ้ำสองครั้ง

การป้องกัน CSRF ใน SPA ของ Vue เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

CSRF คืออะไร

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

เหตุใดคุกกี้จึงทำให้เกิดช่องโหว่นี้

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

แอตทริบิวต์ SameSite ของคุกกี้

การกำหนด SameSite ให้คุกกี้จะบอกเบราว์เซอร์ว่าควรส่งคุกกี้นั้นข้ามไซต์เมื่อใด SameSite=Strict จะไม่ส่งคุกกี้ในคำขอข้ามไซต์ใด ๆ จึงบล็อก CSRF ได้เกือบทั้งหมดโดยตรง

Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnly

Strict กับ Lax

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

รูปแบบโทเค็นประสานงาน

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

คุกกี้ส่งซ้ำสองครั้ง

แนวทางที่ใช้กันทั่วไปสำหรับ SPA คือ เซิร์ฟเวอร์กำหนดโทเค็น CSRF ไว้ในคุกกี้ที่อ่านได้ (ไม่ใช่ HttpOnly) ไคลเอ็นต์จะอ่านคุกกี้แล้วส่งโทเค็นซ้ำในส่วนหัว เซิร์ฟเวอร์จะตรวจสอบว่าค่าทั้งสองตรงกัน

Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; Secure

การอ่านโทเค็นจากคุกกี้

อ่านค่าคุกกี้ CSRF ด้วยตัวช่วยขนาดเล็กในแอป Vue ของคุณ

function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(^| )" + name + "=([^;]+)")
  );
  return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");

การกำหนดส่วนหัวให้คำขอ

ส่งโทเค็นในส่วนหัวแบบกำหนดเอง เช่น X-CSRF-Token ไปกับคำขอที่เปลี่ยนแปลงสถานะทุกครั้ง (POST, PUT, PATCH, DELETE)

await fetch("/api/transfer", {
  method: "POST",
  headers: { "X-CSRF-Token": token },
  body: JSON.stringify(payload)
});

ส่วนหัวเริ่มต้นของ Axios

เมื่อใช้ Axios คุณสามารถกำหนดส่วนหัวเป็นค่าเริ่มต้นเพียงครั้งเดียว เพื่อให้ทุกคำขอมีส่วนหัวนี้โดยอัตโนมัติ

import axios from "axios";

axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");

การรองรับ xsrf ในตัวของ Axios

Axios ทำสิ่งนี้ให้โดยอัตโนมัติได้เช่นกัน เพียงกำหนดชื่อคุกกี้และชื่อส่วนหัว แล้ว Axios จะอ่านคุกกี้และกำหนดส่วนหัวให้คุณ

const api = axios.create({
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-CSRF-Token",
  withCredentials: true
});

เหตุใดส่วนหัวแบบกำหนดเองจึงช่วยได้

เบราว์เซอร์จะบล็อกไซต์ข้ามต้นทางไม่ให้กำหนดส่วนหัวแบบกำหนดเอง หากไม่ได้ผ่านการตรวจสอบ CORS ล่วงหน้า การกำหนดให้ต้องมี X-CSRF-Token จึงทำให้คำขอข้ามไซต์ปลอมไม่สามารถใส่ส่วนหัวนี้ได้ และเซิร์ฟเวอร์จะปฏิเสธคำขอดังกล่าว

ตรวจสอบอย่างรวดเร็ว

แอตทริบิวต์คุกกี้ใดช่วยลด CSRF ได้โดยตรงที่สุดเมื่อใช้เพียงอย่างเดียว

สรุปทบทวน

CSRF อาศัยคุกกี้ที่ส่งโดยอัตโนมัติเพื่อปลอมคำขอที่เปลี่ยนแปลงสถานะ กำหนด SameSite=Strict ให้คุกกี้ยืนยันตัวตนเป็นการป้องกันหลัก และเพิ่มโทเค็น CSRF โดยอ่านจากคุกกี้แล้วส่งไปกับคำขอที่เปลี่ยนแปลงข้อมูลทุกครั้งผ่านส่วนหัว X-CSRF-Token ซึ่งกำหนดเป็นค่าเริ่มต้นของ Axios เพียงครั้งเดียว หรือกำหนดผ่านตัวเลือก xsrf ในตัวของ Axios

คำถามที่พบบ่อย

บทเรียน “การป้องกัน CSRF ใน SPA ของ Vue” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การป้องกัน CSRF ใน SPA ของ Vue” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การป้องกัน CSRF ใน SPA ของ Vue”

คุกกี้ SameSite โทเค็น CSRF ใน Axios และรูปแบบคุกกี้ส่งซ้ำสองครั้ง คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

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

บทเรียน “การป้องกัน CSRF ใน SPA ของ Vue” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy