Cookie adalah sepotong data yang disimpan di browser yang digunakan untuk mempertahankan status dan informasi lain yang diperlukan situs web untuk menjalankan fiturnya.
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
![Tiga cookie yang dikirim ke browser dari server sebagai respons](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-1.png?authuser=19&hl=id)
Set-Cookie
.
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
![Tiga cookie yang dikirim dari browser ke server dalam sebuah permintaan](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-2.png?authuser=19&hl=id)
Cookie
.
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"
![JavaScript yang mengakses cookie dalam browser](https://web.dev/static/articles/understanding-cookies/image/javascript-accessing-cook-4ae4ebde94edc.png?authuser=19&hl=id)
document.cookie
.
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.
![Tiga cookie yang dikirimkan ke browser dari permintaan yang berbeda di halaman yang sama](https://web.dev/static/articles/understanding-cookies/image/three-cookies-being-sent-93367a53e4231.png?authuser=19&hl=id)
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.
![Cookie yang sama dikirim dalam tiga konteks yang berbeda](https://web.dev/static/articles/understanding-cookies/image/the-same-cookie-being-sen-8e25fd5cdbf86.png?authuser=19&hl=id)
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.