Tarayıcı çerezlerini anlamak 🍪

0
32

Bir süredir web işleri yapıyor olsam da, itiraf ediyorum ki, bu günlerde ziyaret ettiğiniz diğer tüm web sitelerinde bu çerez bildirimlerine tıklamak dışında hiçbir zaman tarayıcı çerezleriyle ilgilenmedim.

Demek istediğim, tarayıcıda bir depolama biçimi olduğunu biliyordum, ancak bunun için her zaman localStorage’ı kullandım. Son zamanlarda tarayıcı çerezlerini kullanan bir şey üzerinde çalışıyordum ve bunları anlamak için iyi bir zaman olduğunu düşündüm.

İsimli kurabiyeyi seviyorum ama yardım edemem ama bunun bir sebebi var mı diye merak ediyorum. Anlaşılan o soruyu soran tek kişi ben değildim. Ve tarayıcı tanımlama bilgilerinin mucidi Lou Montulli, üniversitedeki bir işletim sistemi kursundan, bir oturum tanımlayıcı için önerdiği çözümün çalışma şekline benzer bir anlama sahip olan ‘sihirli çerez’ terimini duyduğunu açıkladı.

Çözmeye çalıştığı asıl sorun, sonunda kalıcı müşteri durumu için orijinal spesifikasyona yol açan ve o zamandan beri mevcut RFC 6265’e dönüşen çevrimiçi bir alışveriş sepetinin uygulanmasıydı. Netscape web sitesi.

Çerez, tarayıcıda saklanan küçük bir düz metin dosyasıdır. Orada çalıştırılabilir hiçbir şey yok. Basitçe az miktarda veri içerir. Her tarayıcı bunları biraz farklı bir yerde saklar (ör. Tüm web tarayıcıları için tanımlama bilgilerinin Windows 10’da bulunduğu yer).

Tanımlama bilgisindeki veriler sunucu tarafından gönderilir, kullanıcının tarayıcılarında saklanır ve ardından sonraki taleplerde bir tür tanımlayıcı olarak kullanılır. Çerezler, esas olarak durumu (giriş yaptıysanız, alışveriş sepeti öğeleri, kullanıcı tercihleri ​​vb.) Ve izlemeyi hatırlamak için kullanılır.

Çerezler, sunucu bir veya daha fazla Set-Cookie üstbilgisini yanıtıyla birlikte gönderdiğinde oluşturulur, bu satırlar boyunca bir şey:

Set-Çerez: NAME = VALUE

Herhangi bir ad-değer çifti olabilir, ancak her çerez yalnızca 1 ad-değer çifti içerebilir. 1’den fazla çereze ihtiyacınız varsa, birden fazla Set-Cookie başlığına ihtiyaç vardır. Tarayıcıya çerez başlıkları gönderen bir sunucu örneği şuna benzer:

HTTP / 2.0 200 Tamam İçerik Türü: text / html Set-Cookie: viola = red_panda Set-Cookie: mathia = polar_bear

Bir ön uç geliştiricisi olarak, sunucu tarafından gönderilen başlıklarda çok sık hata ayıklamadığımı itiraf etmeliyim, bu yüzden bu düzenli olarak gördüğüm bir şey değil. Tanımlama bilgisi ayarlandıktan sonra, tarayıcıdan sunucuya yapılan sonraki tüm istekler de istek başlığında tanımlama bilgilerine sahip olacaktır.

GET / demos / cookie / HTTP / 2 Host: huijing.github.io Çerez: viola = red_panda; matematik = kutup_yılı

Çerezler genellikle sunucuda oluşturulsa da, bunları istemci tarafında document.cookie kullanarak Javascript ile de oluşturabilirsiniz. Tarayıcı tanımlama bilgileri, daha önce bahsedilen ad-değer çiftine ek olarak bir dizi özelliğe de sahiptir.

Çerez adı, kontrol karakterleri, boşluklar, sekmeler veya ayırıcı karakterler dışında herhangi bir US-ASCII karakteri olabilir. Çerez değeri isteğe bağlı olarak çift tırnak içine alınabilir ve kontrol karakterleri, çift tırnak, virgül, noktalı virgül, ters eğik çizgi ve boşluk dışında herhangi bir US-ASCII karakteri olabilir.

Çerez adına özel önekler eklemek de belirli gereksinimleri zorunlu kılar. Çerez adınız __Secure- ile başlıyorsa, HTTPS ile sunulan bir sayfadaki güvenli bayrakla ayarlanmalıdır. Çerez adınız __Host- ile başlıyorsa, HTTPS ile sunulan bir sayfadaki güvenli bayrakla ayarlanmalıdır, belirtilmiş bir etki alanına sahip olmamalı ve yolu / olmalıdır.

Özelliklerin geri kalanı isteğe bağlıdır, ancak hangi değerlerin ayarlandığına bağlı olarak tanımlama bilgisi davranışını önemli ölçüde etkileyebilir.

Bitiş tarihi =

Bir çerez, son kullanma tarihini geçtiğinde, artık tarayıcı istekleriyle birlikte gönderilmeyecek ve bunun yerine silinecektir. Tarih değeri bir HTTP zaman damgasıdır.

Maksimum Yaş =

Ayrıca bir kurabiyenin son kullanma tarihiyle de ilgilidir, ancak saniye cinsinden. Belirtilen sürenin sonunda çerezin süresi dolacaktır, bu nedenle çerezin 0 olarak veya negatif bir sayı olarak ayarlanması, zaman aşımının sona ereceği anlamına gelir. Her ikisi de ayarlanmışsa Max-Age, Expires’a göre önceliklidir.

Etki Alanı =

