ตัวแปลง HTML (เข้ารหัส/ถอดรหัส)

รองรับการ escape และ unescape เอนทิตี HTML จัดการอักขระพิเศษและแท็ก ตรวจจับรูปแบบเอนทิตีที่มีชื่อและตัวเลขโดยอัตโนมัติ ป้องกันการโจมตี XSS เหมาะสำหรับการแสดงข้อมูลที่ผู้ใช้ป้อน ตัวอย่างโค้ด และการประมวลผลเนื้อหาที่ปลอดภัย

วิธีใช้งาน

🚀 เริ่มต้นอย่างรวดเร็ว

กรอกเนื้อหา ลงในช่อง
เลือกโหมด เข้ารหัส หรือ ถอดรหัส
คลิกปุ่มเพื่อแปลงค่าผลลัพธ์จะแสดงในกล่องข้อความเดียวกัน
คลิกปุ่มคัดลอกเพื่อใช้งานผลลัพธ์ต่อ

📌 สถานการณ์การใช้งานทั่วไป

คอมเมนต์ผู้ใช้: Escape ข้อความที่ผู้ใช้ส่งมาเพื่อลดความเสี่ยง XSS
บทความบล็อก: แสดงตัวอย่างโค้ด HTML ในเนื้อหา
กระทู้/ฟอรัม: แสดงเนื้อหาที่ผู้ใช้สร้างอย่างปลอดภัย
ระบบแชต: ป้องกันไม่ให้โค้ดอันตรายแพร่กระจายผ่านข้อความ
ข้อมูลฟอร์ม: ประมวลผลและแสดงข้อมูลจากฟอร์มโดยไม่เสี่ยง XSS
หน้าแสดงโค้ด: แสดงโค้ด HTML/JavaScript บนหน้าเว็บ

🎛️ กฎและรูปแบบการ Escape HTML

อักขระที่พบบ่อย: < > & " '
รูปแบบ Entity: อักขระพิเศษจะแปลงเป็นรูปแบบ &entity; หรือ &#code; เช่น < กลายเป็น < หรือ <
Escape ใน attribute: แปลงเครื่องหมายคำพูดเป็น " เพื่อป้องกันการหลุดออกจากค่า attribute
ป้องกันสคริปต์: แท็ก <script> จะถูก Escape เพื่อป้องกันการฝัง JavaScript
เช่น เขียน <div> เป็น <div> เพื่อไม่ให้เบราว์เซอร์ตีความเป็นแท็กจริง

🧭 คำแนะนำการใช้งาน

คำนึงถึงบริบท: เลือกวิธี Escape ให้เหมาะกับบริบทการแสดงผล
ทำฝั่งเซิร์ฟเวอร์: การป้องกันสำคัญควรทำซ้ำที่ฝั่งเซิร์ฟเวอร์
ตรวจสอบซ้ำ: ตรวจดูผลลัพธ์หลัง Escape เพื่อให้แน่ใจว่าไม่มีส่วนใดหลุดไป
ใช้ไลบรารี: ใน production ควรใช้ไลบรารีที่เชื่อถือได้แทนการเขียนเอง
ตรวจสอบการแสดงผล: ทดลองแสดงผลในคอนโซลเบราว์เซอร์หลัง Escape

⚠️ ข้อจำกัดและความเข้ากันได้

ไม่ใช่ตัว Sanitizer: ไม่ลบสคริปต์/อีเวนต์/protocol ที่ไม่ปลอดภัย ต้องใช้ร่วมกับการ Sanitization
การ Escape อย่างเดียวไม่เพียงพอ: ควรใช้ร่วมกับการ Sanitization นโยบาย Content-Security-Policy และมาตรการอื่น ๆ
ขึ้นกับบริบท: ตำแหน่งต่างกันต้องใช้รูปแบบ Escape ต่างกัน
เพื่อให้หน้าเว็บตอบสนองดี เมื่อข้อความยาวมากอาจใช้วิธีประมวลผลที่ง่ายขึ้น แนะนำให้แยกเป็นส่วน ๆ

🔒 ความเป็นส่วนตัวและความปลอดภัย

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลจะไม่ออกจากอุปกรณ์

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

การโจมตี XSS คืออะไร?

XSS คือการที่ผู้โจมตีฝังสคริปต์อันตรายลงในหน้าเว็บเพื่อขโมยข้อมูลหรือทำการกระทำที่ไม่พึงประสงค์ HTML Escaping เป็นแนวป้องกันขั้นพื้นฐานอย่างหนึ่ง

ควร Escape HTML เมื่อไร?

ควร Escape เมื่อแสดงผลอินพุตที่มาจากผู้ใช้ทุกชนิด เช่น คอมเมนต์ ข้อความ ข้อมูลฟอร์ม ฯลฯ เนื้อหาใด ๆ ที่อาจมีแท็ก HTML ควรถูก Escape

ความแตกต่างระหว่าง < และ < คืออะไร?

ทั้งสองแสดงถึง < (น้อยกว่า) เหมือนกัน < เป็น named entity; ส่วน </< เป็น numeric/hex entity ใน HTML สมัยใหม่ทั้งสองทำงานเหมือนกัน ใช้ < เพื่อให้อ่านง่าย และใช้ </< เมื่อไม่รองรับ named entity หรือเมื่อแปลงตัวอักษรตามรหัสอย่างเคร่งครัด ควรใส่เซมิคอลอนท้ายเสมอ มิฉะนั้น parser อาจต่อกับตัวอักษรถัดไป

การ Escape ป้องกัน JavaScript injection ได้ทั้งหมดหรือไม่?

ไม่ได้ HTML Escaping ใช้ได้เฉพาะใน HTML context ส่วน JavaScript CSS และ URL ต้องใช้เทคนิค Escape คนละแบบ

ทำไมบางครั้งจึงเห็น &lt; หรือการ Escape ซ้ำ?

มักเกิดจากการ Escape ซ้ำหลายครั้ง เช่น รอบแรก < ถูกแปลงเป็น &lt; แล้วรอบต่อมา & ถูก Escape เป็น &amp; ทำให้ได้ &amp;lt; ควรหลีกเลี่ยงการ Escape ซ้ำโดยไม่จำเป็น

หากต้องการอนุญาตเฉพาะบางแท็ก HTML ควรทำอย่างไร?

ควรใช้ Sanitization: กำหนด allow-list ของแท็ก/แอตทริบิวต์ที่อนุญาตและกรอง protocol ที่ปลอดภัย เช่น อนุญาตเฉพาะ p/br/ul/ol/li/a/strong/em/code/pre/blockquote/h1–h3; สำหรับ a ให้ใช้เพียง href/title/target, สำหรับ img ใช้เฉพาะ src/alt; ลบ style และ event handler ที่ขึ้นต้นด้วย on* ทั้งหมด แนะนำให้ใช้ DOMPurify หรือ sanitize-html ทำ Sanitization ที่เซิร์ฟเวอร์เมื่อเป็นไปได้ และอย่าใส่เนื้อหาที่ไม่น่าเชื่อถือผ่าน innerHTML/dangerouslySetInnerHTML ให้ใช้ textContent เมื่อแสดงข้อความล้วน