Công cụ dành cho nhà phát triển · Bộ mã hóa và giải mã URL
Hàm tạo URL mã hóa cho bạn: bộ mã hóa phần trăm của trình duyệt
· Cách thức hoạt động
url-encoding javascript cái gì thế web-apis
URL API âm thầm mã hóa phần trăm một số ký tự và giữ nguyên các ký tự khác, tùy thuộc vào phần nào của URL mà chúng xuất hiện. Bài đăng này giải thích bộ mã hóa WHATWG và cách dự đoán kết quả.
Không gian đã trở thành %20 và | vẫn ở lại - một trường hợp cụ thể trong đó new URL() đã mã hóa một phần đường dẫn
Khi new URL("https://example.com/hello world") chạy, không gian sẽ trở thành %20 trong im lặng. Nhưng URL("https://example.com/hello|world") mới khiến đường ống không bị ảnh hưởng. Sự khác biệt này không phải là ngẫu nhiên. Tiêu chuẩn WHATWG URL xác định các bộ ký tự riêng biệt để mã hóa cho từng thành phần URL: mỗi đường dẫn, truy vấn, đoạn và thông tin người dùng đều có quy tắc riêng. Hiểu các bộ này có nghĩa là dự đoán những gì hàm tạo sẽ làm.
Không gian cần mã hóa phần trăm vì không an toàn trên HTTP và làm hỏng khả năng đọc. Đường ống thì khác: không phải là ký tự dành riêng để phân chia cấu trúc, vì vậy trình duyệt sẽ để nguyên nó. Ranh giới giữa sự an toàn và khả năng đọc được vạch ra bởi WHATWG chứ không phải phỏng đoán. Kiểm tra "hello world" hiển thị mã hóa; việc kiểm tra "hello|world" sẽ tiết lộ ranh giới cho từng phần URL.
Một URL, một số bộ mã hóa — mỗi đường dẫn, truy vấn, đoạn và thông tin người dùng đều có danh sách ký tự riêng để thoát
Một URL chứa nhiều vùng, mỗi vùng có quy tắc mã hóa riêng. Đường dẫn đi theo một tập hợp, truy vấn một tập hợp khác, phân đoạn thứ ba, thông tin người dùng thứ tư. Khoảng trắng trở thành %20 trong đường dẫn và truy vấn. Dấu bằng vẫn nằm trong truy vấn, trong đó nó phân tách các khóa và giá trị, nhưng EncodeURIComponent biến nó thành %3D. Hàm tạo URL biết ngữ cảnh của nó và áp dụng các quy tắc chính xác cho từng phần.
Bộ mã hóa chính xác và nhỏ gọn. Đường dẫn có danh sách ký tự riêng; truy vấn có danh sách tương tự nhưng khác. Điều này phản ánh những ký tự có ý nghĩa cấu trúc. Dấu gạch chéo lên sẽ chia tách các đoạn đường dẫn, do đó, EncodeURIComponent mã hóa nó thành %2F. Trong đoạn, dấu gạch chéo về phía trước có thể tồn tại mà không phá vỡ bất cứ điều gì. Hiểu quy tắc WHATWG có nghĩa là dự đoán đầu ra mà không cần chạy mã.
Tại sao mã hóa phần trăm là một chiều: những gì được mã hóa vẫn giữ nguyên như vậy
Hàm tạo URL thực hiện chuẩn hóa một chiều. Chuyển "%20" sang URL mới và nó tạo ra %20 không thay đổi. Hàm tạo nhận ra nó đã được mã hóa và để nó yên. Đây là lý do tại sao mã hóa kép lại quan trọng: mã hóa một lần, chuyển qua hàm tạo và các thanh mã hóa. Hàm tạo không giải mã, diễn giải lại và mã hóa lại; nó đọc tiếp.
Thuộc tính một chiều này ảnh hưởng đến các ứng dụng tin cậy URL.href là chuẩn. Nếu bạn nối đầu vào của người dùng với đường dẫn của mình, đầu vào sẽ được chuẩn hóa nhưng không được giải mã. Giá trị như "my+tệp" vẫn giữ nguyên hoặc trở thành "my%2Bfile" trong một số ngữ cảnh. Mã sau này sử dụng giải mãURIComponent có thể đọc dấu cộng dưới dạng khoảng trắng nếu từ dữ liệu biểu mẫu. Hàm tạo bình thường hóa một lần; sau đó, giá trị của bạn được cố định.
Ví dụ hoạt động: chuyển cùng một chuỗi lộn xộn qua new URL() và đọc href, pathname và searchParams - ba chế độ xem khác nhau
Lấy "hello world&foo=bar|test#anchor" và đưa nó vào URL mới với các thành phần khác nhau. Không gian trở thành %20 ở mọi nơi. Ký hiệu và trong đường dẫn vẫn giữ nguyên (không có ý nghĩa cấu trúc ở đó), nhưng trong truy vấn nó cũng giữ nguyên (tách các tham số, do đó việc chuẩn hóa sẽ làm mất ranh giới giữa "q=" và "foo=bar"). Đường ống và hàm băm hoạt động khác nhau tùy theo vị trí.
Đọc href, tên đường dẫn và searchParams hiển thị ba chế độ xem khác nhau. tên đường dẫn hiển thị đường dẫn được mã hóa mà không có lược đồ, máy chủ hoặc truy vấn. searchParams cung cấp các tham số đã được giải mã, vì vậy "hello+world" từ dữ liệu biểu mẫu sẽ trở thành khoảng trắng. Thuộc tính tìm kiếm giữ nguyên chuỗi ký tự. href hiển thị URL đã được chuẩn hóa hoàn chỉnh. Chúng cùng tồn tại trên một đối tượng; việc sử dụng tùy thuộc vào bước tiếp theo của bạn.
URLSearchParams và quy tắc mã hóa biểu mẫu - tại sao nó tạo ra + cho dấu cách trong khi tên đường dẫn tạo ra %20
URLSearchParams áp dụng mã hóa biểu mẫu: dấu cách trở thành dấu cộng chứ không phải %20. URLSearchParams mới({q: "hello world"}) tạo ra "q=hello+world", không phải "q=hello%20world". Đây là quy tắc lịch sử của ứng dụng/x-www-form-urlencoded. Nhưng nếu bạn chuyển chuỗi này dưới dạng truy vấn thô sang URL mới, thì dấu cộng vẫn là dấu cộng; chỉ URLSearchParams giải mã nó dưới dạng khoảng trắng. Hàm tạo trung thành với những gì nó nhìn thấy.
Sự khác biệt dấu cộng này gây ra các lỗi phổ biến. URL từ thanh địa chỉ sử dụng %20 cho dấu cách. Dữ liệu biểu mẫu sử dụng dấu cộng. Nếu bạn giải mã bằng decodeURIComponent (đọc dấu cộng theo nghĩa đen) thay vì URLSearchParams.get, dấu cách sẽ trở thành ký tự dấu cộng. Bộ mã hóa và giải mã URL hiển thị cả hai: dán "hello+world" và so sánh các chế độ thành phần và biểu mẫu để xem vị trí xuất hiện khoảng trắng.
So sánh với mã hóaURI - nơi cả hai đồng ý và nơi chúng phân kỳ
Hàm tạo URL và mã hóaURIComponent là các công cụ khác nhau. EncodeURIComponent mã hóa hầu hết mọi thứ ngoại trừ các chữ cái, chữ số và - _ . ! ~ * ' ( ). Nó giả định không có bối cảnh. Hàm tạo URL phân tích cú pháp URL thực tế và áp dụng quy tắc WHATWG cho mỗi thành phần. EncodeURIComponent biến "hello/world" thành "hello%2Fworld"; URL mới xem dấu gạch chéo là dấu phân cách đường dẫn. Đầu vào giống nhau, đầu ra khác nhau.
Sử dụng EncodeURIComponent khi xây dựng URL bằng cách ghép các phần. Sử dụng URLSearchParams hoặc hàm tạo URL cho URL hoàn chỉnh hoặc một phần. Không sử dụng toàn bộ mã hóaURIComponent URL; bạn sẽ làm sai kế hoạch. So sánh kết quả với ý định. Trình duyệt thực thi các ý kiến cấu trúc URL và URL mới triển khai chúng. Bộ mã hóa và giải mã URL hiển thị cả hai chế độ xem cạnh nhau.
Điều này không bao gồm những gì — phân tích cú pháp máy chủ, IDNA và các lược đồ đặc biệt và không đặc biệt
Tiêu chuẩn WHATWG URL là nguồn gốc của sự thật, mặc dù việc đọc nó đòi hỏi sự kiên nhẫn. Bộ mã hóa được xác định trong các đoạn thuật toán chứ không phải danh sách đơn giản. Trong thực tế, việc hiểu nguyên tắc quan trọng hơn việc ghi nhớ các bài học. Đường dẫn cho phép nhiều ký tự hơn (dấu gạch chéo có cấu trúc); truy vấn có quy tắc riêng của nó; đoạn có ít hạn chế nhất (được xử lý phía máy khách, không bao giờ được gửi đến máy chủ). Mỗi thành phần có quy tắc riêng; biết điều này sẽ cho bạn biết nơi để tìm.
Chuẩn hóa và xác nhận là các ranh giới khác nhau. Hàm tạo chuẩn hóa: làm sạch mã hóa phần trăm, áp dụng các quy tắc thành phần, đưa ra dạng chuẩn. Nó không xác thực: các ký tự không hợp lệ được ném ra, nhưng các máy chủ trống vẫn được chấp nhận. Hàm tạo rất nghiêm ngặt về định dạng nhưng khoan dung trong việc diễn giải. Để biết thông số kỹ thuật tuân thủ chính xác, hãy đọc phần byte được mã hóa phần trăm của WHATWG. Đối với công trình xây dựng hàng ngày, hãy sử dụng URLSearchParams, URL API và các ví dụ thực tế.
Bài học rút ra: trình phân tích cú pháp có ý kiến — cách bộ mã hóa và giải mã URL hiển thị cho bạn mã hóa phần trăm đơn giản của một giá trị hoặc địa chỉ để bạn có thể so sánh nó với những gì trình duyệt tạo ra
Các tính năng WHATWG không được hỗ trợ ở đây bao gồm phân tích cú pháp máy chủ với chuyển đổi IDNA (tên miền quốc tế thành ASCII) và xử lý sơ đồ đặc biệt so với không đặc biệt. Tệp: URL sử dụng quyền gạch chéo kép; dữ liệu: URL thì không. Hàm tạo thực thi các quy tắc này. Việc chuyển đổi tên máy chủ và xác định trạng thái đặc biệt thuộc về việc đọc thông số kỹ thuật chứ không phải mã hóa phần trăm. Điều này quan trọng khi xây dựng URL trên các sơ đồ khác nhau.
Kiểm tra cấu trúc URL của bạn bằng cách so sánh cách diễn giải của trình duyệt với kỳ vọng. Xây dựng với URL mới, đọc các thuộc tính quan trọng: href cho biểu mẫu hoàn chỉnh, tên đường dẫn cho đường dẫn, tìm kiếm truy vấn thô, searchParams để giải mã. Nếu kết quả đầu ra làm bạn ngạc nhiên, hãy dán vào bộ mã hóa & giải mã URL và thực hiện chuyển đổi từng bước. Công cụ này hiển thị đầu ra được chuẩn hóa cùng với mã hóa thô, cho thấy sự khác biệt. Hiểu bộ WHATWG có nghĩa là hiểu các lựa chọn của trình duyệt và cách làm việc với chúng.