Escape/Unescape ký tự HTML – Escape HTML entities

Escape/Unescape ký tự HTML là gì?

Escape/Unescape ký tự HTML là thao tác chuyển đổi giữa ký tự thông thường và cách biểu diễn chúng bằng tham chiếu ký tự HTML. Escape biến một số dấu có ý nghĩa trong cú pháp HTML thành chuỗi biểu diễn tương ứng; Unescape đọc các chuỗi biểu diễn đó để lấy lại ký tự. Đây là chuyển đổi biểu diễn văn bản, không phải mã hóa bảo mật bằng khóa và không giúp giữ bí mật nội dung.

Nhu cầu thường gặp là đưa một đoạn mã vào nội dung hướng dẫn mà vẫn muốn người đọc nhìn thấy các dấu tạo thẻ. Trong kiến thức nền về HTML, dấu nhỏ hơn có thể mở đầu một thẻ. Nếu được biểu diễn bằng < ở vùng văn bản HTML phù hợp, dấu này được hiển thị như ký tự thay vì mở một cấu trúc đánh dấu.

Theo mã nguồn được cung cấp, công cụ có hai chế độ: Escape thay thế tám ký tự theo bảng cố định; Unescape dùng cơ chế phân tích nội dung của một ô textarea do trình duyệt tạo ra. Kết quả của cả hai chế độ đều là chuỗi văn bản, được đưa vào ô kết quả chỉ đọc.

Công cụ giúp chuẩn bị biểu diễn để hiển thị mã hoặc đọc lại văn bản chứa entity. Nó không phải trình soạn thảo HTML, không cung cấp bản xem trước trang, cũng không kiểm tra cấu trúc HTML hợp lệ. Việc chuyển đổi hoàn tất còn khác với việc xác nhận nội dung an toàn tại nơi bạn sẽ sử dụng.

Các thuật ngữ cần hiểu khi escape HTML

HTML entity và tham chiếu ký tự

Tham chiếu ký tự là cách viết một ký tự bằng cú pháp được HTML nhận biết, chẳng hạn < biểu diễn dấu nhỏ hơn. Cách gọi “HTML entity” thường được dùng rộng cho cả tham chiếu theo tên và tham chiếu số. Điểm quan trọng là phân biệt chuỗi đang nhìn thấy với ký tự sau khi diễn giải: văn bản chứa < không giống văn bản chứa trực tiếp dấu <, dù chúng có thể cho cùng hình thức hiển thị trong ngữ cảnh HTML thích hợp.

Escape và Unescape

Escape chuyển ký tự sang dạng biểu diễn phù hợp với một ngữ cảnh; Unescape diễn giải dạng biểu diễn để lấy ký tự. Trong công cụ này, ngữ cảnh được nhắm tới là tham chiếu HTML, không phải mọi loại chuỗi. Dù giao diện dùng nhãn “mã hóa” và “giải mã”, không nên nhầm với encryption: không có khóa bí mật hay bước bảo vệ tính bí mật. Người biết quy tắc tham chiếu HTML có thể đọc lại nội dung đã Escape.

Tham chiếu ký tự số

Tham chiếu ký tự số dùng mã số để biểu diễn ký tự, với dạng thập phân hoặc thập lục phân. Ví dụ, ' biểu diễn dấu nháy đơn, còn / biểu diễn dấu gạch chéo xuôi. Bảng Escape của công cụ phối hợp tham chiếu theo tên với tham chiếu số. Vì thế, thấy chữ x hay một dãy số trong kết quả không có nghĩa là dữ liệu bị hỏng; đó chỉ là một cách viết ký tự theo cú pháp HTML.

Double escaping

Double escaping là Escape thêm một lần đối với chuỗi đã được Escape. Dấu & mở đầu entity hiện có cũng bị chuyển đổi, tạo thêm một lớp biểu diễn. Chẳng hạn, < trở thành <. Hiện tượng này ảnh hưởng đến số lượt diễn giải cần thiết và cách hiển thị tại nơi nhận. Nó không tự động là lỗi: đôi khi bạn muốn trình bày nguyên văn tên entity, nhưng sẽ gây khó hiểu nếu mục tiêu là hiển thị dấu nhỏ hơn.

XSS và ngữ cảnh đầu ra

