Cookie: Stempel Tangan di Konser

Stempel tangan di pintu konser

Masuk konser, tanganmu dicap. Setiap kali ke toilet dan kembali, penjaga melihat cap dan membiarkanmu masuk tanpa antre tiket lagi. Cookie adalah "cap tangan" versi web: data kecil yang diberikan server ke browser, lalu dikirim otomatis oleh browser di setiap request berikutnya ke domain yang sama.

Kenapa cookie ada (ingat HTTP stateless)

Karena HTTP tidak mengingat apa pun, server butuh cara menandai "browser ini sudah login sebagai user 42". Solusi tertua: server memberi cookie berisi session id, browser menyimpannya dan mengirimkannya otomatis setiap request. Server mencocokkan session id dengan datanya. Sederhana dan sudah terbukti puluhan tahun.

Contoh 1: server memberi cookie

HTTP/1.1 200 OK
Set-Cookie: session_id=abc123; Path=/; HttpOnly
Content-Type: application/json

{"pesan": "Login berhasil"}

Header Set-Cookie adalah perintah server: "simpan cookie bernama session_id." Browser menyimpannya dan mulai sekarang...

Contoh 2: browser mengirim otomatis

GET /api/profil HTTP/1.1
Host: toko.contoh.id
Cookie: session_id=abc123

...setiap request ke toko.contoh.id otomatis membawa Cookie: session_id=abc123, TANPA kode JavaScript apa pun. Inilah keajaiban cookie: autentikasi yang bekerja otomatis. Bandingkan dengan token Bearer yang harus dipasang manual di setiap fetch.

Kesalahan umum

Salah: menyimpan data besar di cookie. Cookie maksimal ~4KB dan dikirim di SETIAP request, memperberat semua request. Yang benar: simpan hanya session id; data besar di server atau localStorage.

Salah: mengira cookie bisa dibaca antar domain. Cookie terikat domain yang mengesetnya. Yang benar: butuh berbagi antar subdomain? Set Domain=.contoh.id.

Salah: tidak mengerti kenapa cookie tidak terkirim. Penyebab umum: request lintas origin tanpa credentials: "include" di fetch, atau atribut SameSite yang ketat. Yang benar: pahami aturan pengiriman cookie (modul atribut cookie).

Melihat cookie bekerja di DevTools

Latihan 2 menit untuk memahami cookie:

1. Buka website apa pun, tekan F12 > tab Application > Cookies.
2. Lihat daftar cookie: nama, value (mungkin terpotong), domain, dan expiry.
3. Buka tab Network, klik sebuah request, lihat Request Headers: ada header Cookie: yang membawa nilai-nilai tadi otomatis.
4. Hapus satu cookie, refresh halaman: perhatikan apa yang berubah (biasanya kamu logout atau preferensi hilang).

Setelah melihat langsung, konsep "server memberi, browser mengirim otomatis" tidak akan pernah terlupakan.

Perbedaan penting: cookie dikirim OTOMATIS di setiap request termasuk untuk gambar dan CSS, sedangkan token Bearer hanya dikirim di request yang kamu program. Inilah kenapa cookie boros untuk API yang dipanggil ribuan kali per menit, tapi nyaman untuk website klasik.

Catatan teknis: Di fetch(), cookie hanya dikirim otomatis untuk same-origin. Untuk cross-origin, tambahkan credentials: "include" dan pastikan server mengizinkan via CORS (Access-Control-Allow-Credentials: true).