RevealTheme logo

Bộ mã hóa và giải mã URL

Chuyển đổi văn bản sang dạng mã hóa an toàn cho URL (mã hóa theo phần trăm) và ngược lại. Hữu ích cho chuỗi truy vấn, chuyển hướng và luồng OAuth.

Mã hóa URL là gì và khi nào bạn cần nó?

Mã hóa URL (còn gọi là 'mã hóa theo phần trăm', được quy định trong RFC 3986) là quá trình chuyển đổi các ký tự có ý nghĩa đặc biệt trong URL —hoặc các ký tự vốn không an toàn trong URL— thành một chuỗi thoát thập lục phân '%XX'. Đặc tả URL dành riêng một số ký tự có ý nghĩa cấu trúc: '?' bắt đầu chuỗi truy vấn, '#' bắt đầu fragment, '&' phân tách các tham số truy vấn, '/' phân tách các đoạn đường dẫn, v.v. Nếu đầu vào của người dùng chứa bất kỳ ký tự nào trong số đó và bạn nhúng nó nguyên trạng vào một URL, trình phân tích cú pháp sẽ hiểu sai. Mã hóa URL ngăn chặn điều này bằng cách thay thế mỗi ký tự dành riêng hoặc không an toàn bằng biểu diễn thập lục phân theo byte của nó với tiền tố '%'. Một dấu cách trở thành %20, '&' trở thành %26, '=' trở thành %3D. Các ký tự không phải ASCII (chữ Cyrillic, chữ Hán, emoji) được chuyển thành các chuỗi UTF-8 nhiều byte, với mỗi byte được mã hóa theo phần trăm. Trình duyệt xử lý việc này tự động khi bạn nhấp vào một liên kết, nhưng bất cứ khi nào bạn dựng một URL bằng mã —khi tạo một truy vấn tìm kiếm, một đích đến chuyển hướng, một lệnh gọi lại OAuth hoặc một chữ ký webhook— bạn phải mã hóa trước các giá trị do người dùng cung cấp. Công cụ này dùng chính các hàm encodeURIComponent / decodeURIComponent mà mã JavaScript của bạn sẽ dùng, nên hành vi khớp chính xác với môi trường production.

Các trường hợp sử dụng phổ biến

  • Mã hóa từ khóa tìm kiếm của người dùng trước khi nối vào một URL tìm kiếm (?q=user+input).

  • Truyền tham số OAuth redirect_uri một cách an toàn đến máy chủ ủy quyền.

  • Tạo các URL webhook bao gồm payload JSON đã mã hóa trong query string.

  • Mã hóa một URL 'returnTo' để nó còn nguyên khi được truyền qua các URL khác.

  • Giải mã các giá trị đã mã hóa bạn thấy trên thanh địa chỉ trình duyệt sau khi gửi biểu mẫu.

  • Kiểm tra cách một URL sai định dạng được phân tích — mã hóa một ký tự đặc biệt và xem điều gì xảy ra.

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

Khi nào tôi nên mã hóa một URL?
Hãy luôn mã hóa các giá trị do người dùng cung cấp trước khi đưa chúng vào một URL: tham số truy vấn, đoạn đường dẫn hoặc fragment. Không mã hóa là một trong những nguồn lỗi tinh vi phổ biến nhất: giá trị 'mèo & chó' làm hỏng một chuỗi truy vấn cho đến khi nó được mã hóa thành 'm%C3%A8o%20%26%20ch%C3%B3'.
Sự khác biệt giữa encodeURI và encodeURIComponent là gì?
encodeURI dành cho các URL hoàn chỉnh: nó để nguyên các ký tự cấu trúc như '/', '?', '&', '=' vì chúng có ý nghĩa trong một URL. encodeURIComponent dành cho các phần của URL (giá trị truy vấn, đoạn đường dẫn): nó mã hóa mọi thứ không phải là ký tự chữ và số. Hãy dùng encodeURIComponent cho từng giá trị truy vấn riêng lẻ; đừng bao giờ dùng encodeURI trên một giá trị truy vấn do người dùng cung cấp (nó sẽ không thoát '&' và sẽ làm hỏng chuỗi truy vấn của bạn).
Base64 an toàn cho URL so với mã hóa URL là gì?
Đây là những khái niệm khác nhau. Mã hóa URL (công cụ này) thay thế từng ký tự đặc biệt một. Base64 an toàn cho URL là một biến thể của Base64 dùng '-' và '_' thay cho '+' và '/', để kết quả đã an toàn cho URL mà không cần mã hóa thêm.
Tại sao đôi khi '+' được giải mã thành dấu cách?
Trong application/x-www-form-urlencoded (gửi biểu mẫu), '+' là cách viết tắt của một dấu cách. Hầu hết các bộ giải mã giữ nguyên điều này. Trong phân tích cú pháp URI hiện đại, '%20' là cách mã hóa đúng của dấu cách. decodeURIComponent xử lý '+' như một '+' theo nghĩa đen; hãy dùng decodeURI hoặc một bộ giải mã biểu mẫu để chuyển '+' thành dấu cách.
Các ký tự không phải ASCII được mã hóa như thế nào?
Trước tiên chúng được chuyển thành các byte UTF-8 rồi sau đó mỗi byte được mã hóa theo phần trăm. Vì vậy, 'café' trở thành 'caf%C3%A9': 'é' là hai byte UTF-8 (0xC3 0xA9). Công cụ này xử lý UTF-8 đúng cách; một số công cụ cũ mã hóa bằng Latin-1, tạo ra kết quả khác.
Mã hóa URL có giống với mã hóa thực thể HTML không?
Không. Mã hóa URL (%XX) thoát các ký tự cho URL. Mã hóa thực thể HTML (&, <) thoát các ký tự cho mã đánh dấu HTML. Các ngữ cảnh là khác nhau; mã hóa cái này trong ngữ cảnh của cái kia là một lỗi XSS phổ biến.

Công cụ liên quan