XSS là nguy cơ dữ liệu không đáng tin cậy bị trình duyệt diễn giải thành mã hoạt động. Ngữ cảnh đầu ra là vị trí dữ liệu được đưa vào, như vùng văn bản HTML, thuộc tính, JavaScript hoặc URL. Đây là kiến thức nền để hiểu phạm vi của Escape, không phải chức năng kiểm tra của công cụ. Một chuỗi phù hợp cho vùng văn bản HTML không mặc nhiên phù hợp cho đoạn script hoặc địa chỉ liên kết; an toàn phải được đánh giá theo nơi sử dụng.

Đầu vào, đầu ra và cách đọc kết quả

Dữ liệu có thể đưa vào

Đầu vào gồm một chuỗi văn bản và lựa chọn Escape hoặc Unescape; không có đơn vị đo. Chuỗi có thể là câu thông thường, đoạn HTML ngắn hoặc nội dung chứa tham chiếu ký tự. Không cần cung cấp một tài liệu HTML hoàn chỉnh, vì mã nguồn không có bước kiểm tra cấu trúc tài liệu trước khi chuyển đổi.

Với Escape, dữ liệu phù hợp là chuỗi có các dấu bạn muốn biểu diễn bằng tham chiếu HTML. Với Unescape, đầu vào thường là văn bản chứa entity cần đọc lại. Việc chọn chế độ quyết định cách xử lý, chứ công cụ không tự đoán mục đích từ nội dung. Khi đổi chế độ, đầu vào đang có được xử lý lại.

Chuỗi rỗng được xử lý riêng: kết quả bị xóa và trạng thái chuyển sang chờ nhập liệu. Chuỗi chỉ có khoảng trắng không phải chuỗi rỗng nên vẫn đi qua nhánh chuyển đổi thông thường. Mã được cung cấp không đặt giới hạn số ký tự, nhưng điều đó không chứng minh khả năng xử lý dung lượng không giới hạn.

Ý nghĩa của kết quả và trạng thái

Ô kết quả chỉ đọc chứa chuỗi sau chuyển đổi, không phải bản xem trước HTML. Nhãn “đã mã hóa” hoặc “đã giải mã” phản ánh nhánh xử lý đã thực hiện; nó không chứng nhận HTML hợp lệ, không đánh giá nguồn dữ liệu và không bảo đảm an toàn khi chèn vào trang khác.

Sao chép ghi nội dung kết quả vào clipboard nếu trình duyệt cho phép. Hoán đổi có ý nghĩa khác với việc chỉ đổi chỗ hai ô: nó lấy kết quả hiện tại làm đầu vào mới, đảo chế độ rồi tính lại. Khi kết quả rỗng, sao chép và hoán đổi không thực hiện. Chức năng xóa làm trống đầu vào cùng kết quả, đưa con trỏ về ô nhập để tiếp tục làm việc.

Quy tắc chuyển đổi Escape và Unescape

Tám ký tự được Escape thay thế

Escape dùng bảng cố định dưới đây. Các biểu diễn ở cột phải là chuỗi kết quả, không phải ký tự đã được trình duyệt diễn giải.

Phép thay thế xét từng ký tự phù hợp trong đầu vào một lượt. Ký tự ngoài bảng, chẳng hạn chữ tiếng Việt, không bị thay bởi quy tắc này. Dấu & mới sinh ra trong biểu diễn thay thế không bị quét lại ngay trong cùng lượt. Vì vậy, một dấu nhỏ hơn cho ra <, không lập tức thành nhiều lớp entity.

Unescape diễn giải tham chiếu HTML như thế nào

Unescape không dùng một bảng đảo chỉ gồm tám mục. Công cụ đưa chuỗi vào nội dung của một textarea được tạo trong trình duyệt rồi lấy giá trị văn bản của nó. Việc nhận biết tham chiếu ký tự do bộ phân tích HTML của trình duyệt thực hiện trong ngữ cảnh đó.

Cơ chế này có thể diễn giải những tham chiếu thông dụng ngoài bảng Escape, như tham chiếu ký tự bản quyền. Tuy nhiên, không nên từ đó khẳng định mọi chuỗi sai cú pháp đều được sửa đúng ý người nhập. Chuỗi bất thường vẫn chịu quy tắc phân tích của trình duyệt, thay vì một quy tắc khôi phục nguyên văn do công cụ tự đặt ra.

Một lượt chuyển đổi và nhiều lớp escape

Escape không nhận biết entity có sẵn để bỏ qua: dấu & trong entity vẫn thuộc bảng thay thế. Unescape cũng không tự lặp đến khi hết mọi lớp. Một lần diễn giải < cho ra <; phần vừa sinh ra không tiếp tục trở thành dấu nhỏ hơn trong cùng lượt.

