Back to blog
Security

Dimana Tempat Paling Aman Menyimpan Token JWT: LocalStorage vs HttpOnly Cookie

Hampir semua pemula menyimpan Token Login (JWT) di LocalStorage karena mudah. Padahal, ini adalah celah keamanan tingkat tinggi yang paling diincar hacker.

super admin·20 Juni 2026·2 min read
Dimana Tempat Paling Aman Menyimpan Token JWT: LocalStorage vs HttpOnly Cookie
Article Content

LocalStorage: Laci Kaca yang Transparan

Jika kamu menonton tutorial MERN Stack di YouTube, instruktur biasanya akan mengajarkan cara login seperti ini: Server mengembalikan Token JWT, lalu *Frontend* menyimpannya menggunakan localStorage.setItem('token', jwtToken).
Lalu saat *Frontend* ingin mengambil data profil, ia memanggilnya dengan localStorage.getItem('token').

Mengapa ini sangat berbahaya?
Karena LocalStorage adalah penyimpanan yang bisa dibaca dan disentuh bebas oleh JavaScript. Jika websitemu memiliki celah XSS (Cross-Site Scripting) (seperti yang kita bahas di artikel sebelumnya), Hacker cukup menyuntikkan satu baris kode JS console.log(localStorage.getItem('token')) untuk mencuri "Kunci Master" dari seluruh pengunjung websitemu dalam hitungan detik!

Solusi Standar Industri: HttpOnly Cookies

Lembaga Keamanan Siber Global (seperti OWASP) merekomendasikan Token Login diserahkan penyimpanannya kepada HttpOnly Cookies.

Apa Sihir dari HttpOnly?

Saat Server (*Backend*) memvalidasi *password* dan memberikan Token JWT, Server tidak melempar teks tokennya dalam wujud JSON. Server akan menyisipkannya ke dalam sebuah Cookie yang dilabeli bendera keamanan HttpOnly dan Secure.

// Contoh di Express.js Backend
res.cookie('tokenLogin', jwtToken, {
  httpOnly: true,  // SANGAT PENTING: JavaScript Browser DILARANG membaca ini!
  secure: true,    // Hanya dikirim lewat HTTPS yang dienkripsi
  sameSite: 'strict', // Mencegah serangan CSRF
});
res.send("Login Sukses");

Bagaimana Frontend Menggunakannya?

Di sisi *Frontend* (React/Vue), KAMU TIDAK PERLU MELAKUKAN APA-APA! Kamu bahkan tidak bisa melihat wujud teks token tersebut di dalam kodemu karena disembunyikan kuat oleh Browser.

Ajaibnya, setiap kali *Frontend*-mu melakukan tembakan API (Fetch/Axios) ke Server, Browser akan secara otomatis, diam-diam, dan sangat aman menyisipkan Cookie tersebut di dalam saku (Header) *request*. Dan yang paling penting: Hacker XSS tidak akan pernah bisa membaca token tersebut meskipun ia menyuntikkan jutaan baris kode JavaScript jahat!

Mau langsung pakai template?

Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.

Browse Templates