Cookies, LocalStorage, dan SessionStorage: Perbedaan dan Risiko Keamanan

Website modern sering menyimpan informasi di browser agar pengalaman pengguna terasa lebih praktis. Contohnya, situs dapat mengingat preferensi tema, menyimpan isi keranjang belanja sementara, atau mempertahankan sesi login. Tiga mekanisme yang kerap dibahas adalah cookies, localStorage, dan sessionStorage. Ketiganya sama-sama menyimpan data di sisi pengguna, tetapi cara kerja, masa hidup, dan risikonya berbeda.

Memilih penyimpanan yang tepat bukan sekadar soal kemudahan. Data yang ditempatkan di lokasi yang keliru bisa lebih mudah terbaca oleh skrip berbahaya, bertahan lebih lama dari yang diperlukan, atau terkirim ke server tanpa disadari. Panduan ini menjelaskan perbedaan ketiganya dan cara menggunakannya dengan lebih aman.

1. Apa itu cookies?

Cookies adalah potongan data kecil yang disimpan browser untuk suatu situs. Browser dapat mengirimkan cookies yang cocok bersama permintaan HTTP ke server. Karena itu, cookies sering dipakai untuk mengelola sesi, menjaga preferensi, atau mendukung fitur yang membutuhkan pengenalan pengguna antarkunjungan.

Cookies memiliki atribut yang menentukan perilakunya. Secure membatasi pengiriman ke koneksi HTTPS; HttpOnly mencegah akses langsung melalui JavaScript; sedangkan SameSite membantu membatasi pengiriman cookies dalam konteks lintas situs. Masa berlaku dapat diatur dengan atribut seperti Max-Age atau Expires.

Keunggulan cookies untuk sesi server adalah browser dapat mengirimkan token sesi secara otomatis. Namun, perilaku otomatis itu juga membuat konfigurasi yang kurang tepat rentan terhadap serangan seperti Cross-Site Request Forgery (CSRF). Atribut keamanan dan perlindungan CSRF tetap perlu dirancang sesuai arsitektur aplikasi.

2. Apa itu localStorage?

localStorage merupakan Web Storage API yang menyimpan pasangan kunci dan nilai sebagai teks untuk suatu origin—kombinasi skema, host, dan port. Data biasanya tetap ada setelah tab atau browser ditutup, sampai dihapus oleh aplikasi, pengguna, atau kebijakan browser. Nilainya tidak otomatis dikirim bersama setiap permintaan HTTP.

Contoh penggunaan yang masuk akal adalah menyimpan pilihan tema terang atau gelap, bahasa antarmuka, atau preferensi tampilan yang tidak sensitif. Karena datanya dapat dibaca JavaScript yang berjalan pada origin tersebut, jangan menganggap localStorage sebagai tempat rahasia. Skrip yang berhasil disuntikkan melalui celah Cross-Site Scripting (XSS) berpotensi membaca isi penyimpanan ini.

Hindari menyimpan kata sandi, token sesi berumur panjang, kunci API rahasia, atau data pribadi sensitif di localStorage. Mengacak nama kunci atau menyamarkan nilai tidak memberikan perlindungan yang berarti jika skrip berbahaya sudah berjalan dalam konteks situs.

3. Apa itu sessionStorage?

sessionStorage mirip localStorage, tetapi ruang penyimpanannya terikat pada origin dan sesi halaman. Dalam penggunaan normal, data tersedia selama tab atau konteks halaman tersebut tetap hidup dan dibersihkan ketika sesi berakhir. Tab baru biasanya memiliki ruang sessionStorage sendiri, meskipun tab yang dibuat dengan opener dapat memulai dengan salinan awal sebelum perubahan berikutnya terpisah.

Mekanisme ini berguna untuk data antarmuka sementara, misalnya langkah formulir multi-tahap yang tidak perlu bertahan setelah tab ditutup. Meski namanya mengandung kata “session”, sessionStorage bukan otomatis tempat aman untuk token autentikasi. Skrip di halaman yang sama tetap dapat membacanya, sehingga risiko XSS tetap berlaku.

4. Perbandingan singkat

