ในโลกของการพัฒนาเว็บแอปพลิเคชันสมัยใหม่ การรักษาความปลอดภัยของข้อมูลที่อยู่ฝั่งไคลเอนต์ (Client-Side) ถือเป็นหัวใจสำคัญอย่างยิ่ง เนื่องจากช่องโหว่หลายประเภท เช่น Cross-Site Scripting (XSS) ทำให้ผู้โจมตีสามารถแทรกโค้ดอันตรายเข้าไปในหน้าเว็บได้ แม้ว่าเราจะมีการตรวจสอบข้อมูลขาเข้า (Input Validation) อย่างเข้มงวดแล้ว แต่การป้องกันที่ชั้นแอปพลิเคชันก็ยังไม่เพียงพอ เราจึงจำเป็นต้องมีกลไกเชิงลึกที่ทำหน้าที่เป็นกำแพงสุดท้ายเพื่อจำกัดขอบเขตของสิ่งที่โค้ดสามารถทำได้บนเบราว์เซอร์ของผู้ใช้งาน
เจาะลึกรายละเอียดและประเด็นสำคัญ
Content Security Policy (CSP) คือกลไกด้านความปลอดภัยที่ช่วยให้เราสามารถกำหนดรายการแหล่งที่มา (Whitelisting) ของเนื้อหาต่างๆ ที่เบราว์เซอร์อนุญาตให้โหลดและรันได้ โดยหลักการแล้ว CSP จะทำงานโดยการตรวจสอบ HTTP Response Header เพื่อบอกกับเบราว์เซอร์ว่า “โค้ด JavaScript ต้องมาจากโดเมน A เท่านั้น” หรือ “รูปภาพต้องมาจาก CDN B เท่านั้น” หากมีการพยายามโหลดสคริปต์จากแหล่งที่ไม่ได้รับอนุญาต (เช่น การแทรกสคริปต์อันตรายผ่าน XSS) เบราว์เซอร์จะปฏิเสธการรันโค้ดนั้นทันที ทำให้แฮกเกอร์ไม่สามารถใช้ประโยชน์จากช่องโหว่ได้
CSP ไม่ใช่แค่การป้องกัน แต่คือการสร้างนโยบายความเชื่อมั่น (Trust Policy) ให้กับหน้าเว็บของเรา โดยเราจะกำหนด Directives ต่างๆ เช่น script-src สำหรับจำกัดแหล่งที่มาของสคริปต์, object-src สำหรับควบคุมปลั๊กอินหรือองค์ประกอบที่ไม่ใช่มาตรฐาน และ default-src ซึ่งเป็นค่าเริ่มต้นหากไม่ได้ระบุ Directive นั้นๆ การทำความเข้าใจว่าแต่ละ Directives ควบคุมอะไรบ้างจึงสำคัญอย่างยิ่งในการตั้งค่าให้เหมาะสมกับแอปพลิเคชันของเรา
Plain Text
Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedcdn.com; style-src 'self' 'unsafe-inline'; object-src 'none';