นโยบายความปลอดภัยเนื้อหาสำหรับแอปรีแอ็กต์

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

default-src 'self' กำหนดค่าพื้นฐานว่า ทรัพยากรทุกประเภท (สคริปต์ สไตล์ รูปภาพ แบบอักษร และเฟรม) โหลดได้จากต้นทางเดียวกันเท่านั้น ส่วน script-src 'self' จะจำกัดการโหลดสคริปต์ให้มาจากต้นทางเดียวกัน โดยบล็อกสคริปต์จาก CDN ภายนอกเว้นแต่จะระบุไว้อย่างชัดเจน คำสั่งทั้งสองนี้เป็นรากฐานของ CSP ที่มีข้อจำกัดเข้มงวด

eval() แปลงสตริงให้เป็นโค้ดที่ทำงานได้ขณะโปรแกรมทำงาน ซึ่งตรงกับสิ่งที่เพย์โหลด XSS ต้องการ CSP ที่มี script-src 'self' (โดยไม่มี 'unsafe-eval') จะบล็อก eval() และฟังก์ชันที่เกี่ยวข้อง เช่น new Function() และ setTimeout(string) จึงกำจัดการเรียกใช้งานเพย์โหลด XSS ประเภทสำคัญประเภทหนึ่ง

'strict-dynamic' ใน script-src มอบความน่าเชื่อถือให้สคริปต์ที่โหลดโดยสคริปต์ซึ่งเชื่อถือได้อยู่แล้ว วิธีนี้รองรับรูปแบบการโหลดสคริปต์แบบไดนามิกที่เครื่องมือรวมโค้ดใช้ โดยไม่ต้องระบุที่อยู่ CDN ทุกแห่งไว้ในรายการอนุญาต สคริปต์ที่เชื่อถือได้สามารถโหลดสคริปต์เพิ่มเติมได้ และสคริปต์เหล่านั้นจะได้รับความน่าเชื่อถือสืบต่อกัน

หากแอปพลิเคชันจำเป็นต้องใช้สคริปต์แบบฝังในหน้าโดยเฉพาะ (เช่น ส่วนเริ่มต้นการวิเคราะห์การใช้งาน) คุณสามารถคำนวณค่าแฮช SHA-256 ของสคริปต์นั้น แล้วเพิ่ม 'sha256-base64hash' ลงใน script-src ได้ อนุญาตให้ทำงานแบบฝังในหน้าเฉพาะสคริปต์ที่ตรงกับค่าแฮชนั้นทุกประการเท่านั้น สคริปต์ที่ผู้โจมตีแทรกเข้ามาจะมีค่าแฮชแตกต่างกันและถูกบล็อก

ค่าลับสุ่มคือค่าที่เซิร์ฟเวอร์สร้างขึ้นแบบสุ่มทางการเข้ารหัสสำหรับคำขอแต่ละรายการ เซิร์ฟเวอร์จะใส่ค่าลับสุ่มเดียวกันทั้งในแท็กสคริปต์ (<script nonce="abc123">) และในส่วนหัว CSP (script-src 'nonce-abc123') ระบบจะให้ทำงานเฉพาะสคริปต์ที่มีค่าลับสุ่มถูกต้องเท่านั้น ผู้โจมตีไม่สามารถคาดเดาค่าลับสุ่มได้ ดังนั้นสคริปต์ที่ถูกแทรกจึงไม่สามารถนำค่านั้นไปใช้ได้

CSP รองรับการรายงานการละเมิดผ่าน report-uri /csp-violation-endpoint หรือคำสั่งใหม่กว่าอย่าง report-to เมื่อเบราว์เซอร์บล็อกทรัพยากรเนื่องจาก CSP เบราว์เซอร์จะส่งรายงานข้อมูลแบบเจสันไปยังจุดปลายทาง การติดตามรายงานเหล่านี้ช่วยให้คุณระบุได้ทั้งปัญหาการกำหนดค่าที่เกิดขึ้นโดยชอบธรรมและความพยายามโจมตีที่กำลังดำเนินอยู่

ใน Next.js ให้เพิ่มส่วนหัว CSP ในมิดเดิลแวร์: สร้าง middleware.ts สร้างค่าลับสุ่ม กำหนดส่วนหัว Content-Security-Policy และส่งค่าลับสุ่มไปยังหน้าผ่านส่วนหัวการตอบกลับ โครงร่างหน้าจะอ่านค่าลับสุ่มจากส่วนหัว แล้วนำไปใช้กับสคริปต์แบบฝังในหน้าและแท็กสไตล์ทั้งหมด

Content-Security-Policy-Report-Only คือโหมดการทดสอบ: เบราว์เซอร์จะไม่บังคับใช้นโยบายใด ๆ แต่จะส่งรายงานการละเมิดสำหรับทุกสิ่งที่ควรถูกบล็อก ให้เผยแพร่ในโหมดรายงานเท่านั้นก่อน แก้ไขการละเมิดทั้งหมด แล้วจึงเปลี่ยนไปใช้ส่วนหัว Content-Security-Policy ที่บังคับใช้จริง เพื่อหลีกเลี่ยงไม่ให้แอปพลิเคชันทำงานผิดพลาด

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

CSP เชิงปฏิบัติสำหรับแอป SPA ของรีแอกต์: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none' นอกจากนี้ frame-ancestors 'none' ยังป้องกันการโจมตีแบบหลอกให้คลิก โดยบล็อกไม่ให้แอปของคุณถูกฝังในเฟรมอินไลน์

คำสั่ง script-src 'self' ใน CSP ป้องกันสิ่งใด

CSP คือส่วนหัวการตอบกลับของเว็บที่ประกาศแหล่งเนื้อหาที่เชื่อถือได้ default-src 'self' และ script-src 'self' บล็อกสคริปต์ภายนอกและ eval อนุญาตสคริปต์แบบฝังในหน้าผ่านแฮชหรือค่าลับสุ่ม 'strict-dynamic' รองรับการโหลดสคริปต์แบบไดนามิก ใช้ Content-Security-Policy-Report-Only เพื่อทดสอบก่อนบังคับใช้จริง Next.js ใช้ CSP ผ่านมิดเดิลแวร์ คอนโซล DevTools แสดงการละเมิดแบบเรียลไทม์