Tại sao cần mã hóa HTML entity?

Mã hóa HTML chuyển đổi các ký tự đặc biệt thành mã tham chiếu để trình duyệt hiển thị chúng như văn bản thay vì xử lý như cú pháp HTML. Điều này ngăn chặn lỗ hổng XSS và lỗi hiển thị khi render nội dung người dùng.

Những ký tự nào phải mã hóa trong HTML?

Năm ký tự bắt buộc phải mã hóa: & thành &, thành >, dấu ngoặc kép thành ", và dấu ngoặc đơn thành '. Đây là các ký tự có ý nghĩa đặc biệt trong cú pháp HTML.

Sự khác nhau giữa named, numeric và hex entity là gì?

Named entity dùng mã dễ đọc như &. Numeric dùng mã Unicode thập phân như &. Hex dùng hệ thập lục phân như &. Tất cả cho kết quả giống nhau — named dễ đọc nhất.

Mã hóa HTML ngăn chặn XSS như thế nào?

Tấn công XSS hoạt động bằng cách chèn thẻ script qua dữ liệu người dùng. Mã hóa HTML chuyển ngoặc nhọn thành văn bản vô hại, trình duyệt hiển thị chúng thay vì thực thi như mã.

React, Vue, Angular có tự động mã hóa không?

Có, các framework hiện đại tự động mã hóa biểu thức template. Nguy hiểm khi dùng các lối thoát như dangerouslySetInnerHTML (React), v-html (Vue), hoặc bypassSecurityTrustHtml (Angular).

Có thể giải mã cả named và numeric entity không?

Có. Công cụ giải mã tất cả loại entity: named (&), numeric thập phân (&), và thập lục phân (&). Sử dụng trình phân tích HTML của trình duyệt để đảm bảo chính xác.

html_encoder.ts

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

Dán văn bản → Mã hóa hoặc Giải mã → Sao chép kết quả. Ngăn chặn XSS, hiển thị mã HTML an toàn.

Tức thìMiễn phíBảo mậtKhông cần đăng ký

CÔNG CỤ MÃ HÓA

html — entity encoder & decoder

ĐẦU VÀO

0 ký tự

KẾT QUẢ

0 ký tự

Bảng tham chiếu HTML Entity

Các entity HTML phổ biến và mã tương ứng

CharNamedNumeric

&&&

<<<

>>>

