Encoder dan decoder URL

Kenapa URL perlu di-encode

URL hanya boleh berisi sekumpulan terbatas karakter ASCII, dan beberapa di antaranya punya tugas khusus. ? memulai query string, & memisahkan parameter, = memisahkan nama dari nilainya, # memulai fragment, dan / memisahkan segmen path. Jika kata kunci pencarian atau nama file berisi salah satu karakter ini, browser atau server membacanya sebagai struktur, bukan data.

Percent-encoding menyelesaikan ini dengan menulis karakter bermasalah sebagai % diikuti dua digit heksadesimal. Spasi menjadi %20, & menjadi %26, / menjadi %2F. Karakter di luar ASCII lebih dulu diubah menjadi byte UTF-8 dan setiap byte di-encode terpisah, jadi é menjadi %C3%A9 dan satu emoji berubah menjadi empat grup %XX.

Situasi di mana Anda membutuhkannya:

• Menyusun tautan dengan kata kunci pencarian, URL redirect, atau alamat email sebagai parameter.
• Menaruh URL di dalam URL lain, misalnya nilai returnTo atau redirect_uri dalam alur login.
• Men-debug webhook dan tautan analitik yang datang sebagai sup % yang tak terbaca.
• Membaca log server, di mana path yang diminta dicatat dalam bentuk ter-encode.

Mode komponen dan mode URL lengkap

Kotak centang Encode URL lengkap (pertahankan :/?&=) memilih antara dua aturan yang berbeda, dan salah memilih adalah kekeliruan paling umum.

Bawaan: encode satu komponen

Jika kotak tidak dicentang, semua karakter kecuali huruf, angka, dan - _ . ! ~ * ' ( ) di-encode. Ini pilihan yang tepat untuk satu nilai yang akan diletakkan setelah = di query string atau di satu segmen path. Teks rock & roll/live menjadi rock%20%26%20roll%2Flive, yang aman diletakkan di ?q= tanpa merusak daftar parameter.

URL lengkap

Jika kotak dicentang, karakter yang membentuk struktur URL dipertahankan: : / ? # & = + , ; @ $ dan karakter yang disebutkan di atas. Spasi, huruf non-ASCII, dan beberapa karakter lain tetap di-encode. Gunakan ini jika Anda punya alamat lengkap yang hampir valid, misalnya https://example.com/files/annual report.pdf, dan hanya perlu membetulkan spasinya.

Mode URL lengkap tidak bisa membedakan & struktural dari & yang merupakan bagian dari nilai. Dalam https://shop.example/?q=salt & pepper, & dibiarkan apa adanya, dan server melihat parameter yang rusak. Dalam kasus itu, encode nilainya saja dalam mode komponen lalu tempelkan ke URL.

Spasi, tanda plus, dan encoding ganda

Ada dua konvensi untuk spasi. Encoding path dan URL umum memakai %20; pengiriman formulir HTML (application/x-www-form-urlencoded) memakai +. Encoder ini selalu menghasilkan %20, yang dipahami setiap server di kedua tempat.

Decoder mengubah + menjadi spasi sebelum mendekode, karena memang begitulah artinya di query string berformat formulir. Efek sampingnya: tanda plus literal yang tidak pernah di-encode, seperti C++ di path, didekode menjadi spasi. Jika teks asli memang berisi tanda plus, seharusnya dikirim sebagai %2B, dan bentuk itu didekode dengan benar.

Encoding ganda adalah jebakan klasik lainnya. Tanda % sendiri di-encode menjadi %25, jadi memasukkan string yang sudah ter-encode ke encoder sekali lagi mengubah %20 menjadi %2520. Jika Anda melihat %25 diikuti dua digit heksadesimal di tautan yang tidak berfungsi, dekode sekali dan periksa hasilnya.

Ketika decoding gagal

"String ter-encode tidak valid" muncul ketika % tidak diikuti dua digit heksadesimal, atau ketika byte-nya tidak membentuk UTF-8 yang valid. Penyebab umum:

• Tautan yang terpotong, putus di tengah urutan %C3%A9.
• Tanda persen literal, seperti dalam 50% off, yang tidak pernah di-encode.
• Teks yang di-encode dulu kala dengan code page satu byte lawas seperti Windows-1251 atau Latin-1, di mana é adalah %E9 alih-alih %C3%A9.

Untuk dua penyebab pertama, perbaiki bagian yang rusak secara manual. Untuk code page lawas tidak ada perbaikan otomatis yang andal, karena byte yang sama berarti huruf yang berbeda di code page yang berbeda.

Encoding terkait

Percent-encoding tidak sama dengan Base64, yang mengubah byte apa pun menjadi string ringkas, juga tidak sama dengan entitas HTML seperti &, yang dipakai untuk teks di dalam HTML. Untuk alamat yang mudah dibaca dari judul, Pembuat slug URL memberi hasil lebih rapi daripada encoding: My Trip to Kraków menjadi my-trip-to-krakow alih-alih My%20Trip%20to%20Krak%C3%B3w.

Encoding dan decoding berjalan di browser Anda, jadi token atau parameter privat di dalam URL tidak dikirim ke mana pun.