การเข้ารหัสและถอดรหัส HTML

HTML escaping คืออะไร?

การหลบหลีก HTML (HTML escaping) คือกระบวนการแทนที่ตัวอักษรที่มีความหมายพิเศษใน HTML ด้วยตัวอ้างอิงตัวอักษร ตัวอย่างเช่น สัญลักษณ์น้อยกว่าถูกแทนที่ด้วย < สัญลักษณ์มากกว่าถูกแทนที่ด้วย > และสัญลักษณ์แอมเพอร์แซนด์ถูกแทนที่ด้วย & กระบวนการนี้ช่วยป้องกันไม่ให้ตัวอักษรเหล่านั้นถูกตีความว่าเป็นแท็ก HTML ทำให้โค้ดต้นฉบับและข้อความที่ป้อนเข้ามาสามารถแสดงบนหน้าจอได้ตามที่เขียนไว้อย่างถูกต้อง

การยกเลิกการหลบหลีก (Unescaping) ทำในทางตรงกันข้าม: มันแปลงการอ้างอิงตัวอักษร เช่น < และ " กลับเป็นสัญลักษณ์เดิมของมัน ซึ่งมีประโยชน์ในการตรวจสอบสตริงที่ถูกหลบหลีกที่พบในบันทึก, แม่แบบ, เนื้อหา CMS, เนื้อหาอีเมล, คำตอบ API และอื่น ๆ

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

วิธีใช้

1. วาง HTML หรือรหัสอักขระที่คุณต้องการแปลงลงในช่องป้อนข้อมูล
2. เลือก "Escape HTML" หรือ "Unescape HTML"
3. เมื่อคลิก "Convert" คุณจะถูกนำไปยังส่วนผลลัพธ์โดยอัตโนมัติ
4. หากจำเป็น ให้คัดลอกผลลัพธ์หรือสลับข้อมูลเข้าและผลลัพธ์เพื่อดำเนินการแปลงกลับ

ตัวอย่างการแปล

<div class="message">Tom & Jerry</div>
↓
&lt;div class=&quot;message&quot;&gt;Tom &amp; Jerry&lt;/div&gt;

ข้อควรระวังในการใช้งาน

• การใช้การหลบหลีก (escaping) ช่วยสร้างสตริงเพื่อแสดงผล แต่ไม่สามารถแทนที่การป้องกันการฉีด SQL หรือการเข้ารหัส URL ได้
• หากใส่สตริงที่ยังไม่ผ่านการหลบหลีก (unescaped) ลงใน `innerHTML` หรือส่วนที่คล้ายกันโดยตรง อาจมีความเสี่ยงที่สคริปต์จะถูกดำเนินการ ขึ้นอยู่กับเนื้อหา
• เครื่องมือนี้ใช้เพื่อแปลงสัญลักษณ์ &, <, >, เครื่องหมายคำพูดคู่ และเครื่องหมายคำพูดเดี่ยวเป็นหลัก

คำถามที่มักถูกถาม

HTML escaping คืออะไร?

กระบวนการนี้รวมถึงการแปลงสัญลักษณ์ที่มีความหมายพิเศษใน HTML เป็นรหัสตัวอักษร เพื่อให้สามารถแสดงบนหน้าจอเป็นข้อความได้อย่างปลอดภัย

HTML unescaping คืออะไร?

กระบวนการนี้จะแปลงการอ้างอิงตัวอักษร เช่น < และ & ให้กลับเป็นตัวอักษรเดิม คือ < และ &

ข้อมูลที่ป้อนเข้าไปจะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ครับ กระบวนการแปลงข้อมูลดำเนินการทั้งหมดโดย JavaScript ภายในเบราว์เซอร์

ตัวอักษรใดจะถูกแปลง?

การแปลงนี้เน้นไปที่เครื่องหมายแอมเพอร์แซนด์ (&), เครื่องหมายน้อยกว่า (<), เครื่องหมายมากกว่า (>), เครื่องหมายคำพูดคู่ (") และเครื่องหมายคำพูดเดี่ยว (') เป็นหลัก

สามารถแสดงแท็ก HTML ได้โดยตรงบนหน้าจอได้หรือไม่?

ใช่ครับ หากใช้ผลลัพธ์ที่ผ่านการหลบหลีก (escaped) มันจะไม่ถูกตีความว่าเป็นแท็ก และจะแสดงผลเป็นสตริง

สิ่งนี้สามารถใช้เป็นมาตรการป้องกัน XSS ได้หรือไม่?

แม้ว่าจะเป็นหนึ่งในมาตรการพื้นฐานสำหรับการแสดงข้อความในเนื้อหาตัวหลักของ HTML แต่ต้องดำเนินการอย่างเหมาะสมสำหรับแต่ละจุดหมายปลายทางของการแสดงผล เช่น ค่าแอตทริบิวต์ JavaScript และ URL

สิ่งนี้ต่างจาก URL encoding อย่างไร?

การหลบหลีก HTML (HTML escaping) มุ่งเป้าไปที่ตัวอักษรพิเศษใน HTML ส่วนการเข้ารหัส URL (URL encoding) จะแปลงตัวอักษรที่ไม่สามารถใช้ใน URL ได้ให้เป็นรูปแบบที่เข้ารหัสด้วยเปอร์เซ็นต์

การแบ่งบรรทัดและช่องว่างจะถูกแปลงไปด้วยหรือไม่?

การแบ่งบรรทัดและช่องว่างตามมาตรฐานจะถูกรักษาไว้ตามเดิม โปรดปรับการแบ่งบรรทัดในหน้าแสดงผล HTML แยกต่างหากโดยใช้ CSS แท็ก `br` หรือวิธีการอื่น ๆ

จะเกิดอะไรขึ้นหากใช้การหลบหลีกสองครั้ง?

ตัวอย่างเช่น สัญลักษณ์แอมเพอร์แซนด์ < ถูกแปลงกลับเป็น < อีกครั้ง โปรดระมัดระวังอย่าแปลงมันมากกว่าที่จำเป็น

สามารถยกเลิกการแปลงได้หรือไม่?

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

คุณสามารถแปลข้อความในปริมาณมากได้หรือไม่?

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