Mã hóa / Giải mã HTML Entity

HTML entities là gì

HTML entities là các chuỗi ký tự đặc biệt dùng để biểu diễn những ký tự có ý nghĩa cấu trúc trong HTML — hoặc những ký tự khó gõ trực tiếp. Trình duyệt thấy < thì hiển thị <; bạn viết & trong source code, trang web sẽ hiện &. Chúng tồn tại vì HTML dùng <, >, &, và " làm ký tự cấu trúc, nên khi bạn muốn hiển thị những ký tự này thay vì để parser xử lý, bạn cần escape chúng.

Có ba dạng entities:

• Named references — < > & " ' và hàng trăm ký hiệu khác như ©, €, —
• Decimal numeric references — < cho <, & cho &
• Hexadecimal numeric references — < cho <, & cho &

Cả ba dạng đều tương đương nhau. Named references dễ đọc hơn; numeric references hoạt động ở mọi parser kể cả khi parser đó không nhận ra tên entity.

Khi nào encoding thực sự quan trọng

Hiển thị code trong HTML

Nếu bạn đang build blog, trang docs, hay code renderer — mọi ký tự < trong ví dụ code đều phải được encode thành <, nếu không trình duyệt sẽ cố parse nó như một tag thực sự. Copy một đoạn code vào HTML mà không encode, và Chrome sẽ hiểu <script> là tag thật.

Phòng chống XSS

Tấn công XSS (cross-site scripting) thường inject <script> tags hoặc event handlers như onclick="malicious()" thông qua input của người dùng. Khi bạn entity-encode tất cả input từ user trước khi đưa vào HTML, các dấu ngoặc nhọn và nháy kép trở thành ký tự văn bản vô hại, không còn là lệnh cho parser nữa.

<!-- Nguy hiểm: input người dùng chèn thẳng vào -->
<p>Xin chào, <script>alert('XSS')</script>!</p>

<!-- An toàn: đã entity-encode -->
<p>Xin chào, &lt;script&gt;alert('XSS')&lt;/script&gt;!</p>

Trình duyệt render phiên bản thứ hai như văn bản thường — script không bao giờ chạy.

Lưu ý quan trọng: Entity encoding là đúng khi insert vào HTML context. Khi insert user data vào JavaScript string, CSS value, hay URL parameter, mỗi context cần cách escape khác nhau — entity encoding một mình không bảo vệ được những context đó.

Tránh double-encoding

Double-encoding là bug phổ biến: bạn encode & thành &, rồi encode lần nữa và ra &. Trang hiện & thay vì &. Điều này xảy ra khi:

• Template tự escape HTML, và bạn cũng gọi hàm encode trên cùng string đó
• Data được lưu vào database đã encoded sẵn, rồi được encode thêm lần nữa khi render

Cách fix: decode trước (hoặc kiểm tra xem input đã được encode chưa), rồi chỉ encode một lần duy nhất tại điểm cuối khi insert vào HTML.

Named vs numeric references: chọn cái nào

Dùng named references cho file HTML do người viết tay — © và — dễ đọc hơn nhiều so với © và —. Named references đã được chuẩn hóa trong HTML5 và được hỗ trợ rộng rãi.

Dùng numeric references khi:

• Generate HTML bằng code và không muốn maintain bảng lookup tên entity
• Ký tự không có named reference (hầu hết Unicode code points trên HTML4 đều không có)
• Làm việc với XML, nơi chỉ có < > & " ' được đảm bảo nhận dạng

