Memahami cookie

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

Cookie adalah file kecil yang disimpan situs di komputer pengguna mereka. Informasi yang disimpannya berjalan bolak-balik antara browser dan situs.

Setiap cookie adalah 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 web. Selama bertahun-tahun, kemampuannya telah berkembang dan berevolusi, tetapi platform ini memiliki beberapa masalah lama yang bermasalah. Untuk mengatasi hal ini, browser (termasuk Chrome, Firefox, dan Edge) mengubah perilakunya untuk menerapkan setelan 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, lalu mereka tidak akan melihatnya lagi untuk sementara waktu. Anda dapat menyimpan preferensi tersebut dalam cookie, menyetelnya agar berakhir dalam sebulan (2.600.000 detik), dan hanya mengirimkannya melalui HTTPS. Header tersebut akan terlihat seperti ini:

Set-Cookie: promo_shown=1; Max-Age=2600000; Secure
Tiga cookie yang dikirim ke browser dari server dalam respons
Server menetapkan cookie menggunakan header Set-Cookie.

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

Cookie: promo_shown=1
Tiga cookie yang dikirim dari browser ke server dalam permintaan
Browser Anda mengirimkan kembali cookie di header Cookie.

Anda juga dapat menambahkan dan membaca cookie yang tersedia untuk situs tersebut di JavaScript menggunakan document.cookie. Membuat penetapan ke document.cookie akan membuat atau mengganti cookie dengan kunci tersebut. Misalnya, Anda dapat mencoba hal 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 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"
JavaScript yang mengakses cookie dalam browser
JavaScript dapat mengakses cookie menggunakan document.cookie.

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

Apa yang dimaksud dengan cookie pihak pertama dan pihak ketiga?

Jika Anda kembali ke pilihan situs yang sama yang Anda lihat sebelumnya, Anda mungkin memperhatikan bahwa ada cookie untuk berbagai domain, bukan hanya domain yang saat ini 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 bersifat relatif terhadap konteks pengguna; cookie yang sama dapat berupa cookie pihak pertama atau pihak ketiga, bergantung pada situs yang dibuka pengguna saat itu.

Tiga cookie sedang dikirim ke browser dari permintaan yang berbeda pada halaman yang sama
Cookie dapat berasal dari berbagai domain yang berbeda di satu halaman.

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

Jika itu adalah efek yang tidak diinginkan, mengapa Anda ingin melakukannya? Mekanisme inilah yang 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 Anda sudah login ke YouTube, sesi tersebut akan tersedia di pemutar yang disematkan oleh cookie pihak ketiga. Artinya, tombol "Tonton Nanti" hanya akan menyimpan video sekaligus, bukan meminta mereka untuk login atau harus mengarahkan mereka keluar dari halaman Anda dan kembali ke YouTube.

Cookie yang sama dikirim dalam tiga konteks yang berbeda
Cookie dalam konteks pihak ketiga dikirim saat mengunjungi halaman yang berbeda.

Salah satu properti budaya web adalah web cenderung terbuka secara default. Hal ini 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) mengandalkan fakta bahwa cookie dilampirkan ke permintaan apa pun ke origin tertentu, terlepas dari siapa yang memulai permintaan. Misalnya, jika Anda mengunjungi evil.example, tindakan tersebut dapat memicu permintaan ke your-blog.example, dan browser Anda akan dengan senang hati melampirkan cookie 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 semakin 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. 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 di sana 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.