Công cụ Mã hóa / Giải mã HTML
Mã hóa văn bản thành thực thể HTML hoặc giải mã thực thể HTML trở lại thành văn bản.
Cách sử dụng Công cụ Mã hóa / Giải mã HTML
- 1
Nhập văn bản hoặc HTML của bạn
Dán văn bản thuần túy bạn muốn thoát ký tự, hoặc các thực thể HTML bạn muốn chuyển lại, vào ô nhập liệu.
- 2
Chọn mã hóa hoặc giải mã
Nhấn Encode to HTML Entities để chuyển các ký tự như < > & thành thực thể an toàn, hoặc Decode HTML Entities để chuyển thực thể trở lại thành ký tự dễ đọc.
- 3
Xem lại kết quả
Kiểm tra kết quả đã chuyển đổi trong ô kết quả, và dùng Swap Input/Output để nối tiếp một chuyển đổi ngược nếu cần.
- 4
Sao chép kết quả
Nhấn Copy Output để lấy văn bản đã mã hóa hoặc giải mã, hoặc Clear Both để xóa các ô.
Mã hóa HTML: thoát các ký tự đặc biệt một cách an toàn
Mã hóa HTML có nghĩa là gì
Mã hóa HTML, còn gọi là thoát HTML, chuyển các ký tự mang ý nghĩa đặc biệt trong HTML thành các tham chiếu ký tự để trình duyệt hiển thị chúng dưới dạng văn bản theo nghĩa đen thay vì diễn giải chúng như markup. Trình duyệt đọc một dấu < thô như khởi đầu của một thẻ, nên để hiển thị một dấu nhỏ hơn thực sự trên trang, bạn phải viết tham chiếu < thay thế. Mã hóa là phép dịch an toàn giữa thứ bạn muốn hiển thị và thứ trình duyệt sẽ thực thi nếu không.
Chỉ có một số ít ký tự thực sự cần được thoát trong HTML thường ngày, nhưng làm đúng chúng là sự khác biệt giữa một trang hiển thị chính xác và một trang bị hỏng hoặc trở nên dễ bị tấn công. Các tham chiếu đến ở hai dạng: các thực thể có tên như <, và các tham chiếu dạng số như < hoặc <, tất cả đều tạo ra cùng một ký tự nhìn thấy được.
Các ký tự cốt lõi và thực thể của chúng
Năm ký tự bao quát gần như mọi nhu cầu thoát. Dấu và & trở thành & và phải đứng đầu tiên trong bất kỳ phép chuyển đổi thủ công nào, vì nó khởi đầu mọi thực thể. Dấu nhỏ hơn < trở thành < và dấu lớn hơn > trở thành >, vì chúng phân định các thẻ. Dấu nháy kép " trở thành " và dấu nháy đơn hay dấu lược ' trở thành ' (hoặc thực thể có tên ' trong HTML5), những thứ quan trọng bên trong các giá trị thuộc tính.
Quy tắc dấu-và-trước-tiên ngăn ngừa một lỗi tinh vi. Nếu bạn thay < bằng < và chỉ sau đó mới thoát các dấu và, bạn sẽ biến < vừa viết của mình thành &lt; và hiển thị văn bản theo nghĩa đen "<" trên trang. Luôn mã hóa & trước các ký tự khác. Công cụ này áp dụng các phép chuyển đổi theo đúng thứ tự một cách tự động, nên bạn không bao giờ rơi vào cái bẫy đó.
Ví dụ cụ thể: hiển thị một đoạn mã
Hãy hình dung bạn muốn một trang hiển thị theo nghĩa đen văn bản <a href="x">Tom & Jerry</a> thay vì kết xuất ra một liên kết. Mỗi ký tự đặc biệt được thay bằng tham chiếu của nó. Dấu ngoặc nhọn mở trở thành <, dấu đóng trở thành >, các dấu nháy kép quanh thuộc tính trở thành ", và dấu và giữa hai cái tên trở thành &.
Kết quả đã mã hóa là <a href="x">Tom & Jerry</a>. Khi được dán vào một tệp HTML, trình duyệt in mã nguồn gốc một cách nhìn thấy được trên màn hình, đúng như một trang hướng dẫn hay tài liệu sẽ trình bày một ví dụ markup, thay vì biến nó thành một phần tử neo hoạt động.
Vì sao mã hóa ngăn chặn XSS
Cross-site scripting (XSS) là một cuộc tấn công trong đó kẻ tấn công tiêm HTML hoặc JavaScript vào một trang thông qua một trường về sau được hiển thị cho những người dùng khác, chẳng hạn như một bình luận, tên người dùng, hay từ khóa tìm kiếm. Nếu một trang chèn văn bản không đáng tin đó vào trang mà không thoát, một payload như một thẻ script sẽ thực thi trong trình duyệt của nạn nhân với các đặc quyền của trang, tạo điều kiện cho việc đánh cắp phiên và những hậu quả tệ hơn.
Mã hóa vô hiệu hóa cuộc tấn công ngay tận gốc. Khi các ký tự nguy hiểm được thoát, một <script>alert(1)</script> được tiêm vào sẽ được lưu trữ và kết xuất dưới dạng văn bản nhìn thấy được vô hại — <script>alert(1)</script> — thay vì như một phần tử có thể thực thi. Biện pháp phòng thủ đáng tin cậy nhất duy nhất chống lại lớp lỗ hổng này là mã hóa HTML mọi mẩu dữ liệu không đáng tin tại đúng điểm nó được ghi vào trang.
Nội dung phần tử so với ngữ cảnh thuộc tính
Nơi bạn đặt dữ liệu thay đổi những ký tự nào là nguy hiểm, và một quy tắc thoát duy nhất là không đủ cho mọi chỗ. Bên trong nội dung phần tử — văn bản giữa một thẻ mở và một thẻ đóng — các ký tự then chốt là <, > và &. Bên trong một giá trị thuộc tính, ký tự nháy phân định thuộc tính là ký tự cho phép kẻ tấn công thoát khỏi giá trị, nên ở đó " và ' phải được mã hóa cùng với dấu và.
Thói quen vững chắc nhất là luôn đặt các thuộc tính của bạn trong dấu nháy và mã hóa ký tự nháy tương ứng cùng với < > và &. Một thuộc tính không có dấu nháy thì khó bảo mật hơn nhiều, bởi khi đó các khoảng trắng và nhiều ký tự khác có thể thoát ra khỏi giá trị. Cũng có những ngữ cảnh hoàn toàn riêng biệt — bên trong một khối script, một khối style, hoặc một thuộc tính URL — nơi mà chỉ thoát HTML thôi là không đủ và thay vào đó cần một kiểu mã hóa đặc thù theo ngữ cảnh.
Mã hóa so với giải mã, và khi nào nên làm mỗi việc
Mã hóa là hướng bạn dùng đến khi tạo ra đầu ra: lấy văn bản thô và tạo ra markup an toàn bằng thao tác Mã hóa. Giải mã là chiều ngược lại, biến các thực thể trở lại thành các ký tự theo nghĩa đen của chúng bằng thao tác Giải mã, điều này hữu ích khi bạn có mã nguồn đã được thoát — sao chép từ một cơ sở dữ liệu, một email, hay một công cụ khác — và muốn đọc hoặc chỉnh sửa văn bản bên dưới.
Một quy trình làm việc thực tế dùng cả hai với nút Hoán đổi. Bạn có thể giải mã một đoạn đã lưu thành các ký tự thuần, chỉnh sửa nó, rồi mã hóa lại phiên bản đã chỉnh để hiển thị an toàn, tất cả mà không cần gõ lại. Chỉ cần nhớ quy tắc vàng về thời điểm: mã hóa vào khoảnh khắc xuất ra, không phải vào khoảnh khắc nhập vào, bởi thoát quá sớm có thể làm hỏng dữ liệu vốn cần ở dạng thô khi lưu trữ.
Những lỗi thường gặp cần tránh
Lỗi kinh điển là mã hóa kép: chạy lại văn bản vốn đã được thoát qua bộ mã hóa một lần nữa, biến & thành &amp; và hiển thị "&" theo nghĩa đen cho người dùng của bạn. Hãy mã hóa đúng một lần, và chỉ tại ranh giới đầu ra. Một họ hàng gần là thoát dữ liệu trên đường vào cơ sở dữ liệu rồi lại thoát lần nữa trên đường ra, tạo ra cùng một kết quả rối loạn.
Một lỗi thường gặp khác là cho rằng việc thoát HTML bảo vệ mọi ngữ cảnh. Nó không bảo vệ dữ liệu đặt bên trong một chuỗi JavaScript, một giá trị CSS, hay một href bắt đầu bằng javascript:; những thứ đó cần các quy tắc mã hóa riêng. Cuối cùng, đừng tự chế một bộ thoát chắp vá mà quên mất dấu và hay các dấu nháy của thuộc tính — những khoảng hở đó chính xác là nơi lỗi và XSS lọt qua. Hãy để một bộ mã hóa đầy đủ, có thứ tự đúng đắn làm công việc đó.
Câu hỏi thường gặp
Những ký tự nào được mã hóa thành thực thể HTML?
Mã hóa giúp ngăn chặn XSS như thế nào?
Tôi có thể chuyển thực thể trở lại thành văn bản thường không?
Nút Swap dùng để làm gì?
Dữ liệu đầu vào của tôi có được gửi đến máy chủ không?
Công cụ liên quan
Tiếp tục với những công cụ hữu ích này