Jangan Simpan JWT Token di LocalStorage: Cara Saya Bikin Autentikasi HttpOnly Cookie yang Kebal XSS

Waktu melakukan security review pada beberapa web app korporat, saya masih sering menemukan developer yang menyimpan accessToken dan refreshToken di window.localStorage. Padahal satu celah XSS dari package npm pihak ketiga saja sudah cukup bagi penyerang untuk menguras seluruh sesi login pengguna.

Mengapa LocalStorage Sangat Rentan?

LocalStorage bisa diakses oleh skrip JavaScript apa pun yang berjalan di halaman web Anda (document.cookie / localStorage.getItem()). Jika ada satu dependency eksternal yang disisipi kode jahat (Supply Chain Attack), token auth langsung bisa dikirimkan ke server penyerang dalam hitungan milidetik.

Solusi Aman: HttpOnly, Secure, & SameSite=Strict

Dengan menyetel token ke dalam cookie berflag HttpOnly, browser melarang total akses dari JavaScript. Script nakal tidak akan pernah bisa membaca isi token tersebut.

Implementasi di Backend Node.js / Express

// Menyetel cookie saat login berhasil
res.cookie('token', accessToken, {
    httpOnly: true,       // Mencegah akses via document.cookie
    secure: true,         // Wajib HTTPS
    sameSite: 'strict',   // Kebal dari serangan CSRF
    maxAge: 3600 * 1000,  // Expire dalam 1 jam
    path: '/'
});

Implementasi di PHP Modern

setcookie('auth_token', $jwt, [
    'expires' => time() + 3600,
    'path' => '/',
    'domain' => 'ahmadfauzi.id',
    'secure' => true,
    'httponly' => true,
    'samesite' => 'Strict'
]);

Bagaimana Cara Frontend Tahu User Sedang Login?

Cukup buatkan endpoint ringan GET /api/me. Karena browser otomatis melampirkan cookie HttpOnly di setiap request ke domain yang sama, backend tinggal memverifikasi token dan mengembalikan data profil user (nama, role, avatar) tanpa pernah mengekspos raw secret token ke memori browser.