Vue Academy · บทเรียน

Content Security Policy (CSP) กับ Vue

ส่วนหัว CSP สคริปต์ที่ใช้ nonce นโยบายที่ใช้แฮช และการกำหนดค่า CSP ของ Vite

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

CSP คืออะไร

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

ส่วนหัว

CSP ส่งมาผ่านส่วนหัวการตอบกลับ Content-Security-Policy โดยคำสั่งแต่ละรายการจะแสดงแหล่งที่มาที่อนุญาตสำหรับทรัพยากรแต่ละประเภท

Content-Security-Policy: default-src 'self'; script-src 'self';

การจำกัดแหล่งที่มาของสคริปต์

คำสั่ง script-src ควบคุมว่าสคริปต์จะโหลดจากที่ใดได้บ้าง การจำกัดให้เหลือเพียง 'self' จะบล็อกสคริปต์ในบรรทัดและสคริปต์จากบุคคลที่สามที่ผู้โจมตีอาจแทรกเข้ามา

Content-Security-Policy: script-src 'self' https://cdn.trusted.com;

การหลีกเลี่ยง unsafe-inline

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

การหลีกเลี่ยง unsafe-eval

'unsafe-eval' อนุญาตให้ใช้ eval และตัวสร้าง Function รุ่นรันไทม์ Vue 3 ไม่จำเป็นต้องใช้สิ่งนี้ เพราะเทมเพลตถูกคอมไพล์ไว้ล่วงหน้าแล้ว ดังนั้นคุณจึงสามารถและควรตัดค่านี้ออก

สคริปต์ในบรรทัดที่ใช้ค่าตัวระบุแบบใช้ครั้งเดียว

เมื่อจำเป็นต้องใช้สคริปต์ในบรรทัดจริง ๆ ให้กำหนด nonce แบบสุ่มที่แตกต่างกันในแต่ละการตอบกลับ และระบุค่าดังกล่าวไว้ในนโยบาย เฉพาะสคริปต์ที่มีค่าตัวระบุตรงกันเท่านั้นจึงจะทำงาน

<!-- header includes: script-src 'nonce-abc123' -->
<script nonce="abc123">
  // allowed because nonce matches
</script>

เหตุใดค่าตัวระบุจึงดีกว่า unsafe-inline

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

CSP และสไตล์ของ Vue

Vue และไลบรารีส่วนติดต่อผู้ใช้จำนวนมากจะแทรกสไตล์ขณะทำงาน คุณอาจอนุญาตให้ทำเช่นนั้นผ่าน style-src ด้วยค่าตัวระบุหรือแฮช หรือแยก CSS ออกเป็นไฟล์เพื่อให้ style-src 'self' เพียงพอ

Content-Security-Policy: style-src 'self';

ปลั๊กอิน Vite CSP nonce สำหรับการพัฒนา

เซิร์ฟเวอร์สำหรับการพัฒนาของ Vite จะแทรกสคริปต์ ซึ่งอาจขัดแย้งกับ CSP ที่เข้มงวด ปลั๊กอิน nonce ของ CSP จะประทับค่าตัวระบุที่ตรงกันลงบนแท็กที่ Vite แทรกในระหว่างการพัฒนา

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  html: {
    cspNonce: "DEV_NONCE"
  }
});

connect-src สำหรับ API

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

Content-Security-Policy: connect-src 'self' https://api.example.com;

โหมดรายงานเท่านั้น

เปิดใช้ CSP อย่างปลอดภัยด้วย Content-Security-Policy-Report-Only ซึ่งจะรายงานการละเมิดโดยไม่บล็อก ทำให้คุณปรับนโยบายได้ก่อนบังคับใช้จริง

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

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

ควรหลีกเลี่ยงค่าใดของคำสั่ง CSP เพื่อให้การป้องกัน XSS ยังคงแข็งแกร่ง

สรุปทบทวน

CSP คือส่วนหัว HTTP ที่จำกัดแหล่งที่มาของสคริปต์ สไตล์ และการเชื่อมต่อที่อนุญาต จึงบล็อกโค้ดที่ถูกแทรกได้แม้ XSS จะหลุดรอดเข้ามา หลีกเลี่ยง unsafe-inline และ unsafe-eval ใช้ค่าตัวระบุที่แตกต่างกันในแต่ละการตอบกลับสำหรับสคริปต์ในบรรทัดที่จำเป็น และใช้ปลั๊กอิน nonce ของ CSP สำหรับ Vite ในการพัฒนา เริ่มใช้ด้วยโหมดรายงานเท่านั้นก่อนบังคับใช้นโยบายจริง

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

บทเรียน “Content Security Policy (CSP) กับ Vue” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Content Security Policy (CSP) กับ Vue”

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

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

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

บทเรียน “Content Security Policy (CSP) กับ Vue” ใช้เวลานานแค่ไหน

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

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

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

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

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