API, Autentikasi, dan Keamanan · 4/7

Session, cookie, dan token

Bagaimana server mengingat siapa kamu, dan kenapa httpOnly bukan pilihan opsional.

Baca 32 menit

Setelah pelajaran ini kamu bisa

Menjelaskan bagaimana protokol stateless bisa mengingat seorang user
Mengatur cookie dengan flag keamanan yang tepat
Memilih antara session database dan token
Menjelaskan kenapa token session di-hash sebelum disimpan

HTTP bersifat stateless: server tidak punya memori tentang request terakhirmu. Jadi setelah login berhasil, server memberi browser sebuah token, dan browser mengirimkannya kembali di setiap request berikutnya. Itu seluruh isi sebuah session.

const store = await cookies();
store.set("session", token, {
  httpOnly: true,                                  // JavaScript cannot read it
  secure: process.env.NODE_ENV === "production",   // HTTPS only
  sameSite: "lax",                                 // not sent on cross-site POSTs
  path: "/",
  expires: expiresAt,
});

Ini createSession dari proyek ini, tanpa perubahan. Setiap flag di situ punya fungsi penting.

Flag	Mencegah
`httpOnly`	Bug XSS membaca cookie-nya dengan `document.cookie`
`secure`	Cookie berjalan lewat HTTP biasa di mana ia bisa dibaca
`sameSite: "lax"`	Cookie terkirim pada POST lintas situs — pertahanan CSRF
`expires`	Cookie yang dicuri bekerja selamanya
`path`	Mengirimnya ke route yang tidak membutuhkannya

Dua desain

	Session database	Token bertanda tangan (JWT)
Cookie menyimpan	Sebuah id acak	Datanya sendiri, bertanda tangan
Biaya verifikasi	Satu pencarian database	Tanpa pencarian sama sekali
Pencabutan	Hapus row-nya — seketika	Sulit: ia valid sampai kedaluwarsa
Memuat data user	Tidak	Ya, bisa dibaca siapa pun yang memegangnya
Cocok untuk	Aplikasi web biasa	Banyak layanan, atau tanpa database bersama

Hash token-nya sebelum disimpan

Cookie-nya menyimpan token acak. Database hanya menyimpan SHA-256-nya. Kalau seseorang mendapatkan salinan database, yang mereka dapat adalah hash yang tidak bisa diubah kembali jadi cookie yang berfungsi.

Coba sendiri

Pembuatan token sungguhan dan SHA-256 sungguhan. Perhatikan kenapa hash biasa tepat di sini, berbeda dari untuk password.

function createToken() {
  // 32 bytes = 256 bits from a cryptographically secure source.
  const bytes = crypto.getRandomValues(new Uint8Array(32));
  return btoa(String.fromCharCode(...bytes))
    .replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");   // base64url
}

const encoder = new TextEncoder();
async function sha256(text) {
  const d = await crypto.subtle.digest("SHA-256", encoder.encode(text));
  return [...new Uint8Array(d)].map((b) => b.toString(16).padStart(2, "0")).join("");
}

const token = createToken();
const stored = await sha256(token);

console.log("cookie sent to the browser:");
console.log("   " + token);
console.log("row stored in the database:");
console.log("   " + stored);
console.log("");
console.log("A database dump gives an attacker the second value.");
console.log("There is no way to compute the first from it.");
console.log("");

// Tokens must never collide.
const seen = new Set();
for (let i = 0; i < 5000; i++) seen.add(createToken());
console.log("5000 tokens generated, distinct:", seen.size);
console.log("token length:", token.length, "characters of base64url");
console.log("");
console.log("Why is a PLAIN SHA-256 right here, when passwords need scrypt?");
console.log("Because there is nothing to guess. A password might be 'password123';");
console.log("this token is 256 random bits. Slow hashing defends against guessing,");
console.log("and nobody can guess this.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Masuk ke proyek ini, lalu buka DevTools → Application → Cookies. Temukan cookie session dan pastikan HttpOnly serta SameSite-nya diatur. Sekarang jalankan document.cookie di console — cookie session-nya tidak ada, karena httpOnly menyembunyikannya dari script. Lalu lihat tabel sessions di database dan pastikan nilai yang tersimpan di sana bukan nilai yang ada di browser-mu.

Hasil yang diharapkan

HttpOnly tercentang, tidak ada di document.cookie, dan hash hex 64 karakter di database.