HTML Escaping คืออะไร?

HTML escaping คือกระบวนการแทนที่อักขระที่มีความหมายพิเศษใน HTML ด้วย entity reference ที่สอดคล้องกัน อักขระ 5 ตัวที่ต้องถูก escape ได้แก่ เครื่องหมาย ampersand (&), เครื่องหมาย less-than (<), เครื่องหมาย greater-than (>), เครื่องหมายคำพูดคู่ (") และเครื่องหมายคำพูดเดี่ยว (') หากไม่มีการ escape เบราว์เซอร์จะตีความอักขระเหล่านั้นเป็นคำสั่ง markup แทนที่จะเป็นข้อความที่แสดงผล ซึ่งทำให้การแสดงผลหน้าเว็บเสียหายและเปิดช่องโหว่ให้กับการโจมตีแบบ injection

HTML specification (ดูแลโดย WHATWG) กำหนดรูปแบบ character reference ไว้ 2 แบบ ได้แก่ named entity เช่น & และ numeric entity เช่น & หรือ & Named entity อ่านง่ายกว่าในซอร์สโค้ด ส่วน numeric entity (ทั้งแบบทศนิยมและเลขฐานสิบหก) สามารถแทน Unicode code point ใดก็ได้ จึงมีประโยชน์สำหรับอักขระที่ไม่มีชื่อ entity ทั้งสองรูปแบบให้ผลลัพธ์เหมือนกันในเบราว์เซอร์

Unescaping (หรือที่เรียกว่า decoding) คือการดำเนินการย้อนกลับ: แปลง entity reference กลับเป็นอักขระตัวจริง ใช้บ่อยเมื่อดึงข้อความจากซอร์ส HTML, ย้ายเนื้อหาระหว่างระบบ หรือแก้ไข template ที่ encode entity ซ้ำ เครื่องมือนี้รองรับทั้งสองทิศทางในเบราว์เซอร์ คุณจึงสามารถตรวจสอบ logic การ escape หรือกู้คืนข้อความธรรมดาจากซอร์ส HTML ได้ในไม่กี่วินาที

ทำไมต้องใช้เครื่องมือ HTML Escape?

การแทนที่เครื่องหมาย angle bracket และ ampersand ด้วยมือในข้อความจำนวนมากเป็นงานที่น่าเบื่อและเกิดข้อผิดพลาดได้ง่าย เครื่องมือเฉพาะทางนี้แปลงข้อมูลของคุณได้ในขั้นตอนเดียวโดยไม่ต้องติดตั้งอะไร

⚡

แปลงได้ทันที

วางข้อความหรือ HTML แล้วรับผลลัพธ์ที่ escape หรือ unescape แล้วได้ทันที ไม่ต้องรอ round trip ไปเซิร์ฟเวอร์เพราะการประมวลผลทั้งหมดทำงานในเครื่องด้วย JavaScript

🔒

ประมวลผลโดยให้ความสำคัญกับความเป็นส่วนตัว

ข้อมูลที่คุณป้อนไม่เคยออกจากเบราว์เซอร์ ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์หรือเก็บไว้ที่ใด คุณจึง escape markup ที่มี credential, API key หรือโค้ดภายในได้อย่างปลอดภัย

📋

ไม่ต้องสมัครหรือติดตั้ง

เปิดหน้าเว็บแล้วเริ่มวางข้อความได้เลย ไม่มีหน้า login, ไม่มีการยืนยัน email และไม่มีซอฟต์แวร์ให้ติดตั้ง รองรับทุกอุปกรณ์ที่มีเบราว์เซอร์สมัยใหม่

🌐

รองรับ entity ครบถ้วน

รองรับอักขระพิเศษ HTML บังคับทั้ง 5 ตัว รวมถึง numeric entity (ทั้งแบบทศนิยมและเลขฐานสิบหก) รองรับการแปลงแบบ round-trip: escape แล้ว unescape คืนค่าสตริงต้นฉบับ

กรณีการใช้งาน HTML Escape

นักพัฒนา Frontend: แสดงผลข้อมูลจากผู้ใช้

เมื่อแสดงข้อความที่ผู้ใช้ส่งมาภายในหน้าเว็บ ให้ escape ก่อนเสมอเพื่อป้องกันเบราว์เซอร์ไม่ให้ตีความเป็นแท็ก HTML นี่คือการป้องกันหลักต่อการโจมตี stored XSS ใน template ที่แสดงผล string ดิบ

วิศวกร Backend: สร้าง HTML response

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

DevOps: ฝัง config ใน HTML

JSON inline หรือคำสั่ง shell ภายในหน้า HTML (เช่น ใน script tag หรือ data attribute) ต้องการการ escape ตรวจสอบว่า angle bracket และ ampersand ใน config snippet ของคุณถูก encode อย่างถูกต้อง

วิศวกร QA: ทดสอบ XSS vector

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

นักเขียนเชิงเทคนิค: ตัวอย่างโค้ดในเอกสาร

การเผยแพร่ code snippet ในเอกสาร HTML-based (Jekyll, Hugo, CMS ที่กำหนดเอง) ต้องการการ escape angle bracket สำหรับ generic type syntax และ template placeholder วาง code sample ของคุณแล้วทุกอักขระพิเศษจะถูก encode ทันที

นักเรียน: ทำความเข้าใจ HTML entity

พิมพ์หรือวางอักขระใดก็ได้แล้วดูรูปแบบ named entity และ numeric entity ทดลองกับกรณีพิเศษเช่น non-breaking space, em dash และสัญลักษณ์ Unicode เพื่อทำความเข้าใจวิธีการ encode อักขระ HTML

ตารางอ้างอิง HTML Entity

ตารางด้านล่างแสดง HTML entity ที่ใช้บ่อย อักขระพิเศษ 5 ตัว (& < > " ') ต้องถูก escape เสมอในเนื้อหา HTML และค่าแอตทริบิวต์ Entity อื่นๆ เป็นตัวเลือกเสริมแต่มีประโยชน์สำหรับอักขระที่พิมพ์ยากหรือคลุมเครือในซอร์สโค้ด

อักขระ	คำอธิบาย	Named entity	Numeric entity
&	Ampersand	&	&
<	Less-than sign	<	<
>	Greater-than sign	>	>
"	Double quote	"	"
'	Single quote / apostrophe	'	'
	Non-breaking space
©	Copyright sign	©	©
®	Registered sign	®	®
—	Em dash	—	—
’	Right single quote	’	’
€	Euro sign	€	€

Escape กับ Unescape: เมื่อไหรควรใช้แต่ละแบบ

ทั้งสองการดำเนินการเป็นส่วนกลับของกัน การเลือกทิศทางผิดจะให้ผลลัพธ์ที่ encode ซ้ำหรือไม่ได้รับการป้องกัน

Escape (encode)

ใช้เมื่อนำข้อความที่ไม่น่าไว้วางใจหรือข้อความแบบไดนามิกไปใส่ใน HTML แปลง < ตัวจริงเป็น < เพื่อให้เบราว์เซอร์แสดงอักขระแทนที่จะเริ่มแท็ก ใช้ก่อนแสดงผล input จากผู้ใช้, log entry หรือ string ใดก็ตามที่อาจมี markup

Unescape (decode)

ใช้เมื่อดึงข้อความธรรมดาจากซอร์ส HTML แปลง < กลับเป็น < ใช้เมื่อย้ายเนื้อหาจาก CMS, แยกวิเคราะห์ HTML ที่ scrape มา หรือแก้ไข string ที่ encode ซ้ำ เช่น &amp; ที่แสดงชื่อ entity แทนที่จะเป็นอักขระ

ตัวอย่างโค้ด

ด้านล่างคือตัวอย่างที่ใช้งานได้จริงสำหรับการ escape และ unescape HTML ใน 4 ภาษา แต่ละตัวอย่างครอบคลุมทั้งสองทิศทางและจัดการกรณีพิเศษเช่น เครื่องหมายคำพูดซ้อนและ numeric entity

JavaScript (browser / Node.js)

// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"

Python

import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'

package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}

PHP

<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

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

HTML escaping ต่างจาก URL encoding อย่างไร?

HTML escaping แทนที่อักขระที่พิเศษใน HTML (< > & " ') ด้วย entity reference เช่น < เพื่อให้แสดงผลเป็นข้อความ URL encoding (percent-encoding) แทนที่อักขระที่ไม่ปลอดภัยใน URL ด้วยลำดับ %XX แบบเลขฐานสิบหก ทั้งสองป้องกัน context ที่ต่างกัน: HTML escaping ป้องกันการ inject markup ส่วน URL encoding รับประกัน query string และ path segment ที่ถูกต้อง

อักขระใดบ้างที่ต้องถูก escape ใน HTML?

อักขระ 5 ตัวที่ต้อง escape เสมอ ได้แก่ & (ampersand), < (less-than), > (greater-than), " (เครื่องหมายคำพูดคู่ภายใน attribute) และ ' (เครื่องหมายคำพูดเดี่ยวภายใน attribute) หากไม่ escape อักขระใดก็ตาม อาจทำให้การแสดงผลเสียหายหรือเกิดช่องโหว่ cross-site scripting

' ใช้ได้ใน HTML5 หรือไม่?

ใช้ได้ ' ถูกกำหนดไว้ใน HTML5 specification และรองรับโดยเบราว์เซอร์สมัยใหม่ทุกตัว แต่ไม่ได้เป็นส่วนหนึ่งของ HTML 4 ซึ่งรู้จักเฉพาะ &, <, > และ " เท่านั้น หากต้องการรองรับ HTML 4 parser รุ่นเก่ามาก ให้ใช้รูปแบบ numeric ' แทน

วิธีแก้ไข HTML entity ที่ encode ซ้ำ เช่น &amp; ทำอย่างไร?

การ encode ซ้ำเกิดขึ้นเมื่อ string ที่ escape แล้วผ่านฟังก์ชัน escape อีกครั้ง วิธีแก้คือ unescape จนกว่าผลลัพธ์จะคงที่ วาง string ที่ encode ซ้ำลงในเครื่องมือนี้ในโหมด unescape แล้วรันซ้ำหาก & reference ยังคงอยู่ เพื่อป้องกันการ encode ซ้ำ ให้ตรวจสอบว่า input ถูก escape แล้วหรือยังก่อนนำไปใช้ฟังก์ชัน escape

ใช้ HTML entity ภายใน JavaScript string ได้หรือไม่?

HTML entity ถูกตีความโดย HTML parser ไม่ใช่ JavaScript engine ภายใน script block โค้ดทำงานหลังจาก HTML parser ประมวลผลหน้าแล้ว ดังนั้น < ใน script block จะกลายเป็น < ก่อนที่ JavaScript จะเห็นมัน สำหรับ inline event handler (onclick เป็นต้น) ค่าแอตทริบิวต์จะถูก HTML-decode ก่อนแล้วจึงประมวลผลเป็น JavaScript ใน .js file ภายนอก entity ไม่มีความหมายพิเศษและถูกตีความเป็นข้อความตัวจริง

htmlspecialchars กับ htmlentities ใน PHP ต่างกันอย่างไร?

htmlspecialchars() escape เฉพาะอักขระพิเศษ 5 ตัว (& < > " ') ที่ส่งผลต่อโครงสร้าง HTML ส่วน htmlentities() escape ทั้ง 5 ตัวนั้นรวมถึงอักขระทุกตัวที่มี named HTML entity เช่น เครื่องหมายลิขสิทธิ์และอักษรเน้น สำหรับวัตถุประสงค์ด้านความปลอดภัย htmlspecialchars() ร่วมกับ ENT_QUOTES เพียงพอแล้ว htmlentities() มีประโยชน์เมื่อต้องการผลลัพธ์ ASCII-safe สำหรับระบบที่ไม่รองรับ UTF-8

HTML escaping เพียงพอที่จะป้องกัน XSS หรือไม่?

HTML escaping ป้องกัน XSS ในกรณีที่พบบ่อยที่สุด: การนำข้อความที่ไม่น่าไว้วางใจไปใส่ในเนื้อหา HTML element หรือค่าแอตทริบิวต์ แต่ไม่ป้องกัน injection context อื่นๆ การนำข้อมูลผู้ใช้ไปใส่ใน script block ต้องการ JavaScript string escaping การใส่ใน style attribute ต้องการ CSS escaping การใส่ใน URL attribute (href, src) ต้องการการตรวจสอบ URL บวกกับการ encode การป้องกัน XSS ที่สมบูรณ์ต้องใช้การ escape ที่เหมาะสมกับ context ทุกจุดที่มีการนำข้อมูลไปใส่

Escape / Unescape HTML