Cookies & Sessions — Web Fundamentals

HTTP adalah stateless — server tidak ingat siapa kamu antara satu request ke request berikutnya. Cookies dan sessions memecahkan masalah ini. Cookies: Cookie…

HTTP itu pelupa: tiap request (permintaan dari browser ke server) berdiri sendiri, jadi server gak tahu kalau request barusan datang dari orang yang tadi login. Cookie adalah catatan kecil yang server titipkan ke browser, lalu browser kirim balik otomatis di setiap request ke situs itu. Session adalah data pengguna yang disimpan di server, dan cookie cukup membawa ID untuk menemukannya.

🧪 Tebakan cepat: cookie yang diberi HttpOnly gak bisa dibaca JavaScript. Apa cookie itu masih ikut terkirim ke server? Tebak dulu, jawabannya ada di bagian "Atribut: aturan main sebuah cookie".

Server menitip, browser mengirim balik

Setelah kamu login, server menjawab dengan header Set-Cookie. Header adalah baris keterangan tambahan di request atau di response (jawaban server):

HTTP/1.1 200 OK
Set-Cookie: sesi=abc123; Path=/; Max-Age=3600; HttpOnly; Secure; SameSite=Lax

Mulai saat itu, tiap request ke situs yang sama membawa cookie-nya:

GET /akun HTTP/1.1
Host: toko.com
Cookie: sesi=abc123

Set-Cookie dikirim server. Bagian pertamanya, sesi=abc123, adalah nama dan nilai cookie.
Semua yang sesudah titik koma pertama adalah atribut: aturan kapan cookie boleh dikirim dan berapa lama disimpan.
Cookie: sesi=abc123 ditambahkan browser sendiri ke setiap request berikutnya ke toko.com. Kamu gak perlu menulis kode apa pun.

Kalau ada beberapa cookie, browser menggabungkannya di satu header, dipisah titik koma dan spasi: Cookie: tema=gelap; bahasa=id; sesi=abc123. Nilainya selalu teks. Satu cookie maksimal sekitar 4 KB (4096 byte), jadi isinya pendek: ID atau pilihan kecil, bukan data besar.

Atribut: aturan main sebuah cookie

Atribut yang punya nilai ditulis Nama=nilai. Flag, yaitu atribut tanpa nilai, cukup ditulis namanya.

Max-Age=3600: umur cookie dalam detik, di sini 1 jam. Max-Age=0 menghapus cookie, misalnya waktu logout. Tanpa Max-Age (atau Expires), cookie hilang waktu browser ditutup.
Path=/: cookie ikut ke semua halaman situs. Path=/akun cuma ikut ke /akun dan halaman di bawahnya.
Domain=toko.com: cookie juga ikut ke subdomain, misalnya api.toko.com. Tanpa Domain, cookie cuma ikut ke host yang membuatnya.
HttpOnly: JavaScript gak bisa membacanya lewat document.cookie, jadi script jahat yang menyusup ke halaman (XSS) gak bisa mencurinya. Cookie-nya tetap ikut di setiap request: itu jawaban tebakannya.
Secure: cookie cuma dikirim lewat HTTPS, gak pernah lewat http://.
SameSite: mengatur request yang datang dari situs lain. Strict: gak pernah ikut. Lax: ikut saat orang pindah ke situsmu lewat link, tapi gak ikut pada form POST atau fetch dari situs lain. None: selalu ikut, dan harus ditemani Secure. Kalau gak ditulis, Chrome dan Edge menganggapnya Lax.

Session: data di server, cookie cuma bawa ID

Pengguna bisa melihat dan mengubah cookie lewat DevTools, jadi data penting disimpan server sebagai session. Cookie cuma membawa ID acak yang susah ditebak:

1. Kamu login           server bikin session abc123 = { userId: 42 }
2. Server menjawab      Set-Cookie: sesi=abc123
3. Request berikutnya   Cookie: sesi=abc123
4. Server membaca ID    session abc123 milik user 42

Dengan alasan yang sama, token login lebih aman di cookie HttpOnly daripada di localStorage: semua JavaScript di halaman bisa membaca localStorage, termasuk script jahat hasil XSS.

Memecah dan menyusun teks cookie

Teks nama=nilai; nama=nilai dari header Cookie (atau dari document.cookie) bisa dipecah pakai split:

const teks = "tema=gelap; bahasa=id"

const pasangan = teks.split("; ")            // ["tema=gelap", "bahasa=id"]
const [nama, nilai] = pasangan[0].split("=") // "tema" dan "gelap"

Kebalikannya, teks Set-Cookie disusun di array lalu digabung pakai join. Atribut cuma di-push kalau memang dipakai, dan flag ditulis namanya saja:

const bagian = ["sesi=abc123"]
bagian.push("Max-Age=3600")
bagian.push("HttpOnly")

bagian.join("; ") // "sesi=abc123; Max-Age=3600; HttpOnly"

⚠️ Jebakan yang sering ketemu

Data penting di isi cookie. role=admin di cookie bisa diganti pengguna sendiri. Simpan di session, cookie cukup bawa ID.
SameSite=None tanpa Secure. Browser menolak cookie itu, jadi gak tersimpan sama sekali.
Max-Age dikira milidetik. Di header satuannya detik: satu hari itu 86400, bukan 86400000.
Bikin cookie HttpOnly dari JavaScript. Browser mengabaikannya. Cookie HttpOnly cuma bisa dibuat server lewat Set-Cookie.
Mengandalkan cookie pihak ketiga. Cookie yang dikirim waktu situsmu tampil di dalam situs lain (iframe, iklan) diblokir atau dipisah oleh Safari dan Firefox, dan pengguna Chrome juga bisa memblokirnya.

TL;DR: Server menitip cookie lewat Set-Cookie, dan browser mengirimnya balik di header Cookie di setiap request ke situs itu. Atribut mengatur aturannya: Max-Age umur dalam detik, Path dan Domain alamat yang dikirimi, HttpOnly menyembunyikannya dari JavaScript, Secure cuma lewat HTTPS, SameSite untuk request dari situs lain. Satu cookie maksimal sekitar 4 KB, jadi data pengguna disimpan di session server dan cookie cuma membawa ID-nya.