• Cookies: dapat memiliki masa berlaku yang ditentukan dan dikirim ke server sesuai domain, path, serta atributnya. Cocok untuk kebutuhan yang memang harus dibaca server, seperti pengelolaan sesi dengan konfigurasi aman.
• localStorage: bertahan melewati penutupan tab dan tidak otomatis ikut dalam permintaan HTTP. Cocok untuk preferensi non-sensitif yang perlu diingat lebih lama.
• sessionStorage: ditujukan untuk data sementara dalam sesi halaman. Cocok untuk status antarmuka yang tidak perlu dipertahankan setelah sesi berakhir.

Ketiganya bukan pengganti satu sama lain dalam semua situasi. Tentukan dahulu siapa yang perlu membaca data, berapa lama data harus hidup, apakah data sensitif, dan apa dampaknya jika data bocor.

5. Cara memeriksa penyimpanan di browser

Di browser desktop, buka Developer Tools melalui menu pengembang atau tombol pintasan yang tersedia pada browser. Pada Chrome dan browser berbasis Chromium, panel Application menampilkan Cookies, Local Storage, dan Session Storage. Di Firefox, panel Storage menyediakan tampilan serupa. Nama panel dan letaknya dapat berubah antarversi.

1. Buka situs yang ingin diperiksa dan pastikan alamatnya benar.
2. Buka Developer Tools, lalu cari bagian Storage atau Application.
3. Pilih origin situs untuk melihat kunci, nilai, dan atribut yang tersedia.
4. Periksa apakah ada token, alamat email, atau data lain yang seharusnya tidak disimpan di browser.
5. Hapus data hanya jika memahami dampaknya; menghapus cookies sesi, misalnya, dapat membuat akun keluar dari situs.

Nilai yang terlihat di Developer Tools adalah data yang disimpan pada profil browser saat itu. Tampilan ini tidak dengan sendirinya membuktikan bahwa seluruh mekanisme autentikasi situs aman atau tidak aman.

6. Praktik keamanan yang disarankan

Minimalkan data. Simpan hanya informasi yang diperlukan dan pilih masa retensi sesingkat mungkin. Preferensi tampilan biasanya tidak membutuhkan perlindungan yang sama dengan token autentikasi.

Lindungi sesi di sisi server. Untuk aplikasi yang memakai cookies sesi, gunakan HTTPS dan pertimbangkan atribut Secure, HttpOnly, serta SameSite yang sesuai. Atur rotasi dan kedaluwarsa sesi, dan gunakan perlindungan CSRF ketika model aplikasi membutuhkannya.

Cegah XSS. Lakukan encoding keluaran sesuai konteks, validasi data masukan, hindari memasukkan teks tidak tepercaya langsung ke HTML, dan terapkan Content Security Policy sebagai lapisan pertahanan tambahan. CSP bukan pengganti perbaikan kerentanan XSS.

Jangan menaruh rahasia di kode klien. Semua data yang dapat dibaca JavaScript pada browser harus dianggap berpotensi terlihat oleh pengguna atau skrip yang berjalan di halaman itu. Rahasia server dan kunci API privat seharusnya tetap berada di lingkungan server.

Uji perilaku lintas situs. Jika aplikasi mengandalkan cookies untuk autentikasi, uji alur login, logout, pengiriman formulir, dan integrasi lintas situs setelah mengubah atribut cookies. Pengaturan yang terlalu ketat dapat mengganggu alur yang sah; pengaturan yang terlalu longgar dapat menambah risiko.

Kesimpulan

Cookies, localStorage, dan sessionStorage memiliki fungsi yang berbeda. Cookies sering sesuai ketika server perlu menerima informasi sesi; localStorage cocok untuk preferensi non-sensitif yang bertahan lama; sessionStorage berguna untuk data sementara dalam satu sesi halaman. Tidak satu pun boleh dianggap aman hanya karena disimpan browser. Pilih berdasarkan kebutuhan, batasi data, lindungi sesi dan aplikasi dari XSS, serta periksa penyimpanan secara berkala.

Untuk rujukan teknis lebih lanjut, baca dokumentasi MDN tentang HTTP cookies, MDN localStorage, dan MDN sessionStorage.