Bộ mã hóa & giải mã URL

Mã hóa URL / percent thay thế các ký tự không an toàn hoặc mơ hồ trong URL bằng % theo sau là giá trị byte UTF-8 của chúng ở hex. Chế độ Thành phần sử dụng encodeURIComponent() và mã hóa mọi ký tự dành riêng — đúng cho các giá trị bạn nhúng trong query string hoặc đường dẫn. Chế độ URL đầy đủ sử dụng encodeURI(), giữ nguyên các ký tự cấu trúc URL như :/?#&=.

Ví dụ

Đầu vào:

hello world & café / 日本語

Mã hóa dưới dạng Thành phần:

hello%20world%20%26%20caf%C3%A9%20%2F%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Mã hóa dưới dạng URL đầy đủ:

hello%20world%20&%20caf%C3%A9%20/%20%E6%97%A5%E6%9C%AC%E8%AA%9E

Lưu ý rằng URL đầy đủ để & và / yên vì chúng có ý nghĩa cấu trúc trong URL.

Lỗi và cạm bẫy thường gặp

Hầu hết các vấn đề mã hóa đến từ việc chọn sai chế độ hoặc chạy công cụ hai lần trên cùng một đầu vào. Các mục bên dưới đề cập đến các trường hợp chúng tôi thấy thường xuyên nhất.

• Sử dụng encodeURI cho các giá trị truy vấn. encodeURI("a&b=c") trả về a&b=c (không thay đổi), điều này phá vỡ query string. Sử dụng chế độ Thành phần (encodeURIComponent) cho các giá trị.
• Mã hóa kép. Mã hóa hello%20world lần thứ hai tạo ra hello%2520world. Giải mã trước hoặc bỏ qua một lớp.
• Quên #. Một # bên trong một giá trị truy vấn được coi là bắt đầu fragment trừ khi được mã hóa thành %23.
• Nhầm lẫn dấu cộng. + có nghĩa là dấu cách trong các body được mã hóa form nhưng là + chữ trong đường dẫn URL hoặc truy vấn. Để gửi một dấu cộng thật trong giá trị truy vấn, mã hóa nó thành %2B.
• Chuỗi percent sai định dạng. Một % chữ không bao giờ được mã hóa khiến decodeURIComponent ném URI malformed. Hoặc mã hóa % thành %25 hoặc loại bỏ các percent đơn lẻ trước khi giải mã.
• UTF-8 vs máy chủ legacy Latin-1. Công cụ này luôn sử dụng UTF-8. Một số hệ thống rất cũ mong đợi Latin-1 / windows-1252 — ở đó é là %E9, không phải %C3%A9. Nếu bạn thấy mojibake, đầu kia không phải UTF-8.

Sự khác biệt giữa encodeURI và encodeURIComponent là gì?

encodeURIComponent escape mọi thứ không phải là chữ cái, chữ số, hoặc một trong -_.!~*'(), nên nó an toàn cho các giá trị truy vấn và phân đoạn đường dẫn riêng lẻ. encodeURI để các ký tự dành riêng URL như :/?#&= yên, nên nó để mã hóa toàn bộ URL đã có cấu trúc. Sử dụng Thành phần 95% thời gian; chỉ sử dụng URL đầy đủ khi bạn có một URL hầu hết hợp lệ với các dấu cách hoặc Unicode lạc.

Những ký tự nào thực sự cần mã hóa trong một query string?

Các dấu phân cách query string & và = phải được mã hóa bên trong một giá trị (nếu không chúng trông giống dấu phân cách). Dấu cách trở thành %20 hoặc +. Dấu fragment # phải được mã hóa. Cộng: /, ?, mọi thứ không phải ASCII, và các ký tự điều khiển. encodeURIComponent xử lý tất cả những điều này; encodeURI để &, =, /, ?, # không được mã hóa vì chúng là cấu trúc URL.

Tại sao URL của tôi đang bị mã hóa kép?

Mã hóa kép xảy ra khi bạn mã hóa một giá trị đã được mã hóa. Một dấu cách trở thành %20, sau đó chính % trở thành %25, cho %2520. Thường do truyền một URL đã được mã hóa qua encodeURIComponent một lần nữa, hoặc bởi một framework tự động mã hóa trên đỉnh của mã hóa thủ công của bạn. Giải mã một lần và mã hóa lại sạch sẽ, hoặc bỏ qua một lớp.

Cách này xử lý các ký tự không phải ASCII như emoji hoặc chữ có dấu như thế nào?

Các bộ mã hóa của JavaScript chuyển đổi các ký tự không phải ASCII sang byte UTF-8 trước, sau đó mã hóa percent mỗi byte. Vì vậy é trở thành %C3%A9 (hai byte) và một emoji như 😀 trở thành %F0%9F%98%80 (bốn byte). Giải mã đảo ngược quy trình. Đây là hành vi RFC 3986 tiêu chuẩn và hoạt động với mọi máy chủ hiện đại.

Tại sao giải mã thất bại với "URI malformed"?

decodeURIComponent ném khi thấy một chuỗi percent không hợp lệ — một % đơn lẻ không theo sau bởi hai chữ số hex (ví dụ %ZZ hoặc chỉ %), hoặc các chuỗi byte UTF-8 không hợp lệ (ví dụ %C3 không có byte tiếp nối hợp lệ). Nguyên nhân phổ biến: một % chữ trong đầu vào không bao giờ được mã hóa, hoặc một chuỗi đã được giải mã một lần và vẫn có các dấu percent trong đó.

Dấu cách có nên trở thành + hay %20?

Cả hai đều thấy trong thực tế. %20 đúng ở mọi nơi — trong đường dẫn, query string và fragment. Lối tắt + chỉ có nghĩa là "dấu cách" bên trong định dạng application/x-www-form-urlencoded được sử dụng bởi các submission form HTML. Công cụ này sử dụng %20 vì encodeURIComponent làm vậy. Nếu bạn cần + cụ thể, thay %20 bằng + sau khi mã hóa.