Dùng hex references (&#x…) khi làm việc trực tiếp với Unicode code points. Code point U+1F600 (😀) thành 😀 ngay lập tức.

Những trường hợp KHÔNG dùng entity encoding

Entity encoding chỉ dành cho HTML context. Dùng ở chỗ khác sẽ gây lỗi:

• URL parameters — dùng percent-encoding (%26 chứ không phải &). Đặt & trong URL sẽ ra chuỗi literal & trong query string.
• JavaScript strings — dùng \', \" hoặc template literals. " trong JS string là bốn ký tự ", không phải dấu nháy.
• CSS values — CSS dùng \003C kiểu Unicode escape, không phải <.
• JSON — JSON dùng \" cho nháy kép trong string; HTML entities vô nghĩa ở đây.

Thư viện he

Tool này sử dụng he (HTML entities) của Mathias Bynens. Library này cover đầy đủ danh sách HTML5 named character references (hơn 2000 entries), xử lý cả ba dạng entity, và đúng về những edge cases mà các encoder tự viết hay bỏ sót — như dấu chấm phẩy có thể bỏ qua với một số legacy named references. Toàn bộ xử lý chạy trong browser; không có gì gửi ra ngoài.

Ví dụ thực tế

Encode đoạn code để đưa vào HTML:

Input: if (a < b && c > d) { return "<br>"; } Encoded: if (a < b && c > d) { return "<br>"; }

Decode một entity string:

Input: <script>alert("hello")</script> Decoded: <script>alert("hello")</script>

Numeric reference:

Input: 💻 → 💻 (U+1F4BB, PERSONAL COMPUTER)

Bảo mật và privacy

Toàn bộ encoding và decoding chạy cục bộ trong browser. Input của bạn không bao giờ được gửi lên server. Library he là MIT-licensed và có thể audit trên GitHub.

Sự khác nhau giữa &lt;, <, và < là gì?

Cả ba đều biểu diễn cùng một ký tự: <. < là named reference (dễ đọc nhất), < là decimal numeric reference, và < là hexadecimal numeric reference. Trình duyệt xử lý cả ba như nhau. Named references phù hợp cho HTML viết tay; numeric và hex thường xuất hiện trong HTML được generate bằng code vì chúng map trực tiếp từ Unicode code point mà không cần bảng lookup.

HTML entity encoding có phòng được XSS không?

Phòng được XSS trong HTML text content context — nếu bạn insert user input giữa các tag, encode <, >, &, và " làm cho markup bị inject trở thành văn bản vô hại. Nhưng đây không phải giải pháp XSS toàn diện. Khi insert user data vào JavaScript string, href attribute, CSS value, hay URL parameter, mỗi context cần cách escape riêng. Entity encoding dùng sai context hoặc không làm gì, hoặc làm hỏng output.

Double-encoding như &amp;amp; xuất hiện trên trang là do đâu?

Double-encoding xảy ra khi một string bị entity-encode nhiều hơn một lần. & thành &, rồi encode lại thành &. Trang sẽ hiện & thay vì &. Cách fix: decode trước để kiểm tra xem input đã encoded chưa, rồi chỉ encode một lần duy nhất tại điểm insert vào HTML — không encode lúc lưu vào database rồi lại encode thêm lần nữa khi render.

Tại sao tôi cần tự encode khi template engine đã auto-escape?

Hầu hết template engine (React JSX, Jinja2, Handlebars, Blade) đã auto-escape theo mặc định. Bạn cần encode thủ công khi: dùng dangerouslySetInnerHTML, v-html, innerHTML, hay bất kỳ API raw-HTML nào; generate HTML string bên ngoài template engine; viết HTML tĩnh bằng tay; hoặc sanitize nội dung từ rich-text editor.

Có thể dùng HTML entities trong URL không?

Không. URL dùng percent-encoding, không phải HTML entities. https://example.com/?q=a&b=c — ký tự & ở đây là URL delimiter, và phải là %26 nếu là data thực. Đặt & trong URL, trình duyệt hiểu là chuỗi bốn ký tự &, không phải &. Dùng URL encoding cho query strings và HTML encoding cho HTML attributes — chúng xếp chồng lên nhau, không thay thế cho nhau.

Input của tôi có được gửi lên server không?

Không. Tất cả encode và decode chạy trong browser dùng library he. Không có gì được truyền đi. Bạn có thể verify bằng cách mở network tab trong khi dùng tool — không có request nào được gửi ra.

Tool này encode những ký tự nào?

Mặc định encode năm ký tự có ý nghĩa cấu trúc trong HTML: &, <, >, ", '. Với tùy chọn "encode all non-ASCII", mọi ký tự ngoài ASCII range (code points > 127) cũng được emit dưới dạng numeric reference — hữu ích khi cần output thuần ASCII, ví dụ embed HTML vào hệ thống không xử lý UTF-8 tốt.

Tại sao một số named entities không cần dấu chấm phẩy?

HTML cũ (trước HTML5) cho phép một số named references không cần dấu chấm phẩy — &amp đôi khi được chấp nhận cùng với &. Parser hiện đại vẫn chấp nhận để tương thích ngược, nhưng về mặt kỹ thuật đây là malformed. Luôn bao gồm dấu chấm phẩy trong code mới; library he decode cả hai dạng nhưng luôn emit dạng đúng có dấu chấm phẩy.