
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