Kết quả được cập nhật khi nội dung đầu vào thay đổi hoặc khi chuyển chế độ. Đổi chế độ chỉ xử lý lại chuỗi đang nhập; muốn xử lý kết quả cũ thì phải dùng nó làm đầu vào mới. Không có công thức số học, quy tắc làm tròn hay kiểm tra “đã giải hết” trong logic này.

Ví dụ chuyển đổi và cách hiểu từng kết quả

Hiển thị đoạn HTML dưới dạng văn bản

Các ví dụ sau được suy ra từ bảng thay thế và quy tắc diễn giải tham chiếu thông dụng của trình duyệt, không phải báo cáo đã chạy thử. Tất cả dùng chuỗi minh họa, không có đơn vị đo hoặc dữ liệu thật. Giả sử chọn Escape với đầu vào:

<p>Chào & bạn</p>

Kết quả theo bảng là:

<p>Chào & bạn</p>

Dấu tạo thẻ và dấu nối giữa hai phần lời chào đổi sang tham chiếu HTML. Dấu gạch chéo trong thẻ đóng cũng đổi vì nó thuộc tập tám ký tự, không phải vì công cụ phân tích đó là thẻ đóng. Chữ “Chào”, “bạn” và khoảng trắng giữ nguyên. Mục đích là chuẩn bị biểu diễn của đoạn mã, không tạo một đoạn văn được định dạng bởi thẻ.

Chuỗi có thuộc tính và dấu nháy

Giả sử đầu vào ở chế độ Escape là đoạn mở thẻ sau, không cần bổ sung thẻ đóng:

<a title="O'Reilly">

Kết quả tương ứng:

<a title="O'Reilly">

Ở đây, dấu bằng, hai dấu nháy kép và dấu nháy đơn đều được thay theo bảng. Các chữ trong tên thẻ, tên thuộc tính và nội dung vẫn giữ nguyên. Kết quả không chứng minh thuộc tính hợp lệ, cũng không xác nhận đoạn này đã đủ cấu trúc. Ví dụ chỉ cho thấy cùng một phép thay ký tự được áp dụng bất kể vị trí của dấu trong chuỗi.

Đọc entity và nhận biết nhiều lớp escape

Với Unescape, giả sử nhập <b>Chào</b> & bạn. Các tham chiếu thông dụng được đọc lại thành:

<b>Chào</b> & bạn

Ô kết quả hiển thị các dấu tạo thẻ dưới dạng văn bản; chữ “Chào” không trở thành chữ đậm ở đó. Nếu bạn đưa chuỗi này sang nơi diễn giải HTML, cách sử dụng và mức rủi ro sẽ khác.

Để theo dõi lớp biểu diễn, bắt đầu bằng chuỗi <: Escape cho <, rồi Unescape kết quả một lần trả về <, chưa phải dấu nhỏ hơn. Một ví dụ khác là đầu vào © và ©: Unescape cho © và ©. Hai cách viết khác nhau có thể diễn giải thành cùng ký tự, nên không thể luôn suy ngược chính xác cách viết ban đầu.

Khi nào nên dùng công cụ Escape/Unescape HTML?

Chuẩn bị nội dung minh họa

Công cụ phù hợp khi cần chuẩn bị một đoạn mã để trình bày nguyên văn trong vùng văn bản của nội dung HTML. Ví dụ, người viết hướng dẫn muốn độc giả nhìn thấy cú pháp thẻ thay vì để đoạn đó tạo bố cục. Kết quả Escape hỗ trợ nhu cầu này, nhưng vẫn phải được chèn vào đúng ngữ cảnh tại nơi nhận.

Cần phân biệt việc trình bày mã với việc tạo nội dung có định dạng. Nếu bạn có văn bản Markdown và muốn chuyển cấu trúc của nó thành HTML, đó là nhu cầu của công cụ chuyển đổi Markdown sang HTML, không phải phép Escape chuỗi. Hai thao tác có mục đích khác nhau và không có căn cứ để nói chúng tự tích hợp.

Đọc lại văn bản chứa entity

Unescape hữu ích khi nội dung sao chép từ tài liệu hoặc hệ thống khác chứa các tham chiếu khiến văn bản khó đọc. Chuyển chúng về ký tự giúp nhận ra dấu câu hay ký hiệu đang được biểu diễn. Kết quả nên được hiểu là văn bản đã diễn giải, không phải bản gốc được chứng minh đầy đủ.

