Memahami cookie

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

Cookie adalah file kecil yang disimpan situs di komputer penggunanya. Informasi yang disimpannya dikirim bolak-balik antara browser dan situs.

Setiap cookie adalah pasangan nilai kunci beserta sejumlah atribut yang mengontrol kapan dan di mana 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 menyetel 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, kemampuan mereka telah berkembang dan berevolusi, tetapi meninggalkan beberapa masalah lama yang bermasalah di platform. Untuk mengatasi hal ini, browser (termasuk Chrome, Firefox, dan Edge) mengubah perilakunya untuk menerapkan default yang lebih melindungi privasi.

Cara kerja cookie

Misalnya, Anda memiliki blog tempat Anda ingin menampilkan promosi "Yang baru" kepada pengguna. Pengguna dapat menutup promo dan 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 Anda melihat halaman yang memenuhi persyaratan tersebut—mereka menggunakan koneksi 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 Anda:

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

Membaca document.cookie akan menampilkan 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 mengakses cookie dalam browser
JavaScript dapat mengakses cookie menggunakan document.cookie.

Jika Anda mencobanya di beberapa situs populer, Anda akan melihat bahwa sebagian besar situs tersebut menetapkan lebih dari tiga cookie. Biasanya, cookie tersebut dikirim pada setiap permintaan ke domain tersebut, yang memiliki sejumlah implikasi. Bandwidth upload sering kali lebih terbatas daripada download untuk pengguna Anda, sehingga overhead pada semua permintaan keluar akan menambah penundaan pada waktu Anda untuk byte pertama. Bersikaplah konservatif 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 melihat bahwa ada cookie 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 mutlak, tetapi relatif terhadap konteks pengguna; cookie yang sama dapat berupa pihak pertama atau pihak ketiga, bergantung pada situs yang dikunjungi pengguna pada saat itu.

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

Melanjutkan contoh sebelumnya, misalnya salah satu postingan blog Anda memiliki gambar kucing yang sangat mengagumkan dan dihosting di /blog/img/amazing-cat.png. Karena gambar tersebut sangat bagus, orang lain menggunakannya langsung di situs mereka. Jika pengunjung pernah membuka 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 pun karena promo_shown tidak digunakan untuk apa pun di situs orang lain ini, hanya menambahkan overhead pada permintaan.

Jika itu adalah efek yang tidak diinginkan, mengapa Anda ingin melakukan hal ini? 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 sematan melalui cookie pihak ketiga. Artinya, tombol "Tonton nanti" akan menyimpan video dalam satu kali klik, bukan meminta mereka login atau mengarahkan mereka keluar dari halaman Anda dan kembali ke YouTube.

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

Salah satu properti budaya web adalah cenderung terbuka secara default. Hal ini adalah bagian dari apa yang memungkinkan begitu banyak orang membuat konten dan aplikasi mereka sendiri di sana. Namun, hal ini juga menimbulkan sejumlah kekhawatiran terkait 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, situs 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 konten mereka sendiri.

Pengguna juga semakin menyadari bagaimana cookie dapat digunakan untuk melacak aktivitas mereka di beberapa situs. Namun, hingga saat ini belum ada cara untuk menyatakan maksud 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 ada untuk memberikan status login dalam konteks pihak ketiga.

Anda dapat menyatakan maksud Anda 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.