Demo cookie HTTP

Demo berikut menunjukkan cara browser memperlakukan cookie, bergantung pada cara cookie digunakan:

  • Cookie pihak pertama: ditetapkan oleh situs yang Anda kunjungi.
  • Cookie pihak ketiga: disetel oleh situs lain.

Demo: 1pc.glitch.me

Halaman demo menyertakan gambar dan iframe, dari situs yang sama dengan halaman tingkat teratas.

Header Set-Cookie disertakan dengan respons terhadap permintaan untuk gambar dan iframe, tetapi header Set-Cookie memiliki nilai Path dan Max-Age yang berbeda.

Situs demo cookie pihak pertama 1pc.glitch.me

Demo: 3pc.glitch.me

Gambar dan iframe di halaman demo berasal dari situs yang berbeda: 3p-site.glitch.me.

Header Set-Cookie disertakan dengan respons terhadap permintaan untuk gambar dan iframe. Namun, header respons Set-Cookie untuk gambar dan iframe masing-masing memiliki nilai SameSite yang berbeda, dan hal ini memengaruhi cara penanganannya oleh browser.

Demo ini menunjukkan cara cookie pihak ketiga dapat diblokir oleh batasan browser, setelan pengguna, tanda developer, atau kebijakan perusahaan.

Pelajari lebih lanjut:

Situs demo cookie pihak ketiga 3pc.glitch.me

Demo: javascript-cookie.glitch.me

JavaScript yang disertakan di halaman demo menetapkan cookie:

document.cookie = 'cat=tabby';

Setelah ditetapkan, cookie disertakan dengan permintaan ke resource di javascript-cookie.glitch.me. Cookie ini dianggap sebagai cookie pihak pertama karena ditetapkan oleh situs yang Anda kunjungi. Jika JavaScript yang sama dipanggil dalam iframe lintas situs, JavaScript ini akan diperlakukan oleh browser sebagai cookie pihak ketiga.

Situs demo cookie JavaScript javascript-cookie.glitch.me

Demo ini terdiri dari dua halaman web, masing-masing di situs yang berbeda

Setiap halaman ini mencakup:

  • Gambar dari situs lain.
  • Link ke situs lain.

Kedua situs menetapkan cookie sebagai respons terhadap permintaan, menggunakan nilai SameSite default Lax.

SameSite=Lax memungkinkan cookie disetel sebagai respons terhadap permintaan navigasi lintas situs (mengikuti link), tetapi tidak dalam permintaan lintas situs lainnya (seperti memuat gambar).

Buka halaman demo untuk melihat cara penanganan cookie SameSite=Lax yang berbeda oleh browser, saat mengikuti link, dan saat memuat gambar.

Situs demo cookie samesite samesite-a.glitch.me

Demo ini terdiri dari dua situs:

Halaman beranda di example-a.glitch.me dan example-b.glitch.me keduanya menyertakan iframe dari tracker-site.glitch.me, yang menggunakan cookie untuk melacak aktivitas penjelajahan di halaman tempat iframe disematkan.

Saat Anda membuka example-a.glitch.me dan example-b.glitch.me, konten iframe pelacak akan diperbarui untuk menunjukkan bahwa tracker-site.glitch.me sedang melacak aktivitas Anda di kedua situs ini. (Tidak disematkan di situs lain.)

Demo ini menunjukkan cara pelacak dapat menggunakan cookie untuk merekam aktivitas Anda di berbagai situs.

Demo pelacakan cookie lintas situs: example-a.glitch.me

Demo piksel pelacakan

Demo ini terdiri dari dua situs:

Keduanya menyertakan gambar satu piksel dari tracking-pixel-server.glitch.me, yang memungkinkan cookie digunakan untuk melacak aktivitas Anda di situs yang menyertakan gambar tersebut.

Kedua halaman juga menyertakan iframe dari tracking-pixel-server.glitch.me yang menampilkan kunjungan halaman yang dicatat untuk halaman yang menyertakan piksel pelacakan.

Demo ini menunjukkan cara penggunaan piksel pelacakan dengan cookie untuk merekam aktivitas Anda di beberapa situs.

Demo piksel pelacakan: tracking-pixel-a.glitch.me

Demo: fetch-cookie.glitch.me

JavaScript yang disertakan di halaman ini melakukan panggilan fetch() lintas situs ke 3p-site.glitch.me/fetch, yang menetapkan cookie fetch=true sebagai respons.

Demo cookie pengambilan lintas situs: fetch-cookie.glitch.me

Cari tahu lebih lanjut