HTML Escape / Unescape

HTML Escaping là gì?

HTML escaping là quá trình thay thế các ký tự có ý nghĩa đặc biệt trong HTML bằng các entity reference tương ứng. Năm ký tự bắt buộc phải escape là: dấu và (&), dấu nhỏ hơn (<), dấu lớn hơn (>), dấu nháy kép ("), và dấu nháy đơn ('). Nếu không escape, trình duyệt sẽ hiểu các ký tự này là chỉ thị markup thay vì văn bản hiển thị, gây vỡ trang và tạo lỗ hổng cho các cuộc tấn công injection.

Đặc tả HTML (do WHATWG duy trì) định nghĩa hai dạng character reference: named entity như &amp; và numeric entity như &#38; hoặc &#x26;. Named entity dễ đọc hơn trong mã nguồn. Numeric entity (thập phân hoặc thập lục phân) có thể biểu diễn bất kỳ code point Unicode nào, hữu ích cho các ký tự không có named alias. Cả hai dạng đều tạo ra kết quả giống nhau trên trình duyệt.

Unescaping (hay còn gọi là decoding) là thao tác ngược lại: chuyển đổi các entity reference trở về ký tự gốc. Điều này thường gặp khi trích xuất văn bản từ mã nguồn HTML, di chuyển nội dung giữa các hệ thống, hoặc gỡ lỗi các template bị double-encode entity. Công cụ này xử lý cả hai chiều trong trình duyệt, giúp bạn kiểm tra logic escaping hoặc khôi phục văn bản thuần từ nguồn HTML phức tạp chỉ trong vài giây.

Tại sao dùng công cụ HTML Escape?

Việc thay thế thủ công dấu ngoặc nhọn và dấu và trong các khối văn bản lớn rất tốn thời gian và dễ sai. Một công cụ chuyên dụng thực hiện chuyển đổi toàn bộ đầu vào chỉ trong một bước, không cần cài đặt.

Các trường hợp sử dụng HTML Escape

Bảng tham chiếu HTML Entity

Bảng dưới đây liệt kê các HTML entity thường dùng. Năm ký tự đặc biệt (& < > " ') phải luôn được escape trong nội dung HTML và giá trị thuộc tính. Các entity khác là tùy chọn nhưng hữu ích cho các ký tự khó gõ hoặc mơ hồ trong mã nguồn.

Escaping và Unescaping: Khi nào dùng cái nào?

Hai thao tác này là nghịch đảo của nhau. Chọn sai chiều sẽ tạo ra kết quả double-encoded hoặc không được bảo vệ.

Ví dụ mã

Dưới đây là các ví dụ về HTML escaping và unescaping trong bốn ngôn ngữ. Mỗi đoạn code đề cập cả hai chiều và xử lý các trường hợp biên như nháy kép lồng nhau và numeric entity.

// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .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>"

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
// 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>

Câu hỏi thường gặp