"""

'''

␣  

©©©

®®®

™™™

€€€

Đoạn code mẫu

Cách mã hóa/giải mã HTML entity trong các ngôn ngữ

// HTML encode — escape special characters function htmlEncode(str) { const div = document.createElement('div'); div.appendChild(document.createTextNode(str)); return div.innerHTML; } // Or manually: function htmlEscape(str) { return str .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } htmlEscape('<script>alert("XSS")</script>'); // "<script>alert("XSS")</script>"

Mẫu phổ biến

Nhấp để tải ví dụ vào ô nhập

Hướng dẫn chi tiết

Mã hóa HTML Entity là gì?

Mã hóa HTML entity là quá trình chuyển đổi các ký tự đặc biệt trong HTML thành các mã tham chiếu tương ứng, đảm bảo chúng được hiển thị đúng trên trang web thay vì bị trình duyệt hiểu nhầm là cú pháp HTML. Ví dụ, ký tự < sẽ được chuyển thành < để trình duyệt hiển thị dấu nhỏ hơn thay vì bắt đầu một thẻ HTML mới.

Đây là một kỹ thuật cơ bản trong phát triển web, đặc biệt quan trọng cho việc ngăn chặn tấn công Cross-Site Scripting (XSS) — một trong những lỗ hổng bảo mật phổ biến nhất trên web. Khi dữ liệu người dùng được hiển thị trực tiếp mà không được mã hóa, kẻ tấn công có thể chèn mã JavaScript độc hại vào trang, đánh cắp cookie phiên, dữ liệu người dùng hoặc chuyển hướng đến trang lừa đảo.

Cách mã hóa HTML hoạt động

Quá trình mã hóa HTML rất đơn giản: mỗi ký tự đặc biệt được thay thế bằng một “entity reference” bắt đầu bằng & và kết thúc bằng ;. Có ba loại entity:

Named entity: Sử dụng tên dễ nhớ, ví dụ & cho &, < cho <, © cho ©
Numeric entity (thập phân): Sử dụng mã Unicode dạng số, ví dụ & cho &, © cho ©
Hex entity: Tương tự numeric nhưng dùng hệ thập lục phân, ví dụ & cho &, © cho ©

Năm ký tự cần mã hóa bắt buộc trong HTML là: & (ampersand), < (nhỏ hơn), > (lớn hơn), " (ngoặc kép), và ' (ngoặc đơn). Nếu bạn không mã hóa năm ký tự này, trình duyệt sẽ xử lý chúng như cú pháp HTML, gây ra lỗi hiển thị hoặc lỗ hổng bảo mật.

Named vs Numeric vs Hex Entity

Loại	Cú pháp	Ví dụ	Ưu điểm
Named	`&name;`	`&` `©`	Dễ đọc, dễ nhớ. Nhược: không phải ký tự nào cũng có tên
Numeric	`&#number;`	`&` `©`	Hoạt động với mọi ký tự Unicode. Tương thích tốt với XML
Hex	`&#xHEX;`	`&` `©`	Tương tự numeric, tiện lợi khi làm việc với Unicode code point

Quy tắc chung: Dùng named entity cho 5 ký tự cơ bản (& < > " ') vì dễ đọc. Dùng numeric/hex cho ký tự đặc biệt khác hoặc khi cần tương thích XML.

Lỗi thường gặp và ngăn chặn XSS

Cross-Site Scripting (XSS) xảy ra khi ứng dụng web hiển thị dữ liệu người dùng mà không mã hóa. Kẻ tấn công có thể gửi:

Nếu trang web hiển thị chuỗi này trực tiếp, trình duyệt sẽ thực thi script và gửi cookie của nạn nhân đến server tấn công. Giải pháp: luôn mã hóa HTML mọi dữ liệu người dùng trước khi hiển thị.

Mã hóa đầu ra (Output encoding): Đây là phương pháp chính — mã hóa dữ liệu đúng ngữ cảnh (HTML, JS, URL, CSS)
Content Security Policy (CSP): Thêm header CSP để chặn inline scripts
Không dùng innerHTML: Sử dụng textContent hoặc innerText thay vì innerHTML khi chèn văn bản
Sanitize HTML: Nếu cần cho phép HTML có giới hạn, dùng thư viện như DOMPurify

Sử dụng mã hóa HTML trong code

Hầu hết các ngôn ngữ lập trình và framework hiện đại đều có hỗ trợ mã hóa HTML tích hợp sẵn:

JavaScript: Tạo một element và gán textContent, sau đó đọc innerHTML để lấy chuỗi đã mã hóa
Python: Dùng html.escape() và html.unescape() từ thư viện chuẩn
PHP: Dùng htmlspecialchars() với ENT_QUOTES | ENT_HTML5 và chỉ định UTF-8
React/Vue/Angular: Tự động mã hóa nội dung. Chỉ nguy hiểm khi dùng dangerouslySetInnerHTML (React) hoặc v-html (Vue)

Xem tab Đoạn code mẫu ở trên để lấy code mẫu sẵn dùng cho JavaScript, Python và PHP — cả mã hóa và giải mã.

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

Công cụ liên quan

Công cụ khác

Giới thiệu về Developer Tools

Công cụ developer tự động hóa các phần lặp đi lặp lại của công việc phần mềm: format JSON, encode/decode Base64, decode JWT để xác minh claim của token, tạo UUID, format XML, diff cấu hình. Đây không phải tác vụ hào nhoáng, nhưng là các điểm nghẽn ngốn 10-15 phút nhiều lần mỗi ngày — cộng lại hàng giờ mỗi tuần. Chạy chúng trên tab trình duyệt sạch sẽ hơn vật lộn với phụ thuộc CLI hay extension IDE có thể gửi dữ liệu riêng tư của bạn cho bên thứ ba.

Vì sao nó quan trọng

Công cụ developer client-side nhanh về cơ bản quan trọng vì chúng được dùng với dữ liệu nhạy cảm. JWT token chứa danh tính người dùng. Payload Base64 có thể encode API key. JSON dump bao gồm bản ghi khách hàng. Nếu một 'công cụ developer' gửi input của bạn lên server để xử lý, bạn vừa rò rỉ production secret. Công cụ dev của ZestLab chạy 100% client-side không có network call nào sau khi load page — những gì bạn paste vẫn ở trong trình duyệt.

Riêng tư và an toàn

Tất cả công cụ developer ở đây chạy trong trình duyệt bằng JavaScript thuần. Không có 'decode server' hay 'format API' — JWT, JSON, payload encode của bạn được parse bởi code chạy trên laptop của bạn. Tự xác minh bằng DevTools trình duyệt → Network tab: bạn sẽ thấy không có request nào khi dùng bất kỳ công cụ nào. Đó là tiêu chuẩn chúng tôi giữ vì công cụ dev xử lý secret.

Thực hành tốt

Không bao giờ paste JWT hay API token production vào BẤT KỲ công cụ online nào mà không xác minh chạy client-side (check tab Network)
Dùng chế độ ẩn danh trình duyệt để decode một lần các payload nhạy cảm
Bookmark công cụ bạn dùng hàng ngày — URL công cụ ZestLab ổn định, không cần tài khoản
Khi format JSON có secret để team review, redact credential trước khi share output