Encode dan Decode URL, Dijelaskan untuk Developer
Ketik spasi ke dalam URL, atau kata dalam aksara Sirilik, atau ampersand yang merupakan bagian dari data Anda bukan dari alamatnya sendiri, dan ada sesuatu yang harus disesuaikan. Web hanya menjamin transport aman untuk sekumpulan kecil karakter ASCII yang dapat diprediksi. Semua yang lain harus dibungkus dalam format yang disepakati oleh router, server, dan browser. Format tersebut adalah percent-encoding, yang lebih umum disebut URL encoding, dan halaman ini memungkinkan Anda mengonversi teks ke salah satu arah langsung di browser Anda.
Apa sebenarnya percent-encoding itu
Aturannya mekanis dan mudah diikuti. Karakter apa pun yang tidak dapat muncul secara harfiah diganti dengan tanda % diikuti dua digit heksadesimal yang mengeja nilai byte karakter tersebut. Spasi menjadi %20. Tanda plus menjadi %2B. Tanda pagar menjadi %23. Ketika sebuah karakter memetakan ke beberapa byte, seperti kebanyakan teks non-ASCII dalam UTF-8, Anda cukup mendapatkan beberapa triplet berturut-turut: tanda euro menjadi %E2%82%AC. Decoding membalikkan proses tersebut, membaca setiap triplet kembali ke byte aslinya.
Konvensi ini didefinisikan dalam spesifikasi URI (RFC 3986) dan sengaja dibuat membosankan. Membosankan adalah intinya. Setiap klien dan server HTTP yang berperilaku baik di seluruh planet menerapkan aturan yang sama, sehingga tautan yang dikodekan dengan benar di satu tempat tiba dengan utuh di mana pun.
Mengapa ini harus ada
URL membawa dua jenis karakter dengan tugas yang sangat berbeda. Karakter yang dicadangkan seperti /, ?, #, &, = dan : bersifat struktural. Mereka memberi tahu parser di mana path berakhir dan query string dimulai, atau di mana satu parameter berhenti dan yang berikutnya mulai. Jika data Anda yang sebenarnya mengandung salah satu simbol tersebut, simbol itu harus dikodekan agar parser tidak menganggapnya sebagai tanda baca. Referensi pesanan seperti A&B/2024 yang dimasukkan mentah ke dalam query string akan dibaca salah sebagai dua parameter dan segmen path.
Lalu ada karakter tidak aman dan non-ASCII: spasi, tanda kutip, tanda kurung sudut, huruf beraksen, emoji, apa pun di luar rentang ASCII biasa. Karakter-karakter ini tidak boleh muncul secara harfiah dalam URL, baik karena bisa rusak dalam transit maupun karena tidak memiliki representasi yang terdefinisi. Mengenkodenya menjaga tautan tetap bersih dan dapat diprediksi daripada menyerahkan hasilnya pada nasib.
Di mana ini muncul dalam pekerjaan nyata
Query string adalah kasus klasiknya. Setiap nilai yang Anda tambahkan ke ?key=... harus dikodekan agar input pengguna tidak merusak struktur. Hal yang sama berlaku untuk pengiriman formulir HTML yang dikirim sebagai application/x-www-form-urlencoded, di mana browser mengenkode nilai field secara otomatis (dan, berdasarkan konvensi historis, mengubah spasi menjadi + daripada %20). Anda juga akan menemuinya saat membuat tautan yang mengarah ke halaman dengan judul non-Latin, saat membangun permintaan API secara manual, saat meneruskan target redirect sebagai parameter, dan saat men-debug mengapa permintaan yang terlihat baik-baik saja di address bar tiba dalam keadaan kacau di server.
encodeURI dibandingkan encodeURIComponent
JavaScript hadir dengan dua encoder, dan memilih yang salah adalah bug yang umum. Perbedaannya adalah soal cakupan. encodeURIComponent digunakan untuk satu bagian data, seperti satu nilai query. Ia mengenkode hampir semuanya, termasuk karakter yang dicadangkan /, ?, :, @, &, =, +, dan #. Itulah tepat yang Anda inginkan ketika data boleh mengandung simbol-simbol tersebut sebagai teks biasa.
encodeURI digunakan untuk seluruh alamat yang ingin Anda biarkan tetap berfungsi. Ia membiarkan karakter struktural tetap ada, sehingga garis miring, titik dua, dan tanda tanya yang menahan URL bersama-sama tetap bertahan. Gunakan ini ketika Anda memiliki URL lengkap dan hanya ingin membersihkan spasi atau karakter non-ASCII; gunakan encodeURIComponent setiap kali Anda menyisipkan nilai ke dalam URL yang lebih besar. Aturan praktis sederhana: enkode seluruh tautan dengan encodeURI, enkode bagian yang Anda masukkan dengan encodeURIComponent.
Semua tetap di mesin Anda
Alat ini berjalan sepenuhnya di browser Anda. Teks yang Anda tempelkan dikodekan atau didekode secara lokal dengan rutinitas standar yang sama dan tidak pernah berpindah ke server, sehingga aman digunakan untuk token, parameter yang ditandatangani, atau apa pun yang tidak ingin Anda kirimkan melalui jaringan. Jika Anda bekerja dengan transformasi teks lain, konverter Base64 ada di sampingnya, dan Anda dapat menelusuri set lengkap alat developer untuk pembantu sehari-hari lainnya.
Pertanyaan yang sering diajukan
Apa arti %20 dalam URL?
Itu adalah spasi yang dikodekan. Karakter spasi tidak diizinkan secara harfiah dalam URL, sehingga diganti dengan tanda persen dan nilai heksadesimal 20, yang merupakan nilai byte dari spasi.
Mengapa saya terkadang melihat tanda plus sebagai pengganti %20?
Data formulir HTML dengan tipe application/x-www-form-urlencoded mengenkode spasi sebagai tanda plus berdasarkan konvensi historis. Dalam path atau query normal, spasi dikodekan sebagai %20. Keduanya didekode kembali menjadi spasi dalam konteks yang tepat.
Kapan saya harus menggunakan encodeURIComponent daripada encodeURI?
Gunakan encodeURIComponent untuk satu nilai yang Anda sisipkan ke dalam URL, seperti parameter query, karena ia juga mengenkode karakter yang dicadangkan. Gunakan encodeURI untuk alamat lengkap ketika Anda ingin mempertahankan garis miring, titik dua, dan tanda tanya yang menopangnya.
Apakah URL encoding mengubah arti data saya?
Tidak. Encoding dapat dibalikkan sepenuhnya. Mendekode hasilnya memberikan kembali teks asli yang tepat, byte demi byte, selama set karakter yang sama digunakan di kedua ujungnya.
Bagaimana karakter non-ASCII seperti aksen atau emoji ditangani?
Mereka pertama kali diubah menjadi byte UTF-8, lalu setiap byte menjadi triplet persennya sendiri. Satu huruf beraksen atau emoji oleh karena itu dapat diperluas menjadi beberapa triplet dalam output yang dikodekan.
Apakah teks saya dikirim ke server saat menggunakan alat ini?
Tidak. Encoding dan decoding terjadi sepenuhnya di browser Anda. Tidak ada yang Anda tempelkan yang diunggah, sehingga aman digunakan dengan string privat atau sensitif.