Công cụ cũng hỗ trợ kiểm tra bằng mắt xem một chuỗi có thêm lớp Escape hay không. Bạn có thể so sánh đầu vào với kết quả để xác định mục đích xử lý tiếp theo. Đây là quan sát thủ công, không phải chức năng phát hiện lỗi tự động. Với chuỗi nhiều lớp, nên biết nơi nhận cần dạng nào trước khi tiếp tục chuyển đổi, thay vì coi mọi entity còn lại là thứ phải loại bỏ.

Escape HTML khác gì gỡ thẻ HTML, escape JSON và mã hóa URL?

Giữ nguyên biểu diễn hay loại bỏ thẻ

Escape giữ các dấu của đoạn mã dưới một dạng biểu diễn khác; gỡ thẻ hướng tới loại phần đánh dấu để lấy nội dung văn bản. Đây là khác biệt về mục đích. Nếu muốn người đọc nhìn thấy cấu trúc thẻ, Escape phù hợp hơn với nhu cầu đó. Nếu chỉ muốn phần chữ, có thể cân nhắc nhu cầu tương ứng với công cụ gỡ bỏ các thẻ HTML khỏi đoạn văn bản; ở đây không suy đoán thuật toán của công cụ đó.

Escape cũng không đồng nghĩa làm sạch HTML. Làm sạch nhằm giữ nội dung được phép và loại thành phần không được phép theo chính sách cụ thể; phép thay ký tự này không thực hiện đánh giá đó. Nó không rút gọn mã, sắp xếp thụt dòng hoặc sửa cấu trúc tài liệu.

HTML, JSON và URL là các ngữ cảnh khác nhau

Escape HTML dùng tham chiếu ký tự HTML. Escape chuỗi JSON tuân theo cú pháp JSON, nơi dấu nháy kép, dấu gạch chéo ngược và ký tự điều khiển có quy tắc riêng. Bảng tám ký tự của công cụ không thay thế cho bước tạo chuỗi JSON hợp lệ. Nếu dữ liệu đi qua cả hai ngữ cảnh, từng lớp cần được xử lý theo mục đích của nó.

Mã hóa URL lại có quy tắc biểu diễn phục vụ địa chỉ và các thành phần của địa chỉ. Entity HTML không tự thay thế quy tắc đó. Tương tự, kết quả không mặc nhiên là chuỗi JavaScript hoặc CSS phù hợp. Hãy xác định nơi sẽ diễn giải dữ liệu, thay vì chọn phép chuyển đổi chỉ vì tất cả đều được gọi chung là “escape”.

Giới hạn và lưu ý khi sử dụng kết quả

An toàn phụ thuộc nơi dùng kết quả

Escape trong công cụ không phải giải pháp chống XSS toàn diện. Mã nguồn thể hiện thay thế ký tự, không thể hiện lọc thẻ, kiểm tra thuộc tính nguy hiểm hoặc phân tích địa chỉ liên kết. Mức phù hợp phụ thuộc ngữ cảnh đầu ra và những biện pháp bảo vệ tại nơi tiếp nhận.

Unescape có thể khôi phục các dấu tạo thẻ. Chúng được hiển thị như văn bản trong ô kết quả, nhưng nếu đưa sang nơi diễn giải HTML, ý nghĩa của chuỗi có thể thay đổi. Không nên lấy việc nội dung chỉ hiện chữ trong công cụ làm bằng chứng rằng nó an toàn ở mọi vị trí khác.

Những điều chưa thể cam kết

Không thể cam kết khôi phục nguyên văn mọi chuỗi tùy ý. Các cách viết tham chiếu khác nhau có thể cho cùng ký tự; nội dung lỗi, xuống dòng hoặc chuỗi bất thường còn chịu cách phân tích trong textarea. Hành vi trên từng trình duyệt chưa được xác minh bằng chạy thử từ dữ liệu cung cấp.

Sao chép phụ thuộc hỗ trợ và quyền của Clipboard API. Chưa có số liệu hiệu năng hoặc giới hạn dung lượng thực tế cho chuỗi dài. Logic chuyển đổi được thấy sử dụng chức năng trình duyệt, nhưng chưa đủ để khẳng định toàn trang không gửi hoặc lưu dữ liệu. Cấu hình triển khai và các thành phần khác của trang nằm ngoài phạm vi mã đã cung cấp.

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

Vì sao < lại biến thành < khi Escape?

Vì công cụ thay dấu & trong chuỗi đầu vào bằng &, kể cả khi dấu đó mở đầu một entity đã có. Nó không tự nhận diện < để giữ nguyên. Kết quả vì thế có thêm một lớp biểu diễn. Điều này phù hợp nếu bạn muốn hiển thị nguyên văn tên entity, nhưng có thể không phù hợp nếu muốn nơi nhận hiển thị dấu nhỏ hơn. Hãy xác định dạng dữ liệu hiện tại và mục tiêu đầu ra trước khi Escape thêm lần nữa.

Tại sao Unescape một lần vẫn còn thấy entity?

Vì một lượt Unescape không tự giải tiếp những tham chiếu vừa xuất hiện từ lớp bên ngoài. Với chuỗi nhiều lớp, kết quả còn entity có thể là hành vi đúng, không phải chuyển đổi thất bại. Ngoài ra, cách viết sai hoặc bất thường có thể chịu quy tắc diễn giải riêng của trình duyệt. Bạn nên xem entity còn lại là nội dung cần giữ hay lớp cần đọc tiếp; không nên lặp Unescape mù quáng, đặc biệt trước khi đưa kết quả vào nơi diễn giải HTML.

Vì sao dấu /, dấu = và dấu nháy cũng bị thay thế?

Vì chúng được liệt kê trực tiếp trong bảng tám ký tự của chế độ Escape. Phép chuyển đổi không phân biệt dấu gạch chéo đang nằm trong thẻ đóng hay trong câu thường, cũng không phân tích dấu bằng thuộc một thuộc tính hay một biểu thức. Do đó, việc chúng đổi dạng là kết quả của quy tắc ký tự, không phải bằng chứng công cụ đã hiểu cấu trúc HTML. Các tham chiếu số trong đầu ra vẫn biểu diễn những ký tự tương ứng khi được diễn giải phù hợp.

Có thể dùng kết quả Escape HTML trực tiếp làm chuỗi JSON không?

Không nên coi kết quả Escape HTML là một chuỗi JSON đã được xử lý đầy đủ. Công cụ áp dụng bảng tham chiếu HTML, còn JSON có yêu cầu cú pháp riêng đối với chuỗi và ký tự điều khiển. Việc một đầu vào đơn giản có thể tình cờ phù hợp không chứng minh mọi đầu vào đều phù hợp. Nếu cần lưu nội dung trong JSON, hãy dùng cơ chế tạo JSON đúng chuẩn; nếu nội dung sau đó đi vào HTML, tiếp tục đánh giá riêng ngữ cảnh HTML đó.

Escape bằng công cụ này có bảo đảm chống mọi lỗi XSS không?

Không. Thay thế các dấu nhạy cảm có vai trò trong một số cách trình bày dữ liệu, nhưng không bao phủ mọi ngữ cảnh hoặc mọi nguyên nhân XSS. Công cụ không xác nhận nguồn đáng tin cậy và không kiểm tra cách bạn chèn kết quả vào trang. Đặc biệt, dữ liệu trong JavaScript, URL hoặc thuộc tính có yêu cầu khác với vùng văn bản HTML. Nhãn hoàn tất chỉ thông báo phép chuyển đổi đã thực hiện, không phải chứng nhận bảo mật cho nội dung.

Vì sao sao chép kết quả không hoạt động?

Thao tác sao chép phụ thuộc việc trình duyệt hỗ trợ và cho phép ghi clipboard trong môi trường đang sử dụng. Mã nguồn có nhánh báo lỗi khi yêu cầu ghi thất bại, nhưng không đủ thông tin để xác định nguyên nhân của từng trường hợp. Nếu kết quả rỗng, thao tác cũng không thực hiện. Bạn có thể chọn văn bản trong ô kết quả để sao chép thủ công; việc nút sao chép gặp lỗi không nhất thiết có nghĩa là phép Escape hoặc Unescape đã sai.

Có đủ căn cứ để khẳng định công cụ không lưu nội dung đã nhập không?

Chưa đủ căn cứ. Đoạn mã được cung cấp cho thấy logic chuyển đổi sử dụng chức năng của trình duyệt, nhưng điều đó không mô tả toàn bộ hoạt động của trang đang triển khai. Các script khác, cấu hình dịch vụ hoặc chính sách dữ liệu chưa được xác minh từ tài liệu này. Vì vậy, không thể cam kết nội dung chỉ xử lý cục bộ hoặc hoàn toàn không được lưu. Với dữ liệu nhạy cảm, nên kiểm tra chính sách của nơi cung cấp và tránh nhập thông tin riêng tư không cần thiết.