Sign in Subscribe
Javascript

Document Cookie: Cara Browser Nyimpen Data Tanpa Ketahuan

Document Cookie: Cara Browser Nyimpen Data Tanpa Ketahuan
Photo by Campaign Creators / Unsplash

Pernah nggak penasaran kenapa kalau login di suatu website, kamu nggak perlu terus-terusan masukin username dan password? Atau kenapa produk yang pernah kamu lihat di toko online tiba-tiba muncul di iklan lain? Semua itu terjadi berkat cookies.

Cookies adalah data kecil yang disimpan di browser untuk menyimpan informasi pengguna. Dalam JavaScript, kita bisa mengakses, mengubah, dan menghapus cookies menggunakan document.cookie. Artikel ini bakal mengupas cara kerja cookies, cara menggunakannya dengan JavaScript, dan bagaimana mengontrolnya supaya lebih aman.

Apa Itu Cookies?

Cookies adalah data yang disimpan oleh browser untuk menyimpan informasi penting seperti:

  • Sesi login → Supaya kamu nggak perlu login terus-menerus.
  • Preferensi pengguna → Tema, bahasa, atau pengaturan lainnya.
  • Pelacakan aktivitas → Digunakan oleh iklan dan analitik untuk memahami kebiasaan pengguna.

Setiap cookie biasanya memiliki struktur seperti ini:

nama_cookie=nilai_cookie; expires=tanggal_kadaluarsa; path=lokasi_cookie;

Cara Menggunakan document.cookie

document.cookie adalah cara bawaan JavaScript untuk membaca dan mengelola cookies di browser.

1. Melihat Cookies yang Ada

Kita bisa melihat semua cookies yang tersimpan di browser dengan cara berikut:

console.log(document.cookie);

Hasilnya akan seperti ini:

username=JohnDoe; theme=dark; loggedIn=true

Setiap cookie dipisahkan oleh tanda ;.

Untuk menambahkan cookie, kita cukup menetapkan nilai baru ke document.cookie.

document.cookie = "user=JohnDoe";

Namun, tanpa atribut tambahan, cookie ini hanya akan bertahan sampai sesi browser ditutup. Supaya cookie tetap tersimpan setelah browser ditutup, tambahkan expires atau max-age.

document.cookie = "user=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT";

Atau dengan max-age (dalam detik):

document.cookie = "user=JohnDoe; max-age=3600"; // Bertahan 1 jam

Secara default, cookie hanya bisa diakses oleh halaman dari domain yang sama. Tapi kita bisa menentukan domain dan path supaya cookie bisa diakses dari subdomain tertentu.

document.cookie = "theme=dark; path=/; domain=example.com";

Kode ini memastikan cookie bisa diakses dari semua halaman di example.com.

Menghapus cookie sebenarnya tidak bisa langsung dilakukan, tapi kita bisa menggantinya dengan tanggal kadaluarsa yang sudah lewat.

document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Kode ini akan menghapus cookie user karena tanggal kedaluwarsanya sudah lewat.

Keamanan Cookies

Cookies memang berguna, tapi juga bisa menimbulkan risiko keamanan jika tidak dikelola dengan baik. Berikut beberapa cara untuk mengamankan cookies:

1. Gunakan Secure untuk HTTPS

Pastikan cookies hanya dikirimkan melalui koneksi HTTPS untuk menghindari pencurian data.

document.cookie = "sessionID=123456; secure";

2. Gunakan HttpOnly untuk Mencegah Akses JavaScript

Cookies yang punya atribut HttpOnly tidak bisa diakses lewat JavaScript, hanya bisa diakses oleh server.

Set-Cookie: sessionID=123456; HttpOnly

Kode ini harus dikirim oleh server, karena JavaScript tidak bisa mengatur HttpOnly.

3. Gunakan SameSite untuk Mencegah CSRF

Cookie dengan SameSite hanya bisa dikirim dari situs yang sama, mencegah serangan Cross-Site Request Forgery (CSRF).

document.cookie = "authToken=abcdef; SameSite=Strict";

Kapan Harus Menggunakan Cookies?

✅ Jika perlu menyimpan sesi login pengguna.
✅ Jika ingin menyimpan preferensi pengguna seperti tema atau bahasa.
✅ Jika ingin mengingat pengaturan tertentu di dalam aplikasi web.

❌ Jangan gunakan cookies untuk menyimpan data sensitif seperti password atau informasi kartu kredit karena bisa diakses oleh JavaScript.

Perbedaan Cookies vs Local Storage vs Session Storage

Selain cookies, browser juga menyediakan Local Storage dan Session Storage untuk menyimpan data. Berikut perbedaannya:

Fitur Cookies Local Storage Session Storage
Ukuran Maks 4 KB 5-10 MB 5-10 MB
Expiry Bisa diatur Tidak ada (permanen) Hanya selama sesi aktif
Akses dari Server ✅ Bisa ❌ Tidak ❌ Tidak
Dapat diakses JavaScript ✅ Bisa ✅ Bisa ✅ Bisa

Kalau hanya ingin menyimpan data untuk penggunaan di browser saja (tanpa perlu dikirim ke server), Local Storage atau Session Storage lebih cocok dibandingkan cookies.

Kesimpulan

  • Cookies adalah data kecil yang disimpan di browser untuk menyimpan sesi login, preferensi pengguna, dan pelacakan aktivitas.
  • JavaScript bisa membaca, membuat, dan menghapus cookies dengan document.cookie.
  • Cookies bisa disetel dengan atribut tambahan seperti expires, max-age, secure, HttpOnly, dan SameSite untuk meningkatkan keamanan.
  • Jangan gunakan cookies untuk menyimpan data sensitif karena bisa diakses oleh JavaScript.
  • Alternatif lain untuk menyimpan data adalah Local Storage dan Session Storage, yang lebih cocok untuk menyimpan data di sisi klien.

Dengan memahami cara kerja cookies, kita bisa menggunakannya secara lebih bijak untuk meningkatkan pengalaman pengguna tanpa mengorbankan keamanan.

Read next