Base64 vs URL Encoding

Base64 encoding dan URL encoding (percent encoding) melayani tujuan yang berbeda dalam pengembangan web. Memahami kapan menggunakan masing-masing sangat penting. Meskipun keduanya adalah skema encoding yang mengubah data menjadi representasi berbeda, keduanya memecahkan masalah yang fundamental berbeda. Base64 dirancang untuk mengubah data biner sembarang menjadi format teks ASCII yang aman, sementara URL encoding memastikan bahwa karakter khusus dalam URL ditransmisikan dengan aman melalui internet. Memilih encoding yang salah untuk kasus penggunaan Anda dapat menyebabkan kerusakan data, URL rusak, kerentanan keamanan, atau ukuran payload yang membengkak secara tidak perlu.

Pengembang sering menghadapi situasi di mana mereka harus memutuskan antara kedua metode encoding ini. Misalnya, ketika menyertakan token autentikasi dalam parameter query URL, Anda mungkin bertanya-tanya apakah akan menggunakan Base64 encoding atau URL encoding. Jawabannya tergantung pada sifat data, batasan media transmisi, dan persyaratan sistem penerima. Panduan ini memberikan perbandingan komprehensif untuk membantu Anda membuat pilihan yang tepat.

Memahami URL Encoding

URL encoding, juga dikenal sebagai percent encoding, mengubah karakter menjadi format yang dapat ditransmisikan melalui internet. Spesifikasi URL (RFC 3986) mendefinisikan karakter mana yang diizinkan tanpa reservasi dalam URL dan mana yang harus di-encode. Karakter tanpa reservasi meliputi huruf besar dan kecil, digit, dan karakter tanda hubung (-), garis bawah (_), titik (.), dan tilde (~). Semua karakter lainnya harus di-encode persen jika muncul dalam URL.

Spasi menjadi %20, dan karakter khusus diganti dengan nilai heksadesimal ASCII mereka yang diawali dengan %. Proses encodingnya sederhana: setiap byte yang bukan karakter tanpa reservasi diganti dengan % diikuti dengan representasi heksadesimal dua digitnya. Misalnya, string hello world menjadi hello%20world, dan a&b=c menjadi a%26b%3Dc.

Mengapa URL Encoding Diperlukan

