HTTP çerezi demoları

Aşağıdaki demolar, tarayıcının çerezleri nasıl kullandığına bağlı olarak nasıl işlediğini gösterir:

  • Birinci taraf çerezleri: Ziyaret ettiğiniz site tarafından ayarlanır.
  • Üçüncü taraf çerezleri: Farklı bir site tarafından ayarlanır.

Demo: 1pc.glitch.me

Demo sayfasında, üst düzey sayfa ile aynı siteden bir resim ve bir iFrame yer alıyor.

Hem resim hem de iFrame isteklerine verilen yanıtta bir Set-Cookie üst bilgisi yer alıyor ancak Set-Cookie üst bilgilerinin farklı Path ve Max-Age değerleri var.

Birinci taraf çerezi demo sitesi 1pc.glitch.me

Demo: 3pc.glitch.me

Demo sayfasındaki resim ve iframe farklı bir siteden: 3p-site.glitch.me.

Hem resim hem de iFrame için isteğe verilen yanıtta bir Set-Cookie üst bilgisi bulunur. Ancak, resim ve iFrame için Set-Cookie yanıt üstbilgisinin her birinde farklı bir SameSite değeri bulunur ve bu durum, bunların tarayıcı tarafından nasıl işlendiğini etkiler.

Bu demoda, üçüncü taraf çerezlerinin tarayıcı kısıtlamaları, kullanıcı ayarları, geliştirici işaretleri veya kurumsal politika tarafından nasıl engellenebileceği gösterilmektedir.

Daha fazla bilgi:

Üçüncü taraf çerezleri için demo sitesi 3pc.glitch.me

Demo: javascript-cookie.glitch.me

Demo sayfasına dahil edilen JavaScript bir çerez ayarlar:

document.cookie = 'cat=tabby';

Ayarlanan çerez, javascript-cookie.glitch.me adresindeki kaynaklara yapılan isteklerle birlikte gönderilir. Bu çerez, ziyaret ettiğiniz site tarafından ayarlandığı için birinci taraf çerezi olarak kabul edilir. Aynı JavaScript, siteler arası bir iframe'de çağrılırsa tarayıcı bunu üçüncü taraf çerezi olarak değerlendirir.

JavaScript çerezi demo sitesi: javascript-cookie.glitch.me

Bu demoda, her biri farklı bir sitede bulunan iki web sayfası yer almaktadır.

Bu sayfaların her birinde şunlar bulunur:

  • Diğer siteden bir resim.
  • Diğer sitenin bağlantısı.

Her iki site de isteklere yanıt olarak bir çerez ayarlar ve varsayılan SameSite değerini Lax kullanır.

SameSite=Lax, siteler arası gezinme isteklerine (bir bağlantıyı takip etme) yanıt olarak çerezlerin ayarlanmasına izin verir ancak diğer siteler arası isteklerde (ör. bir resmi yükleme) izin vermez.

Bir bağlantıyı takip ederken ve bir resmi yüklerken tarayıcı tarafından SameSite=Lax çerezlerinin nasıl farklı şekilde işlendiğini görmek için demo sayfalarını ziyaret edin.

Samesite çerez demo sitesi samesite-a.glitch.me

Bu demo iki siteden oluşur:

example-a.glitch.me ve example-b.glitch.me adreslerindeki ana sayfaların her ikisinde de tracker-site.glitch.me adresinden bir iFrame bulunur. Bu iFrame, tarama etkinliğini izlemek için bir çerez kullanır.

example-a.glitch.me ile example-b.glitch.me arasında gezinirken izleyici iFrame'inin içeriği, tracker-site.glitch.me'nin bu iki sitedeki etkinliğinizi izlediğini gösterecek şekilde güncellenir. (Başka sitelere yerleştirilmemiş olmalıdır.)

Bu demo, izleyicilerin farklı sitelerdeki etkinliğinizi kaydetmek için çerezleri nasıl kullanabileceğini gösterir.

Siteler arası çerez izleme demosu: example-a.glitch.me

İzleme pikseli demosu

Bu demo iki siteden oluşur:

Her ikisinde de tracking-pixel-server.glitch.me adresinden tek piksellik bir resim bulunur. Bu resim, resmi içeren sitelerdeki etkinliğinizi izlemek için çerez kullanılmasına olanak tanır.

Her iki sayfada da tracking-pixel-server.glitch.me adresinden bir iframe bulunur. Bu iframe, izleme pikselini içeren sayfalar için kaydedilen sayfa ziyaretlerini gösterir.

Bu demoda, birden fazla sitedeki etkinliğinizi kaydetmek için izleme pikselinin çerezlerle nasıl kullanılabileceği gösterilmektedir.

İzleme pikseli demosu: tracking-pixel-a.glitch.me

Demo: fetch-cookie.glitch.me

Bu sayfada yer alan JavaScript, fetch() için siteler arası bir 3p-site.glitch.me/fetch çağrısı yapıyor. Bu çağrıya yanıt olarak fetch=true çerezi ayarlanıyor.

Siteler arası getirme çerezi demosu: fetch-cookie.glitch.me

Daha fazla bilgi