❓ : Em triển khai tính năng tìm kiếm ở FE như thế nào?

😊 : Em tạo ô input cho người dùng nhập keyword rồi call API search

❓ : Mong muốn load lại trang vẫn giữ trạng thái?

😁 : Em thêm URL parameter ?search={keyword}

❓ : Ok, nếu keyword chứa dấu cách và ký tự '/' thì sao?

🤨 : ...

Trong lập trình web, việc truyền dữ liệu thông qua URL là việc xảy ra thường xuyên, từ thao tác gọi API, redirect route, đến xử lý query string. Tuy nhiên, không phải ký tự nào cũng có thể "an toàn" xuất hiện trong URL. Đây là lúc URLEncode phát huy tác dụng. Việc URLEncode không chỉ giúp truyền dữ liệu chính xác mà còn ngăn chặn các lỗi tiềm ẩn và rủi ro bảo mật, đặc biệt là khi làm việc với API hoặc redirect người dùng.

1. Tại sao cần URLEncode?

URL có một số ký tự đặc biệt như ?, =, &, #, /... mang ngữ nghĩa riêng trong giao thức HTTP. Nếu bạn truyền một chuỗi chứa các ký tự này vào URL mà không mã hóa, chúng có thể phá vỡ cấu trúc URL, gây lỗi hoặc hiểu sai dữ liệu.

Ví dụ:

URL đã bị phá hỏng do chứa dấu cách

2. Phương pháp URLEncode

JavaScript cung cấp hai hàm để triển khai URLEncode là encodeURI() và encodeURIComponent(). Mặc dù tên gọi của chúng khá giống nhau và đều mã hoá các thành phần của URL như dấu cách, các ký tự Unicode, ký tự đặc biệt nhưng chúng phục vụ các mục đích khác nhau trong việc xử lý URL.

Sự khác biệt cơ bản

• encodeURI: Được sử dụng để mã hóa toàn bộ URI, giữ nguyên các ký tự đặc biệt thuộc cú pháp URI như :, /, ?, &, =.
• encodeURIComponent: Giống như tên gọi "component", encodeURIComponent() sử dụng để mã hóa một thành phần cụ thể của URI, bao gồm cả các ký tự đặc biệt như &, /, =, ?.

Quay trở lại ví dụ ban đầu, cùng xem sự khác biệt rõ rệt giữa 2 phương thức này

encodeURI

• encodeURI() mã hóa Unicode và dấu cách, nhưng giữ lại &

• Vẫn lỗi logic vì & chưa được mã hóa → sai query string.

encodeURIComponent

encodeURIComponent() mã hóa tất cả ký tự đặc biệt, bao gồm & => Đảm bảo toàn bộ giá trị nằm gọn trong 'name=' mà không phá vỡ URL.

Khi nào sử dụng cái nào?

• Dùng encodeURI: Khi bạn có một URL hoàn chỉnh cần mã hóa.
• Dùng encodeURIComponent: Khi bạn cần mã hóa từng thành phần riêng lẻ của URL, chẳng hạn như giá trị tham số truy vấn.

3. Tổng kết

encodeURI() và encodeURIComponent() đều là giải pháp bảo vệ URL khỏi lỗi cấu trúc hoặc rủi ro bảo mật, điểm khác biệt nằm ở mức độ chi tiết trong quá trình mã hóa, nhưng mục tiêu cuối cùng là giống nhau.