URL memiliki set karakter yang terbatas karena alasan historis dan praktis. Spesifikasi URL asli dirancang ketika internet terutama mentransmisikan teks ASCII 7-bit. Karakter di luar rentang ini, atau karakter yang memiliki arti khusus dalam URL (seperti ?, #, dan &), harus di-encode untuk mencegahnya disalahartikan oleh parser URL.

Misalnya, karakter & digunakan untuk memisahkan parameter query. Jika data Anda mengandung &, itu akan ditafsirkan sebagai pemisah parameter daripada sebagai data. URL encoding mengubah & menjadi %26, memastikan itu diperlakukan sebagai bagian dari nilai parameter. Demikian pula, karakter # menandai awal dari fragmen URL; %23 memastikan itu muncul sebagai data.

URL encoding juga memungkinkan penyertaan karakter non-ASCII dalam URL melalui encoding UTF-8. Misalnya, karakter Unicode U+00E9 (é) di-encode sebagai %C3%A9 dalam URL. Ini memungkinkan nama domain dan jalur yang diinternasionalisasi untuk direpresentasikan dalam spesifikasi URL yang hanya ASCII.

Karakter URL Encoding Umum

Karakter spasi layak mendapat perhatian khusus karena memiliki dua kemungkinan encoding. Dalam string query, spesifikasi application/x-www-form-urlencoded meng-encode spasi sebagai + daripada %20. Perilaku warisan ini berasal dari pengiriman formulir HTML. Saat meng-encode data untuk parameter query, Anda harus menggunakan + untuk spasi jika mengikuti konvensi encoding formulir, atau %20 untuk spasi di komponen URL lainnya seperti jalur.

URL Encoding di Berbagai Komponen URL

Bagian yang berbeda dari URL memiliki persyaratan encoding yang berbeda. Komponen jalur tidak boleh meng-encode / karena memisahkan segmen jalur. Komponen query tidak boleh meng-encode ? atau & karena memiliki arti khusus dalam string query. Namun, jika data Anda mengandung karakter ini, mereka harus di-encode: ? menjadi %3F, & menjadi %26.

Komponen fragmen (setelah #) memiliki aturan encoding yang paling longgar karena fragmen tidak pernah dikirim ke server. Namun, encoding tetap disarankan untuk menghindari ambiguitas dalam parsing sisi klien.

Memahami Base64 Encoding

Base64 mengubah data biner menjadi teks ASCII menggunakan alfabet 64 karakter. Alfabet ini terdiri dari A-Z, a-z, 0-9, +, dan /, dengan = digunakan untuk padding. Set 64 karakter ini memastikan bahwa output yang di-encode hanya terdiri dari karakter ASCII yang aman secara universal, meskipun karakter + dan / memerlukan URL encoding tambahan ketika digunakan dalam URL.

Base64 encoding bekerja dengan memproses data input dalam kelompok 3 byte (24 bit). 24 bit ini dibagi menjadi empat kelompok 6-bit, dan setiap nilai 6-bit (0-63) dipetakan ke karakter dalam alfabet Base64. Jika panjang input bukan kelipatan 3 byte, karakter padding (=) ditambahkan untuk membuat panjang output menjadi kelipatan 4 karakter.

Tujuan utama Base64 encoding adalah membuat data biner aman untuk saluran transportasi berbasis teks. Email (MIME), JSON, XML, dan header HTTP adalah protokol berbasis teks yang tidak dapat menangani data biner mentah dengan andal karena byte biner dapat ditafsirkan sebagai karakter kontrol atau dapat dimodifikasi oleh lapisan transportasi.

Perbedaan Utama

Perbedaan fundamental antara Base64 dan URL encoding berasal dari tujuan dan batasan desain yang berbeda.

Base64 selalu memperluas data sekitar 33 persen terlepas dari konten input, karena setiap 3 byte input menjadi 4 karakter output. URL encoding memperluas data dengan jumlah yang bervariasi. Huruf dan digit ASCII tidak diperluas sama sekali (1 byte menjadi 1 byte). Spasi diperluas dari 1 byte menjadi 3 byte (%20). Karakter di luar rentang ASCII, yang di-encode sebagai UTF-8, diperluas lebih banyak: satu karakter Unicode mungkin menjadi 2 atau 3 byte UTF-8, masing-masing di-encode sebagai %XX, menghasilkan 6 atau 9 byte dalam URL.

Set karakter juga berbeda secara signifikan. Output Base64 menggunakan set tetap 65 karakter, sementara URL encoding dapat menghasilkan karakter apa pun dalam bentuk %XX. Ini berarti output Base64 lebih ringkas untuk data biner tetapi tidak dapat merepresentasikan karakter di luar alfabetnya tanpa encoding sekunder. URL encoding lebih fleksibel tetapi kurang efisien ruang untuk data biner.

Base64 Aman URL (Base64URL)

Karena Base64 standar menggunakan + dan / sebagai bagian dari alfabetnya, data yang di-encode Base64 tidak dapat digunakan langsung dalam URL tanpa URL encoding tambahan. Untuk mengatasi ini, varian Base64URL diperkenalkan. Base64URL mengganti + dengan - dan / dengan _, serta menghilangkan karakter padding =. Substitusi ini menghasilkan output yang aman untuk URL tanpa memerlukan percent encoding.

Base64URL digunakan oleh JWT (JSON Web Token), yang meng-encode header dan payload mereka menggunakan varian ini. Ketika Anda melihat token JWT seperti eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0.dQw4w9WgXcQ, dua segmen pertama adalah Base64URL-encoded.

Kapan Menggunakan Masing-Masing

Tabel berikut memberikan panduan cepat untuk skenario umum.

Memilih Encoding yang Tepat

Ikuti panduan ini ketika memutuskan antara Base64 dan URL encoding.

Gunakan Base64 ketika:

• Anda perlu mentransmisikan data biner (gambar, dokumen, data terenkripsi) melalui protokol berbasis teks.
• Anda ingin menyematkan data inline dalam HTML, CSS, atau JSON (data URI).
• Anda meng-encode data untuk lampiran email MIME.
• Anda membuat token autentikasi atau gumpalan data buram lainnya.

Gunakan URL encoding ketika:

• Anda menyusun URL atau string query dengan karakter khusus.
• Anda memproses data formulir yang dikirim melalui application/x-www-form-urlencoded.
• Anda perlu meng-encode data teks untuk digunakan dalam segmen jalur URL, parameter query, atau fragmen.
• Anda meng-encode nilai cookie yang mungkin mengandung karakter khusus.

Menggabungkan Encoding

Dalam beberapa kasus, Anda mungkin perlu menggunakan kedua encoding bersama-sama. Misalnya, jika Anda melewatkan nilai yang di-encode Base64 sebagai parameter query, Anda harus meng-encode URL output Base64 untuk memastikan bahwa karakter + dan = aman dalam URL. Encoding ganda ini umum dalam desain API di mana token atau identifier di-encode Base64 dan ditransmisikan sebagai parameter query.

const base64Data = btoa('some binary data');
const urlSafe = encodeURIComponent(base64Data);
// urlSafe is now safe for use in a URL

Di sisi penerima, Anda membalikkan prosesnya: pertama URL-decode, kemudian Base64-decode.

Contoh Praktis

Contoh 1: Menyematkan Gambar dalam HTML

Anda memiliki ikon PNG 1 KB yang ingin Anda sematkan dalam email HTML. Pendekatan yang benar adalah Base64 encoding:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...">

URL encoding tidak akan membantu di sini karena email HTML tidak mendukung data URI yang di-encode persen secara native.

Contoh 2: Melewatkan Query Pencarian dalam URL

Anda ingin membuat tautan pencarian yang menyertakan query "café & bakery". Pendekatan yang benar adalah URL encoding:

https://example.com/search?q=caf%C3%A9+%26+bakery

Menggunakan Base64 untuk ini akan menghasilkan URL yang jauh lebih panjang dan kurang mudah dibaca.

Contoh 3: Token Autentikasi API

API Anda menggunakan token yang menggabungkan ID pengguna dan timestamp, ditandatangani dengan HMAC. Token bersifat biner dan harus ditransmisikan sebagai parameter query. Pendekatan yang benar adalah Base64 (sebaiknya Base64URL) diikuti dengan URL encoding, atau cukup Base64URL jika lapisan transportasi menangani karakter khusus yang tersisa.

https://api.example.com/data?token=eyJ1c2VySWQiOjEyMywidGltZXN0YW1wIjoxNzA0MDAwMDAwfQ

Menggunakan URL encoding langsung pada token biner akan menghasilkan hasil yang jauh lebih panjang.