HTML Academy · บทเรียน

Content Security Policy meta http-equiv

กำหนด Content Security Policy ผ่าน meta http-equiv

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

CSP คืออะไร

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

สองวิธีในการส่งมอบ

CSP สามารถส่งมาเป็นส่วนหัวการตอบกลับ HTTP (Content-Security-Policy: ...) หรือเป็นเมตาแท็กใน HTML: <meta http-equiv="Content-Security-Policy" content="..."> ส่วนหัวเป็นวิธีที่แนะนำ ส่วนเมตาแท็กมีประโยชน์เมื่อคุณควบคุมเซิร์ฟเวอร์ไม่ได้

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://cdn.example.com">

คำสั่งที่พบบ่อย

default-src เป็นค่าเผื่อสำหรับประเภททรัพยากรที่ไม่ได้ระบุคำสั่งไว้ script-src, style-src, img-src, connect-src (XHR/fetch), font-src และ frame-src ต่างจำกัดทรัพยากรแต่ละประเภทของตนเอง ให้ระบุต้นทางที่อนุญาตเป็นรายการเฉพาะ หรือใช้ 'self' หากต้องการอนุญาตเฉพาะต้นทางเดียวกัน

คีย์เวิร์ด self

'self' (มีเครื่องหมายคำพูดครอบ) หมายถึงต้นทางของหน้าเว็บนั้นเอง script-src 'self' หมายความว่า "เรียกใช้ได้เฉพาะสคริปต์ที่โฮสต์อยู่บนต้นทางเดียวกับหน้าเว็บ" นี่คือพื้นฐานของนโยบายส่วนใหญ่ และสามารถเพิ่ม CDN ภายนอกที่ต้องการได้

การบล็อกสคริปต์แบบแทรกในบรรทัด

โดยค่าเริ่มต้น CSP จะบล็อกแท็ก <script> แบบแทรกในบรรทัดทั้งหมด รวมถึงแอตทริบิวต์ตัวจัดการเหตุการณ์ (onclick) นี่เป็นการป้องกัน XSS ที่แข็งแกร่งที่สุด: สคริปต์ที่ถูกแทรกเข้ามาจะทำงานไม่ได้เพราะเป็นสคริปต์แบบแทรกในบรรทัด ย้ายสคริปต์ทั้งหมดไปไว้ในไฟล์ภายนอกที่อ้างอิงผ่าน src

ค่า nonce และแฮช

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

<meta http-equiv="Content-Security-Policy"
  content="script-src 'nonce-abc123'">
<script nonce="abc123">// allowed</script>
<script>// blocked — no nonce</script>

unsafe-inline และ unsafe-eval

'unsafe-inline' อนุญาตให้สคริปต์และสไตล์แบบแทรกในบรรทัดกลับมาทำงานได้อีกครั้ง ส่วน 'unsafe-eval' อนุญาตให้ eval() และ new Function() กลับมาใช้งานได้อีกครั้ง ทั้งสองอย่างลดความปลอดภัยของ CSP อย่างมาก ควรใช้เป็นทางเลือกสุดท้ายระหว่างการย้ายระบบ และวางแผนลบออก

ข้อจำกัดของเมตาแท็ก

CSP ที่ส่งผ่านเมตาแท็กไม่สามารถใช้คำสั่ง report-uri (หรือคุณลักษณะการรายงานอื่น ๆ) ได้ นอกจากนี้ยังมีผลช้ากว่าส่วนหัว — ทุกสิ่งที่อยู่ก่อนเมตาแท็กจะไม่ได้รับการป้องกัน ส่วนหัวดีกว่าอย่างชัดเจน จึงควรใช้เมตาแท็กเป็นเพียงทางเลือกสำรอง

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

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

ข้อผิดพลาดที่พบบ่อย

การลืม style-src 'unsafe-inline' จะทำให้สไตล์แบบแทรกในบรรทัดถูกบล็อก (ซึ่งเฟรมเวิร์กมักสร้างขึ้น) การลืม connect-src จะบล็อก AJAX ที่ส่งไปยังส่วนต่อประสานโปรแกรมประยุกต์ ควรทดสอบนโยบายในโหมดรายงานเท่านั้นก่อนเสมอ และตรวจสอบคอนโซลเพื่อดูทรัพยากรที่ถูกบล็อก

แนวทาง CSP สมัยใหม่

CSP แบบเข้มงวดจะใช้ script-src 'nonce-RANDOM' 'strict-dynamic' สำหรับสคริปต์ ร่วมกับรายการอนุญาตที่จำกัดสำหรับทรัพยากรประเภทอื่นทั้งหมด ค่า 'strict-dynamic' ช่วยให้สคริปต์ที่มี nonce โหลดสคริปต์เพิ่มเติมได้โดยไม่ต้องระบุสคริปต์แต่ละรายการ — ทำให้ดูแลรักษาได้ง่ายกว่าการสร้างรายการอนุญาตแยกตามต้นทางมาก

ตรวจสอบความรู้

CSP ป้องกันการโจมตี XSS ได้อย่างไร แม้ผู้โจมตีจะแทรกแท็กสคริปต์สำเร็จ

สรุป

CSP เป็นนโยบายที่เบราว์เซอร์บังคับใช้เพื่อจำกัดว่าสคริปต์ สไตล์ รูปภาพ และทรัพยากรอื่น ๆ ใดจะโหลดได้ ส่งนโยบายผ่านส่วนหัวการตอบกลับ (วิธีที่แนะนำ) หรือเมตาแท็ก ใช้ค่า nonce กับสคริปต์แบบแทรกในบรรทัดที่จำเป็น หลีกเลี่ยง unsafe-inline/unsafe-eval และทดสอบในโหมดรายงานเท่านั้นก่อน CSP แบบเข้มงวดที่ใช้ 'nonce-X' 'strict-dynamic' คือพื้นฐานของแนวทางสมัยใหม่

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

บทเรียน “Content Security Policy meta http-equiv” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Content Security Policy meta http-equiv”

กำหนด Content Security Policy ผ่าน meta http-equiv คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “Content Security Policy meta http-equiv” ใช้เวลานานแค่ไหน

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

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

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

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

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