Hướng Dẫn Đầy Đủ Về HTML Entity
HTML entity là một trong những khía cạnh cơ bản nhất nhưng thường bị hiểu sai nhất trong phát triển web. Chúng là cơ chế cho phép trình duyệt hiển thị các ký tự mà nếu không sẽ bị hiểu là HTML markup, và đóng vai trò quan trọng trong bảo mật web. Cho dù bạn đang mã hóa ký tự đặc biệt để ngăn chặn tấn công cross-site scripting, hiển thị ký hiệu toán học, hay đảm bảo nội dung hiển thị chính xác trên các bảng mã khác nhau, hiểu HTML entity là điều cần thiết cho mọi nhà phát triển web.
HTML Entity Là Gì?
HTML entity là chuỗi ký tự đại diện cho một ký tự đơn trong HTML. Entity bắt đầu bằng dấu & và kết thúc bằng dấu chấm phẩy (;). Khi trình duyệt gặp entity, nó sẽ thay thế entity bằng ký tự tương ứng trong quá trình hiển thị. Cơ chế này cho phép bạn bao gồm các ký tự mà nếu không sẽ không thể hoặc có vấn đề trong HTML.
<) bắt đầu một thẻ, dấu lớn hơn (>) kết thúc một thẻ, dấu & bắt đầu một tham chiếu entity. Nếu bạn muốn hiển thị các ký tự này dưới dạng nội dung hiển thị thay vì markup, bạn phải mã hóa chúng thành entity.
Các HTML Entity Phổ Biến
Mặc dù HTML định nghĩa hơn 2.000 entity đặt tên, nhưng chỉ một số ít được sử dụng thường xuyên trong phát triển web hàng ngày. Đây là những entity bạn sẽ gặp và sử dụng nhiều nhất:
Năm Entity Bắt Buộc
| Ký Tự | Entity Đặt Tên | Entity Thập Phân | Entity Thập Lục Phân | Cách Dùng |
|---|---|---|---|---|
| & | & | & | Phải luôn mã hóa để tránh nhập nhằng với tham chiếu entity | < |
| < | < | < | Phải mã hóa để ngăn mở thẻ HTML | > |
| > | > | > | Phải mã hóa để ngăn đóng thẻ HTML | " |
| " | " | " | Phải mã hóa trong giá trị thuộc tính dấu ngoặc kép | ' |
| ' | ' | Phải mã hóa trong giá trị thuộc tính dấu ngoặc đơn | Non-breaking space (ngăn ngắt dòng) | Ký hiệu bản quyền |
Entity Ký Hiệu Phổ Biến
| Ký Tự | Entity Đặt Tên | Mô Tả |
|---|---|---|
| Ký hiệu đã đăng ký | Ký hiệu thương hiệu | Dấu gạch ngang dài (em dash) |
| Dấu gạch ngang ngắn (en dash, cho phạm vi) | Dấu ngoặc kép góc trái | Dấu ngoặc kép góc phải |
| Ký tự bullet | Dấu chấm lửng ngang (ba chấm) | Registered trademark symbol |
| ™ | ™
| Trademark symbol |
| — | —
| Em dash (long dash) |
| – | –
| En dash (short dash, for ranges) |
| « | «
| Left-pointing double angle quotation mark |
| » | »
| Right-pointing double angle quotation mark |
| • | •
| Bullet character |
| … | …
| Horizontal ellipsis (three dots) |
Entity Số và Entity Đặt Tên
HTML entity có hai dạng: đặt tên và số. Hiểu sự khác biệt giúp bạn chọn entity phù hợp trong từng tình huống.
Entity Đặt Tên
< đại diện cho dấu nhỏ hơn, © đại diện cho ký hiệu bản quyền. Entity đặt tên dễ đọc và ghi nhớ hơn, làm cho mã nguồn HTML của bạn dễ bảo trì hơn. Tuy nhiên, entity đặt tên chỉ tồn tại cho một tập ký tự giới hạn — khoảng 2.000, trong khi Unicode có hơn 140.000 ký tự.
Entity Số
Entity số tham chiếu ký tự thông qua mã Unicode. Chúng có hai dạng: thập phân và thập lục phân. Entity số thập phân sử dụng định dạng &#NNN;, trong đó NNN là mã thập phân. Entity thập lục phân sử dụng định dạng &#xHHH;, trong đó HHH là mã thập lục phân. Ví dụ: ký hiệu bản quyền có thể viết là © (thập phân) hoặc © (thập lục phân).
Entity số có thể biểu diễn bất kỳ ký tự Unicode nào, làm cho chúng cần thiết cho các ký tự không có tham chiếu entity đặt tên. Nếu bạn cần hiển thị ký tự CJK hiếm, glyph chữ viết lịch sử hoặc emoji thiếu entity đặt tên, bạn phải sử dụng dạng số.
Khi Nào Sử Dụng Loại Nào
- <, >, ", ') và các ký hiệu phổ biến như ©, ®, ™. Chúng dễ đọc hơn và tự tài liệu hóa.
- Sử dụng entity số khi không có entity đặt tên cho ký tự bạn cần, hoặc khi bạn đang tạo HTML theo chương trình và cần phương pháp mã hóa nhất quán, phổ quát.
- Sử dụng entity số thập lục phân khi làm việc với mã Unicode, vì thập lục phân là cách biểu diễn tiêu chuẩn trong tài liệu và bảng ký tự Unicode.
Khi Nào Sử Dụng HTML Entity
Biết khi nào sử dụng entity cũng quan trọng như biết cách sử dụng. Đây là các tình huống chính mà entity là cần thiết hoặc có lợi:
1. Hiển Thị Ký Tự Dành Riêng
<. Nếu bạn viết < trần, trình duyệt sẽ cố gắng phân tích nó như phần đầu của thẻ HTML, điều này có thể phá vỡ bố cục trang hoặc tạo lỗ hổng bảo mật.
2. Ngăn Chặn Nhập Nhằng Dấu &
Dấu & theo sau bởi chữ cái và dấu chấm phẩy luôn được hiểu là tham chiếu entity. Nếu nội dung của bạn có dấu & không thuộc entity (ví dụ: trong "Tom & Jerry"), bạn phải mã hóa nó thành &. Dấu & không được mã hóa theo sau bởi văn bản trùng khớp với tên entity sẽ bị giải mã sai.
3. Bao Gồm Ký Tự Không Có Trên Bàn Phím
Các ký tự như dấu gạch ngang dài, ký hiệu bản quyền và toán tử toán học có thể khó nhập trên bàn phím tiêu chuẩn. Entity cung cấp cách đáng tin cậy để bao gồm các ký tự này mà không phụ thuộc vào phương thức nhập của trình soạn thảo hoặc bản đồ ký tự.
4. Non-Breaking Space
Entity tạo ra non-breaking space, ngăn trình duyệt ngắt dòng tại vị trí đó. Điều này quan trọng để giữ các từ liên quan trên cùng một dòng, như "10 kg", "Chương 3" hoặc tên thương hiệu không nên bị ngắt dòng.
Tác Động Bảo Mật: Phòng Chống XSS
Mã hóa HTML entity là một trong những tuyến phòng thủ quan trọng nhất chống lại tấn công Cross-Site Scripting (XSS). XSS xảy ra khi kẻ tấn công có thể tiêm mã thực thi vào trang web mà người dùng khác xem. Mã hóa entity ngăn chặn điều này bằng cách chuyển đổi các ký tự nguy hiểm thành dạng entity an toàn tương đương.
Mã Hóa Entity Ngăn Chặn XSS Như Thế Nào
và trang hiển thị không mã hóa, trình duyệt sẽ thực thi script đó. Tuy nhiên, nếu đầu ra được mã hóa entity, nó trở thành <script>alert('xss')</script>, trình duyệt hiển thị nó dưới dạng văn bản theo nghĩa đen thay vì thực thi code.
Quy Tắc Mã Hóa Theo Ngữ Cảnh Cụ Thể
Mã hóa entity hoạt động trong ngữ cảnh nội dung HTML và thuộc tính, nhưng các ngữ cảnh khác nhau yêu cầu chiến lược mã hóa khác nhau:
- <, >, & thành entity. Điều này ngăn chặn việc tiêm thẻ HTML mới.
- <, >, &, ", ' thành entity. Dấu ngoặc kép phải được mã hóa để ngăn thoát khỏi giá trị thuộc tính.