Memahami cookie

Cookie adalah sepotong data yang disimpan di browser yang digunakan untuk mempertahankan status dan informasi lain yang diperlukan situs web untuk menjalankan fiturnya.

Rowan Merewood

Kuki adalah file kecil yang disimpan situs web di komputer penggunanya, informasi yang disimpan bolak-balik antara browser dan situs web.

Setiap cookie merupakan pasangan nilai kunci bersama dengan sejumlah atribut yang mengontrol waktu dan tempat cookie tersebut digunakan. Atribut ini digunakan untuk menetapkan hal-hal seperti tanggal habis masa berlaku atau menunjukkan bahwa cookie hanya boleh dikirim melalui HTTPS. Anda dapat menetapkan cookie di header HTTP atau melalui antarmuka JavaScript.

Cookie adalah salah satu metode yang tersedia untuk menambahkan status persisten ke situs. Selama bertahun-tahun, kemampuan mereka telah berkembang dan berevolusi, tetapi platform ini tetap memiliki beberapa masalah lama yang bermasalah. Untuk mengatasi hal ini, browser (termasuk Chrome, Firefox, dan Edge) mengubah perilakunya untuk menerapkan default yang lebih menjaga privasi.

Cara kerja cookie

Misalnya, Anda memiliki blog tempat Anda ingin menampilkan promo "Yang baru" kepada pengguna. Pengguna dapat menutup promo tersebut, lalu mereka tidak akan melihatnya lagi untuk sementara waktu. Anda dapat menyimpan preferensi tersebut dalam cookie, menetapkannya agar habis masa berlakunya dalam waktu satu bulan (2.600.000 detik), dan hanya mengirimkannya melalui HTTPS. Header tersebut akan terlihat seperti ini:

Set-Cookie: promo_shown=1; Max-Age=2600000; Secure

Saat pembaca melihat halaman yang memenuhi persyaratan tersebut—mereka menggunakan koneksi yang aman dan cookie yang berusia kurang dari satu bulan—browser mereka akan mengirimkan header ini dalam permintaannya:

Cookie: promo_shown=1

Anda juga dapat menambahkan dan membaca cookie yang tersedia untuk situs tersebut dalam JavaScript menggunakan document.cookie. Melakukan penetapan ke document.cookie akan membuat atau mengganti cookie dengan kunci tersebut. Misalnya, Anda dapat mencoba kode berikut di konsol JavaScript browser:

→ document.cookie = "promo_shown=1; Max-Age=2600000; Secure"
← "promo_shown=1; Max-Age=2600000; Secure"

Membaca document.cookie akan menghasilkan output semua cookie yang dapat diakses dalam konteks saat ini, dengan setiap cookie dipisahkan oleh titik koma:

→ document.cookie;
← "promo_shown=1; color_theme=peachpuff; sidebar_loc=left"

Jika Anda mencoba opsi ini pada pilihan situs populer, Anda akan melihat bahwa sebagian besar situs tersebut menetapkan lebih dari tiga cookie secara signifikan. Pada umumnya, cookie tersebut dikirim pada setiap permintaan ke domain tersebut, yang memiliki sejumlah implikasi. Bandwidth upload sering kali lebih terbatas daripada download untuk pengguna, sehingga overhead pada semua permintaan keluar menambah penundaan waktu ke byte pertama. Bersikaplah konservatif dalam jumlah dan ukuran cookie yang Anda tetapkan. Gunakan atribut Max-Age untuk membantu memastikan cookie tidak bertahan lebih lama dari yang diperlukan.

Apa itu cookie pihak pertama dan pihak ketiga?

Jika Anda kembali ke pilihan situs yang sama yang Anda lihat sebelumnya, Anda mungkin melihat bahwa ada cookie yang tersedia untuk berbagai domain, bukan hanya domain yang sedang Anda kunjungi. Cookie yang cocok dengan domain situs saat ini, yaitu yang ditampilkan di kolom URL browser, disebut sebagai cookie pihak pertama. Demikian pula, cookie dari domain selain situs saat ini disebut sebagai cookie pihak ketiga. Ini bukan label absolut, tetapi relatif terhadap konteks pengguna; cookie yang sama dapat berupa pihak pertama atau pihak ketiga bergantung pada situs yang sedang dibuka pengguna.

Melanjutkan contoh di atas, anggaplah salah satu postingan blog Anda memiliki gambar kucing yang sangat menakjubkan di dalamnya dan dihosting di /blog/img/amazing-cat.png. Karena itu adalah gambar yang menakjubkan, orang lain menggunakannya langsung di situs mereka. Jika pengunjung telah mengunjungi blog Anda dan memiliki cookie promo_shown, maka saat mereka melihat amazing-cat.png di situs orang lain, cookie tersebut akan dikirim dalam permintaan gambar tersebut. Hal ini tidak terlalu berguna bagi siapa saja karena promo_shown tidak digunakan untuk apa pun di situs orang lain. Fungsi ini hanya menambahkan overhead ke permintaan.

Jika itu adalah efek yang tidak diinginkan, mengapa Anda ingin melakukan hal ini? Mekanisme ini memungkinkan situs mempertahankan status saat digunakan dalam konteks pihak ketiga. Misalnya, jika Anda menyematkan video YouTube di situs, pengunjung akan melihat opsi "Tonton Nanti" di pemutar. Jika pengunjung sudah login ke YouTube, sesi tersebut disediakan di pemutar yang disematkan oleh cookie pihak ketiga. Artinya, tombol "Tonton Nanti" hanya akan menyimpan video sekaligus, bukan meminta mereka untuk login atau mengarahkan mereka keluar dari halaman Anda dan kembali ke YouTube.

Salah satu sifat budaya web adalah web cenderung terbuka secara default. Inilah yang memungkinkan banyak orang membuat konten dan aplikasi mereka sendiri di sana. Namun, hal ini juga menimbulkan sejumlah masalah keamanan dan privasi. Serangan pemalsuan permintaan lintas situs (CSRF) bergantung pada fakta bahwa cookie disertakan ke permintaan apa pun ke origin tertentu, terlepas dari siapa yang memulai permintaan. Misalnya, jika Anda membuka evil.example, hal tersebut dapat memicu permintaan ke your-blog.example, dan browser Anda akan dengan mudah melampirkan cookie yang terkait. Jika blog Anda tidak berhati-hati dalam memvalidasi permintaan tersebut, evil.example dapat memicu tindakan seperti menghapus postingan atau menambahkan kontennya sendiri.

Pengguna juga menjadi makin menyadari cara cookie dapat digunakan untuk melacak aktivitas mereka di beberapa situs. Namun hingga saat ini, belum ada cara untuk menyatakan intent Anda secara eksplisit dengan cookie tersebut. Cookie promo_shown Anda hanya boleh dikirim dalam konteks pihak pertama, sedangkan cookie sesi untuk widget yang dimaksudkan untuk disematkan di situs lain sengaja dibuat untuk memberikan status login dalam konteks pihak ketiga.

Anda dapat menyatakan intent secara eksplisit dengan cookie dengan menetapkan atribut SameSite yang sesuai.

Untuk mengidentifikasi cookie pihak pertama dan menetapkan atribut yang sesuai, lihat Resep cookie pihak pertama.