Tarayıcı çerezinin gönderileceği ana bilgisayarı belirtir. Yalnızca tek bir alana izin verilir. Mevcut değilse, bu varsayılan olarak geçerli belge URL’sinin ana makinesidir. Belirtildiğinde, tüm alt alanlar da dahil edilir.

Yol =

Çerez yalnızca yol mevcut URL’de mevcutsa gönderilecektir

Güvenli

Çerez yalnızca istek HTTPS ile yapıldığında gönderilecektir

HttpOnly

Javascript, document.cookie aracılığıyla çereze erişemez (XSS saldırılarını azaltmak için)

SameSite =

Bir tanımlama bilgisinin çapraz kaynaklı isteklerle gönderilip gönderilmediğini belirtir. Sıkı, tanımlama bilgisinin yalnızca geçerli URL ile aynı URL’den gelen istekler için gönderildiği anlamına gelir. Lax, tanımlama bilgisinin siteler arası isteklerde gönderilmeyeceği, ancak Kullanıcı, harici bir siteden kaynak siteye gider. Hiçbiri, çerezin hem aynı site hem de siteler arası isteklerde gönderileceği anlamına gelir, ancak yalnızca Güvenli özniteliği de ayarlanmışsa kullanılabilir.

Firefox kullanıyorsanız, bazı web sitelerinde buna benzer bir konsol günlük mesajı fark edebilirsiniz.

Ağustos 2020’de Mozilla, çerezleri varsayılan olarak SameSite = Lax olarak değerlendirmeye karar verdi ve Secure özelliğini de ayarlamak için SameSite = None olan çerezleri zorunlu kıldı. Çerezler için orijinal davranış SameSite = Yok şeklindeydi ancak bu durum kullanıcıları Siteler Arası İstek Sahteciliği saldırılarına açık hale getiriyor.

Hem Chrome hem de Firefox bunu kullanıma sundu, ancak yalnızca Firefox konsol günlüğü uyarısını görüntülüyor gibi görünüyor? Konsol günlüğü durumunu doğrulayabiliyorsanız lütfen bana bildirin.

Bir şeyler yapmak için çerezleri kullanma

Expires veya Max-Age özniteliği olmayan tanımlama bilgileri, oturum tanımlama bilgileri olarak kabul edilir; bu, tarayıcı kapatıldıktan sonra kaldırıldıkları anlamına gelir. Expires veya Max-Age için bir değer ayarlamak, son kullanma tarihlerine ulaşana kadar var olacaklarından, onları kalıcı tanımlama bilgileri yapar.

Yine, genellikle sunucu tarafı işleri yapmıyorum, bu nedenle yalnızca istemci tarafında çerezlerle uğraşmaktan bahsedeceğim. Belge, tarayıcı çerezlerini Javascript aracılığıyla okumanıza ve yazmamıza izin veren bir çerez özelliğine sahiptir.

Belgeyle ilişkili tüm çerezleri görmek için document.cookie’yi kullanın. Bunu tarayıcının konsoluna yazabilir ve şuna benzer bir şey görebilirsiniz:

Document.cookie'yi tarayıcı konsolunda çalıştırma

Yeni bir çerez oluşturmak için aşağıdaki gibi bir şey yapabilirsiniz:

document.cookie = “xiaohua = kaplumbağa”

Birden fazla tanımlama bilgisine ihtiyacınız varsa, bunu oluşturmak istediğiniz her tanımlama bilgisi için yapmanız gerekecektir.

Tarayıcı konsolunda yeni bir çerez oluşturun

Sayfayı yenileseniz bile, çerez hala orada olmalıdır. Tanımlama bilgisinden kurtulmak veya sıfırlamak için, Expires değerini zamanın başlangıcı, Per, 01 Ocak 1970 00:00:00 GMT olarak ayarlayabilirsiniz. Yarı şaka yapıyorum. Bu ilginç (ve oldukça önemli) trivia parçasını hiç duymadıysanız, MDN’den alıntı yapacağım:

JavaScript tarihi, temelde 1 Ocak 1970 UTC gece yarısından bu yana geçen milisaniye sayısı olarak belirtilir. Bu tarih ve saat, bilgisayarda kaydedilen tarih ve saat değerleri için baskın temel değer olan UNIX dönemiyle (1 Ocak 1970’de gece yarısından bu yana geçen saniye sayısı) aynı değildir.

Örneğin, taria kurabiyesinden kurtulmak isteseydim, şunu yapardım:

document.cookie = “taria =; sona eriyor = Per, 01 Ocak 1970 00:00:00 GMT”
Tarayıcı konsolunda bir çerezi sıfırlayın

Çerezler dizeler olduğundan, çerez verilerine dayalı şeyler yapmak çoğunlukla dize manipülasyonunu içerir. Bu yüzden ayrıntıya girmeyeceğim, ama işte, ideal olarak DevTools açıkken oynayabileceğiniz saçma bir demo. Sadece rastgele bir grup çerezi atar ve ardından size buna göre farklı bir şey gösterir.

Çerez demo sitesinin ekran görüntüsü

Güncelleme: Thomas Steiner, Tanımlama Bilgisi Mağazası API’si ve yukarıda bahsedilen eğlenceli olmayan dize manipülasyonlarından kaçınmamızı sağlayan çoklu dolgusu hakkında paylaştı.

Sarmak

En son bir şey yayınlayalı epey zaman oldu. Sanırım bu, bu bloga başladığımdan beri yaşadığım en uzun ara, ama bir şekilde aynı yerde sıkışıp kalmak beni kelimeler yazmaya motive etmiyor. Ama göreceğiz.

Bu arada, en sevdiğin kurabiyelerden ye.

Kredi: OG: Oregon Zoo Youtube kanalında Red Panda Loves Cookies videosundan bir görüntü

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz