Chuyển đổi thực thể HTML thành ký tự dễ đọc cho các bài học lập trình, chỉnh sửa nội dung, gỡ lỗi và dọn dẹp dữ liệu
Một học sinh chép ví dụ mã nguồn từ một nền tảng học trực tuyến và thấy hiện ra <h1> thay vì một thẻ <h1> thật. Ở một dự án khác, thầy giáo xuất danh sách câu hỏi ra tệp thì phát hiện dấu lược, dấu nháy, dấu và cùng các ký hiệu toán học đều biến thành những tham chiếu ký tự lạ hoắc.
Nhiều khả năng nội dung đã được mã hóa HTML để các ký tự đặc biệt được lưu lại hoặc hiển thị mà trình duyệt không hiểu nhầm thành thẻ đánh dấu. Công cụ giải mã HTML đưa những thực thể ấy về lại đúng ký tự mà chúng đại diện.
Giải mã giúp bạn đọc được đoạn chữ đã thoát ký tự, xem lại ví dụ mã đã lưu, tìm ra chỗ bị mã hóa lặp và dọn dẹp nội dung nhập từ nơi khác về. Dù vậy vẫn phải cẩn thận: chữ vừa giải ra có thể chứa thẻ HTML hoặc đoạn kịch bản, và những thứ đó nên hiện ra dưới dạng văn bản thuần chứ không được chạy trong trang.
Bài này nói về thực thể HTML là gì, việc giải mã diễn ra thế nào, nó đỡ đần được những việc dạy học và lập trình nào, và làm sao xem lại kết quả mà không tự chuốc lấy một lỗ hổng an toàn.
Chữ đã mã hóa HTML trông ra sao
HTML dùng một số ký tự làm thành phần của thẻ đánh dấu. Dấu nhỏ hơn và dấu lớn hơn bao lấy thẻ, dấu và mở đầu một tham chiếu ký tự, còn dấu nháy thường bao quanh giá trị của thuộc tính.
Khi những ký tự ấy cần hiện ra như chữ bình thường, người ta viết chúng thành thực thể HTML:
| Dạng đã mã hóa | Ký tự sau khi giải | Ý nghĩa thường gặp |
|---|---|---|
&lt; |
< |
Dấu nhỏ hơn |
&gt; |
> |
Dấu lớn hơn |
&amp; |
& |
Dấu và |
&quot; |
" |
Dấu nháy kép |
&#039; |
' |
Dấu lược hoặc dấu nháy đơn |
&nbsp; |
Khoảng trắng không ngắt | Khoảng trắng giữ cho dòng không bị ngắt |
&copy; |
© | Ký hiệu bản quyền |
Tham chiếu thực thể có thể ở dạng tên, như &copy;, hoặc dạng số, như &#169;. Cả hai đều đại diện cho ký hiệu bản quyền.
Mã hóa và giải mã là hai chiều ngược nhau
Mã hóa HTML biến ký tự đặc biệt thành tham chiếu thực thể. Giải mã HTML thì đưa những tham chiếu ấy trở lại thành ký tự đọc được.
Bản gốc:
<p>Tom & Sara</p>
Đã mã hóa:
<p>Tom & Sara</p>
Đã giải mã:
<p>Tom & Sara</p>Công cụ mã hóa HTML có ích khi bạn muốn thẻ hoặc ký hiệu hiện ra như chữ. Còn công cụ giải mã HTML làm chiều ngược lại, khi những thực thể ấy cần được xem xét hoặc khôi phục.
Không thao tác nào trong hai thao tác đó nói lên nội dung có đáng tin hay không. Mã hóa và giải mã chỉ là chuyện cách biểu diễn, không phải một cái gật đầu về an toàn.
Giải mã thực thể HTML như thế nào
- Chép đoạn chữ đã mã hóa. Lấy trọn các tham chiếu thực thể, kể cả dấu và ở đầu lẫn dấu chấm phẩy ở cuối.
- Dán vào công cụ giải mã HTML. Xem lại phần đầu và phần cuối đã chép đúng chưa.
- Chạy phần giải mã. Công cụ đổi những thực thể mà nó nhận ra thành ký tự tương ứng.
- Đọc kết quả như văn bản thuần. Để ý xem có thẻ HTML, đoạn kịch bản, đường dẫn lạ hay ký tự hỏng không.
- So với bản gốc. Xác nhận chữ bình thường và những ký hiệu cần có vẫn còn nguyên.
- Chép kết quả đã giải. Chỉ đặt nó vào nơi phù hợp với loại nội dung ấy.
- Thử nơi nhận. Nếu kết quả đi vào một trang hay một ứng dụng, hãy chắc rằng ở đó nó được xử lý an toàn.
- Giữ lại phần nhập ban đầu. Bạn sẽ cần tới nó nếu đoạn chữ đã bị mã hóa nhiều lần hoặc bị giải sai.
Một câu hỏi để chẩn đoán: bạn cần kiểu giải mã nào?
Không phải chuỗi khó đọc nào cũng là thực thể HTML. Chọn nhầm công cụ giải thì chẳng ra được gì dùng được.
Đoạn chữ có tham chiếu kiểu &lt; hay &quot; không?
Vậy thì giải mã HTML là đúng. Những khuôn mẫu đó đại diện cho các ký tự dùng trong nội dung và thẻ đánh dấu của trang.
Đoạn chữ có chuỗi phần trăm kiểu %20 hay %3F không?
Nhiều khả năng đó là mã hóa URL. Hãy dùng công cụ giải mã URL chứ đừng dùng giải mã HTML.
Đoạn chữ có giống một mớ dài gồm chữ cái, chữ số, dấu cộng và dấu gạch chéo không?
Có thể là Base64. Hãy dùng công cụ Giải mã Base64 khi bạn biết chắc nguồn đó chứa chữ mã hóa Base64.
Đoạn chữ có chuỗi bắt đầu bằng dấu gạch chéo ngược kiểu
hay u003C không?
Có thể nó đã được thoát ký tự cho JSON hoặc cho một ngôn ngữ lập trình. Hãy tìm hiểu định dạng sinh ra nó trước khi chọn cách giải mã.
Đoạn chữ hiện ra toàn hình thoi đen hoặc ký tự thay thế?
Vấn đề có lẽ nằm ở bảng mã ký tự, ở phông chữ hoặc ở dữ liệu đã hỏng, chứ không phải ở thực thể HTML. Giải mã HTML đi giải mã lại khó mà chữa được.
Những tình huống có thật trong dạy học và lập trình
1. Đọc ví dụ mã lấy từ một trang web
Một cô giáo soạn bài HTML và cố ý mã hóa các thẻ, để học sinh nhìn thấy chính những thẻ đó thay vì để trình duyệt hiểu chúng.
Sau đó một em chép ví dụ trên màn hình vào trình soạn mã, nhưng đoạn chữ chép được vẫn còn nguyên các tham chiếu thực thể. Em giải mã ví dụ ấy rồi lưu thành tệp HTML.
Định dạng lại bằng công cụ Làm đẹp HTML xong, em xem lại cấu trúc thẻ và thử mở trang trong trình duyệt.
2. Dọn một kho câu hỏi vừa xuất ra
Một thầy giáo xuất bộ câu hỏi trắc nghiệm từ nền tảng cũ. Vài câu hiện & thay cho dấu và, còn quanh các câu trích dẫn thì có ".
Thầy sao lưu bản xuất trước đã, rồi thử giải mã trên một mẫu nhỏ. Kết quả được đối chiếu với câu hỏi gốc trước khi đụng tới cả bộ.
Cách làm chừng mực ấy giữ cho lượt giải thứ hai không phá hỏng phần chữ vốn đã đúng.
3. Tìm ra chỗ mã hóa hai lần
Một người mới học lập trình chờ thấy < nhưng trên trang lại hiện <. Dấu nhỏ hơn ban đầu có lẽ đã bị mã hóa tới hai lần.
Ký tự gốc:
<
Mã hóa một lần:
<
Mã hóa hai lần:
&lt;Người ấy lần theo dữ liệu qua biểu mẫu, qua cơ sở dữ liệu, qua khuôn mẫu rồi tới phần trình duyệt hiển thị. Thay vì cứ giải bừa thêm lượt nữa, người ấy tìm ra chỗ đã mã hóa lần thứ hai.
Cách sửa đúng về lâu dài là mã hóa phần đầu ra ngay tại ranh giới thích hợp, chứ không phải suốt ngày giải mã những giá trị đã lưu.
4. Xem nội dung từ API hoặc cơ sở dữ liệu
Một học sinh nhận được phản hồi API chứa nội dung bài viết đầy thực thể. Em giải mã một mẫu để hình dung nó phải hiện ra thế nào với người đọc.
Giá trị vừa giải được coi là dữ liệu, chứ không tự động chèn vào trang như HTML đáng tin. Em xem lại tài liệu của API để biết trường đó chứa văn bản thuần, thẻ đã mã hóa hay nội dung cần làm sạch.
Phân biệt được như vậy thì ứng dụng mới không lẫn chữ để đọc với nội dung trang có thể chạy được.
5. Lấy lại các ký hiệu toán và khoa học
Một bài học nhập từ nơi khác về có các tham chiếu ký tự dạng số cho dấu so sánh, chữ cái Hy Lạp hoặc ký hiệu toán. Học sinh đọc bản gốc rất chật vật.
Cô giáo giải mã một bản sao rồi đối chiếu từng công thức với tài liệu gốc. Ký hiệu đặc biệt quan trọng, vì chỉ cần đổi một dấu bất đẳng thức, một dấu trừ hay một chỉ số trên là nghĩa của câu hỏi đã khác.
Giải mã xong thì phải rà lại về mặt chuyên môn, chứ không mặc nhiên coi là đã đúng.
6. Chuẩn bị nội dung để dịch
Một tệp dịch có các câu trộn lẫn với thực thể HTML. Người dịch cần đọc được dấu câu hiện ra mà vẫn giữ nguyên các chỗ giữ vị trí và phần thẻ đánh dấu.
Một bản sao thử được giải mã để xem, còn biến và dấu hiệu của khuôn mẫu thì được giữ nguyên. Dịch xong, nội dung quay lại đúng định dạng cũ và được thử ngay trong ngữ cảnh.
Đem giải mã cả một khuôn mẫu khi chưa hiểu cấu trúc của nó thì rất dễ làm hỏng phần nội dung mà ứng dụng cần tới.
7. Dò lỗi ở phần bình luận của người dùng
Trang của một trường hiện ra dấu lược đã mã hóa trong lời bình luận của học sinh. Người lập trình kiểm tra xem bình luận bị mã hóa lúc nhập vào, nằm trong cơ sở dữ liệu ở dạng đã mã hóa, rồi lại bị mã hóa thêm lần nữa lúc xuất ra hay không.
Người ấy sửa ngay dòng chảy dữ liệu, chứ không thêm một lời gọi giải mã vào từng trang. Nội dung đã lưu, việc thoát ký tự ở đầu ra và ngữ cảnh hiển thị được xem xét tách bạch.
Nhờ vậy bớt được nguy cơ một bản vá hiển thị vội vàng lại đẻ ra lỗ hổng an toàn ở chỗ khác.
8. So chữ nhìn thấy với thẻ trong mã nguồn
Học sinh học phát triển web nhận hai đoạn văn: một đoạn đã mã hóa và một đoạn đã hiển thị. Các em giải mã phần nguồn, chỉ ra các thẻ và giải thích phần nào dựng nên cấu trúc, phần nào là nội dung nhìn thấy được.
Bài tập này cho thấy trình duyệt hiểu thẻ đánh dấu, còn ví dụ mã thì thường phải mã hóa mới hiện ra được.
Giải mã HTML so với các công cụ liên quan
| Ví dụ dữ liệu vào | Định dạng có thể | Công cụ phù hợp | Kết quả mong đợi |
|---|---|---|---|
&lt;h1&gt; |
Thực thể HTML | Giải mã HTML | <h1> |
Hello%20Class |
Mã hóa URL | Giải mã URL | Hello Class |
SGVsbG8gQ2xhc3M= |
Base64 | Giải mã Base64 | Hello Class |
u003Ch1u003E |
Chuỗi thoát Unicode | Bộ phân tích JSON hoặc của chính ngôn ngữ đó | <h1> |
&#169; |
Thực thể HTML dạng số | Giải mã HTML | © |
Những việc công cụ này gỡ được
- Thẻ HTML hiện ra thành chữ của thực thể thay vì ký tự đọc được.
- Dấu nháy và dấu lược hiện ra thành tham chiếu đã mã hóa.
- Trong nội dung nhập về, dấu và hiện thành
&. - Ví dụ mã chép từ một trang web vẫn còn ở dạng đã thoát ký tự.
- Bản xuất từ cơ sở dữ liệu có thực thể ký tự dạng tên hoặc dạng số.
- Nội dung có vẻ đã bị mã hóa tới hai lần.
- Một bài học cần cho thấy quan hệ giữa mã nguồn và HTML đã hiển thị.
- Có nội dung API hoặc khuôn mẫu đã mã hóa cần xem xét.
Những lỗi hay gặp khi giải mã
Giải đi giải lại nhiều lượt
Lượt đầu có thể cho ra đúng đoạn chữ cần, nhưng lượt sau lại làm hỏng phần đáng ra phải giữ nguyên dạng mã hóa. Hãy tìm hiểu vì sao dữ liệu bị mã hóa và đã qua bao nhiêu lần biến đổi.
Dùng giải mã HTML cho dữ liệu của URL
Thực thể HTML và ký tự URL mã hóa bằng dấu phần trăm là hai định dạng khác nhau. Hãy chọn công cụ giải theo đúng khuôn mẫu đang có.
Đem chữ vừa giải ra, chưa tin được, hiển thị thẳng dưới dạng HTML
Nội dung vừa giải có thể mang theo thẻ, thuộc tính sự kiện, đoạn kịch bản hoặc đường dẫn nguy hiểm. Hãy coi phần đầu ra chưa tin được là văn bản, trừ khi nó đã được làm sạch cho đúng ngữ cảnh ấy.
Tưởng giải mã sẽ chữa được ký tự hỏng
Những ký hiệu thay thế và chữ có dấu đọc không nổi thường đến từ một bảng mã sai chứ không phải từ thực thể HTML. Hãy tìm hiểu bảng mã của nguồn.
Sửa cơ sở dữ liệu mà không sao lưu
Một câu lệnh giải mã hàng loạt có thể đổi hàng nghìn giá trị và chưa chắc đã lùi lại được. Hãy thử trên bản sao, xem qua vài mẫu và giữ một bản sao lưu đã kiểm chứng.
Bỏ mất những thực thể mà ví dụ mã đang cần
Một bài hướng dẫn có thể cố tình dùng thẻ đã mã hóa để chúng còn hiện ra được. Giải mã chúng ngay trong trang hướng dẫn sẽ khiến trình duyệt hiểu chúng thành thẻ thật.
HTML đã giải mã và chuyện an toàn
Hãy nhìn đoạn dữ liệu đã mã hóa này:
<img src=x onerror="exampleFunction()">Giải mã xong, nó trở thành một phần tử ảnh HTML có kèm thuộc tính sự kiện. Nếu ứng dụng chèn thẳng đoạn chữ đã giải mà chưa tin được vào tài liệu dưới dạng HTML, trình duyệt có thể coi đó là thẻ đánh dấu đang hoạt động.
Xử lý thế nào cho an toàn thì còn tùy ngữ cảnh. Chữ hiện trong một đoạn văn, chữ đặt trong một thuộc tính, dữ liệu nhét vào một địa chỉ, và phần thẻ được phép dùng trong trình soạn thảo có định dạng — mỗi nơi cần một cách bảo vệ riêng.
Học sinh nên nắm ba việc tách bạch nhau:
- Giải mã là trả lại đúng những ký tự đang được biểu diễn.
- Thoát ký tự là chuẩn bị dữ liệu để hiển thị an toàn trong một ngữ cảnh cụ thể.
- Làm sạch là bỏ đi hoặc cho phép một số thẻ nhất định theo quy tắc đã định.
Không nên coi ba việc ấy có thể thay cho nhau.
Một quy trình dò lỗi thiết thực
- Ghi lại đúng đoạn chữ đang hiện sai.
- Tìm giá trị thô trước khi trang đem nó ra hiển thị.
- Xác định nó là thực thể HTML, mã hóa URL, Base64 hay một định dạng khác.
- Giải mã một mẫu thử vô hại.
- So kết quả vừa giải với đoạn chữ lẽ ra phải có.
- Lần theo chỗ giá trị đó được tạo ra, được lưu, được lấy về và được hiển thị.
- Xem việc mã hóa có xảy ra hơn một lần không.
- Sửa dòng chảy dữ liệu ngay tại ranh giới thích hợp.
- Thử với dấu câu thường gặp, ví dụ mã, chữ nhiều ngôn ngữ và cả dữ liệu cố ý phá hoại.
- Sao lưu trước khi sửa nội dung đã lưu.
Quy trình này mất thời gian hơn việc tiện tay gắn thêm một hàm giải mã, nhưng để lại một bản sửa đáng tin hơn nhiều.
Dùng HTML đã giải mã trong bài tập của người mới
Khi kết quả giải ra có HTML thật mà học sinh định dùng, hãy lưu nó vào một tệp làm việc và định dạng bằng công cụ Làm đẹp HTML. Sau đó xem kỹ cấu trúc rồi mới mở nó như một trang web.
Hãy để ý:
- Thẻ kịch bản lạ.
- Thuộc tính sự kiện viết ngay trong thẻ.
- Ảnh ở máy chủ khác hoặc tài nguyên dùng để theo dõi.
- Biểu mẫu gửi thông tin đi nơi khác.
- Phần tử ẩn chứa dữ liệu không rõ nguồn.
- Đường dẫn tới những nơi chưa tin được.
- Thẻ đóng bị thiếu và thẻ lồng nhau sai.
- Tên người, địa chỉ thư điện tử, mã thông báo hay hồ sơ riêng tư.
Đừng chạy một đoạn thẻ lạ vừa giải ra chỉ để xem có chuyện gì. Hãy dùng mẫu vô hại trên lớp và nhờ thầy cô hoặc người lập trình có kinh nghiệm xem giúp phần mã mình chưa rõ.
Kiểm tra độ chính xác cho nội dung dạy học
Giải mã trả lại được ký hiệu, nhưng không xác nhận được ký hiệu ấy có đúng hay không. Một câu hỏi toán chứa &lt; có thể giải ra thành dấu nhỏ hơn, trong khi người soạn thật ra định viết dấu lớn hơn.
Với nội dung ngôn ngữ, hãy soi dấu lược, dấu nháy, chữ có dấu, khoảng trắng không ngắt và chiều của dấu câu. Với khoa học và toán, hãy soi các phép tính, đơn vị, chỉ số trên, chỉ số dưới và chữ cái Hy Lạp.
Với bài học về mã, hãy so các thẻ vừa giải với ví dụ đáng lẽ phải có. Thiếu một dấu gạch chéo trong thẻ đóng hay đặt lệch một dấu nháy là đủ làm đổi cách chạy.
Riêng tư và cách dùng có trách nhiệm
Giải mã HTML không hề xóa đi tên học sinh, ảnh mặt, điểm số, địa chỉ thư điện tử, thông tin đăng nhập, hồ sơ nhà trường hay lời bình luận riêng tư. Nó chỉ làm cho những thông tin trước đó bị mã hóa trở nên dễ đọc hơn.
Đừng dán bản xuất cơ sở dữ liệu nội bộ, câu trả lời riêng tư từ biểu mẫu, mã thông báo đăng nhập hay hồ sơ học sinh vào một công cụ giải mã bên ngoài. Hãy thay giá trị nhạy cảm bằng ví dụ bịa ra trước khi thử.
Khi giảng về mã hóa, thầy cô nên dùng mẫu nhỏ và vô hại. Một câu có một dấu và cùng một thẻ mã ngắn là đủ cho học sinh hiểu, mà không phơi ra dữ liệu của trường.
Câu hỏi thường gặp
Giải mã HTML làm gì?
Nó đổi những thực thể HTML và tham chiếu ký tự dạng số mà nó nhận ra thành đúng ký tự tương ứng.
Dạng đã giải của &lt; là gì?
Nó giải ra thành ký tự nhỏ hơn, cái mở đầu cho các thẻ HTML.
Vì sao chữ của tôi hiện &amp; thay vì một dấu và?
Dấu và đã được mã hóa để hiển thị trong HTML. Nếu &amp; hiện ra ngay trước mắt thì nội dung có thể còn bị mã hóa hơn một lần.
Giải mã HTML có giống giải mã URL không?
Không. Giải mã HTML lo các thực thể kiểu &quot;, còn giải mã URL lo các chuỗi phần trăm kiểu %20.
Giải mã HTML có chữa được chữ có dấu bị hỏng không?
Chỉ khi các ký tự ấy được ghi dưới dạng thực thể HTML. Đoạn chữ đầy ký hiệu thay thế thường là chuyện bảng mã hoặc dữ liệu đã hỏng.
Chèn HTML đã giải mã vào trang có an toàn không?
Không mặc nhiên an toàn. Chữ đã giải mà chưa tin được vẫn có thể mang thẻ đang hoạt động. Phải thoát ký tự hoặc làm sạch nó theo đúng ngữ cảnh đầu ra.
Học sinh dùng công cụ này trong giờ lập trình được không?
Được. Nó giúp các em khôi phục ví dụ mã đã bị mã hóa và hiểu vì sao thẻ phải được thoát ký tự khi muốn hiện ra như chữ.
Tôi có nên giải mã cùng một đoạn chữ hai lần không?
Chỉ khi bạn đã xác nhận nó bị mã hóa hai lần. Cứ giải thêm mà chưa hiểu nguồn gốc thì dễ làm sai nội dung.
Giải mã có xóa được thông tin riêng tư không?
Không. Tên người, hồ sơ, thông tin tài khoản và các dữ liệu nhạy cảm khác vẫn còn nguyên đó, thậm chí còn dễ đọc hơn sau khi giải.
Đôi lời cuối
Giải mã HTML có ích khi các ký tự đặc biệt đã được ghi thành thực thể dạng tên hoặc dạng số. Nó trả lại dấu câu đọc được, cứu lấy ví dụ mã, làm sáng tỏ nội dung nhập từ nơi khác và giúp người lập trình lần ra chuyện mã hóa hai lần.
Khó khăn thật sự không nằm ở chỗ bấm nút giải mã. Nó nằm ở việc nhận ra đúng định dạng, hiểu vì sao nội dung bị mã hóa, và quyết định phải xử lý kết quả ra sao.
Hãy giữ phần nhập ban đầu, thử trên một mẫu nhỏ, xem đoạn chữ vừa giải như dữ liệu chưa tin được, và đừng đặt thẳng nó vào trang dưới dạng HTML đang hoạt động. Giải mã cẩn thận sẽ trả lại sự dễ đọc mà không biến một việc dọn dẹp nội dung thành một lỗ hổng an toàn.
