คำว่า sanitize ในบริบทของเว็บ หมายถึง

การ "ทำความสะอาด" ข้อมูลก่อนแสดงผล เพื่อ ป้องกันการโจมตี XSS (Cross-site scripting)

---

ยกตัวอย่างง่าย ๆ

สมมุติว่า content จากไฟล์ JSON หรือฐานข้อมูลเป็นแบบนี้:

{
  "text": "ยินดีต้อนรับ <script>alert('แฮก!')</script>"
}

ถ้าเราใช้ dangerouslySetInnerHTML แล้วไม่ sanitize:

<div dangerouslySetInnerHTML={{ __html: content.text }} />

ผลลัพธ์คือ...

หน้าเว็บจะรัน <script> และเปิด alert — แสดงว่าโดนโจมตี XSS แล้ว!

---

วิธี Sanitize

เราสามารถใช้ ไลบรารี sanitize ที่เชื่อถือได้ ในฝั่ง frontend ก่อนแสดงผล เช่น:

1. DOMPurify (นิยมมาก)

npm install dompurify

แล้วใช้แบบนี้:

import DOMPurify from 'dompurify';

const cleanHtml = DOMPurify.sanitize(content.text);

return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;

DOMPurify จะเอา tag ที่ไม่ปลอดภัย (เช่น <script>, <iframe>, ฯลฯ) ออกให้หมด
และปล่อยให้แค่ <strong>, <em>, <a> ที่เราต้องการยังอยู่

---

2. ใช้แบบมี whitelist

DOMPurify ยังให้กำหนด whitelist ได้ด้วย เช่น:

DOMPurify.sanitize(content.text, {
  ALLOWED_TAGS: ['strong', 'em', 'a'],
  ALLOWED_ATTR: ['href']
});

---

สรุปสั้น ๆ

| ทำไมต้อง sanitize? | เพราะ dangerouslySetInnerHTML จะเชื่อ HTML โดยไม่กรองอะไรเลย | | ใช้อะไร sanitize? | ใช้ DOMPurify | | ปลอดภัยแค่ไหน? | ถ้า sanitize แล้ว ก็มั่นใจได้มาก (เกือบที่สุดแล้วในระดับ frontend) |

---

ถ้าอยากให้ช่วยเขียน utility sanitize function ให้ใช้ในโปรเจกต์ก็ได้นะ บอกได้เลยจ้ะ.