การป้องกัน XSS ใน {#html}
ทำความเข้าใจความเสี่ยงของ {@html} และวิธีทำให้ HTML ที่ไม่น่าเชื่อถือปลอดภัย
การป้องกัน XSS ใน {#html} เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
XSS คืออะไร
Cross-Site Scripting คือการแทรกสคริปต์ที่เป็นอันตรายลงในหน้าเว็บ ซึ่งมักเกิดผ่านข้อมูลนำเข้าที่ไม่น่าเชื่อถือจากผู้ใช้
ความปลอดภัยเริ่มต้น
Svelte จะหลีกอักขระของข้อความที่แทรกโดยค่าเริ่มต้น {user.name} จึงปลอดภัย
ความเสี่ยงของ {@html}
แท็ก {@html ...} จะแทรก HTML ดิบ อย่าส่งข้อมูลที่ไม่น่าเชื่อถือผ่านแท็กนี้
ทำความสะอาดข้อมูลก่อน
ใช้ไลบรารีอย่าง DOMPurify เพื่อทำความสะอาด HTML ก่อนแทรกลงในหน้าเว็บ
import DOMPurify from "isomorphic-dompurify";
const safe = DOMPurify.sanitize(userMarkdown);
<div>{@html safe}</div>การทำความสะอาดข้อมูลฝั่งเซิร์ฟเวอร์
ทำความสะอาดข้อมูลบนเซิร์ฟเวอร์ขณะจัดเก็บ ไม่ใช่เฉพาะตอนแสดงผล เพื่อป้องกันปัญหาจากข้อผิดพลาดที่อาจเกิดขึ้นในอนาคต
รายการที่อนุญาต
กำหนดค่า DOMPurify ให้ยอมรับเฉพาะแท็กและแอตทริบิวต์ที่ระบุ เช่น ไม่อนุญาต <script>
กระบวนการ Markdown
สำหรับ Markdown ของผู้ใช้ ให้แปลงเป็น HTML แล้วทำความสะอาดก่อนส่งออก
แหล่งที่เชื่อถือได้
โดยทั่วไป HTML จาก CMS หรือเนื้อหาแบบคงที่จะปลอดภัย แต่เนื้อหาที่ผู้ใช้ส่งเข้ามานั้นไม่ปลอดภัย
ส่วนหัว CSP
กำหนดนโยบายความปลอดภัยของเนื้อหาเพื่อจำกัดความเสียหายหาก XSS หลุดรอดเข้ามา
สคริปต์แบบอินไลน์
ไม่อนุญาตสคริปต์แบบอินไลน์ใน CSP เพื่อป้องกันไม่ให้สคริปต์ที่ถูกแทรกทำงาน
ตรวจสอบเป็นประจำ
ตรวจสอบการใช้ {@html} ทุกจุด และถือว่าเป็นการทำงานที่สำคัญต่อความปลอดภัย
ตรวจสอบอย่างรวดเร็ว
ความเสี่ยงหลักของ {@html} คืออะไร
สรุป
หลีกเลี่ยงการใช้ {@html} กับข้อมูลที่ไม่น่าเชื่อถือ ทำความสะอาดข้อมูลด้วย DOMPurify และบังคับใช้ CSP ที่เข้มงวดเพื่อเพิ่มการป้องกันอีกชั้น
คำถามที่พบบ่อย
บทเรียน “การป้องกัน XSS ใน {#html}” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การป้องกัน XSS ใน {#html}” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การป้องกัน XSS ใน {#html}”
ทำความเข้าใจความเสี่ยงของ {@html} และวิธีทำให้ HTML ที่ไม่น่าเชื่อถือปลอดภัย คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การป้องกัน XSS ใน {#html}” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การป้องกัน CSRF ในแอ็กชันแบบฟอร์ม
- การป้องกัน XSS ใน {#html}
- ตัวแปรสภาพแวดล้อม: $env/static และ $env/dynamic
- การจำกัดอัตราด้วย Hooks