HTTP Çerezlerine Eşzamansız Erişim

Victor Costan
Twitter GitHub

Cookie Store API nedir?

Cookie Store API, HTTP çerezlerini hizmet çalışanlarına sunar ve document.cookie için eşzamansız bir alternatif sunar. API, şunları kolaylaştırır:

  • Çerezlere eşzamansız olarak erişerek ana iş parçacığında olumsuzluklardan kaçının.
  • Çerezlerde yapılan değişiklikler gözlemlenebileceğinden çerezler için yoklama yapmaktan kaçının.
  • Service Worker'ların çerezlerine erişme.

Açıklayıcıyı okuyun

Mevcut durum

Adım Durum
1. Açıklayıcı oluşturun Tamamlandı
2. İlk spesifikasyon taslağını oluşturma Tamamlandı
**3. Geri bildirim alma ve spesifikasyonları yineleme** **Devam ediyor**
4. Kaynak denemesi Duraklatıldı
5. Başlatın Başlatılmadı

Eş zamansız çerez deposunu nasıl kullanabilirim?

Kaynak denemesini etkinleştir

Yerel olarak denemek için API'yi komut satırında etkinleştirebilirsiniz:

chrome --enable-blink-features=CookieStore

Bu işaretin komut satırına geçirilmesi, geçerli oturum için Chrome'da API'yi küresel olarak etkinleştirir.

Alternatif olarak chrome://flags ürününde #enable-experimental-web-platform-features işaretini etkinleştirebilirsiniz.

Büyük olasılıkla çerezlere ihtiyacınız yok

Yeni API'yi kullanmaya başlamadan önce, çerezlerin hâlâ Web platformunun istemci tarafı depolama için en kötü temel unsuru olduğunu ve son çare olarak kullanılması gerektiğini belirtmek isterim. Bu bir tesadüf değildir. Çerezler, web'in ilk istemci tarafı depolama mekanizmasıdır ve o zamandan beri çok şey öğrendik.

Çerezlerden kaçınmanın başlıca nedenleri şunlardır:

  • Çerezler, depolama alanı şemanızı arka uç API'nize taşır. Her HTTP isteği, çerez kavanozunun bir anlık görüntüsünü taşır. Bu, arka uç mühendislerinin mevcut çerez biçimine bağımlılıkları dahil etmesini kolaylaştırır. Bu gerçekleştikten sonra, kullanıcı arabiriminiz, arka uca eşleşen bir değişiklik dağıtmadan depolama şemasını değiştiremez.

  • Çerezlerin karmaşık bir güvenlik modeli vardır. Modern Web platformunun özellikleri aynı kaynak politikasını uygular. Diğer bir deyişle, her uygulama kendi korumalı alanına sahip olur ve kullanıcının çalıştırabileceği diğer uygulamalardan tamamen bağımsızdır. Çerez kapsamları, çok daha karmaşık bir güvenlik hikayesi meydana getirir ve sadece bu makalenin boyutunu iki katına çıkaracağını özetlemeye çalışır.

  • Çerezlerin performans maliyetleri yüksek. Tarayıcıların, her HTTP isteğine çerezlerinizin anlık görüntüsünü eklemesi gerekir. Böylece, çerezlerde yapılan her değişiklik depolama alanı ve ağ yığınlarına yayılmalıdır. Modern tarayıcılarda son derece optimize edilmiş çerez deposu uygulamaları vardır, ancak çerezleri hiçbir zaman ağ yığınıyla iletişim kurmasını gerektirmeyen diğer depolama mekanizmaları kadar verimli hale getiremeyiz.

Yukarıdaki tüm nedenlerle, modern Web uygulamaları çerezlerden kaçınmalı ve bunun yerine bir oturum tanımlayıcısını IndexedDB'de depolamalı ve tanımlayıcıyı fetch API'si aracılığıyla belirli HTTP isteklerinin başlığına veya gövdesine açıkça eklemelidir.

Bununla birlikte, çerezleri kullanmak için iyi bir nedeniniz olduğundan hâlâ bu makaleyi okuyorsunuz...

Saygın document.cookie API'si, uygulamanız için kesinlikle garantili bir olumsuzluk kaynağıdır. Örneğin, document.cookie alıcısını her kullandığınızda, tarayıcının istediğiniz çerez bilgilerini alana kadar JavaScript'i yürütmeyi durdurması gerekir. Bu, bir işlem atlamasını veya disk okumasını gerektirebilir ve kullanıcı arayüzünüzün duraklamasına neden olur.

Bu sorun için basit bir çözüm, document.cookie toplayıcıdan eşzamansız Cookie Store API'ye geçmektir.

await cookieStore.get('session_id');

// {
//   domain: "example.com",
//   expires: 1593745721000,
//   name: "session_id",
//   path: "/",
//   sameSite: "unrestricted",
//   secure: true,
//   value: "yxlgco2xtqb.ly25tv3tkb8"
// }

document.cookie setter ayarı da benzer şekilde değiştirilebilir. Değişikliğin yalnızca cookieStore.set tarafından geri verilen Vaat sonuçlandıktan sonra uygulanacağını unutmayın.

await cookieStore.set({name: 'opt_out', value: '1'});

// undefined

Gözlem, anket yapma

JavaScript'ten çerezlere erişmek için kullanılan popüler bir uygulama, kullanıcının çıkış yaptığını algılamak ve kullanıcı arayüzünü güncellemektir. Şu anda bu işlem, olumsuzluklara yol açan ve pil ömrü üzerinde olumsuz bir etkiye sahip olan document.cookie anketleri kullanılarak yapılmaktadır.

Cookie Store API, çerez değişikliklerini gözlemlemek için yoklama gerektirmeyen alternatif bir yöntem sunar.

cookieStore.addEventListener('change', event => {
  for (const cookie of event.changed) {
    if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
  }
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') sessionCookieChanged(null);
  }
});

Hizmet çalışanlarını karşılama

Eşzamanlı tasarım nedeniyle document.cookie API, hizmet çalışanlarının kullanımına sunulmamıştır. Cookie Store API eşzamansız olduğu için hizmet çalışanlarında bu kullanıma izin verilir.

Çerezlerle etkileşimde bulunma, belge bağlamlarında ve hizmet çalışanları içinde aynı şekilde işler.

// Works in documents and service workers.
async function logOut() {
  await cookieStore.delete('session_id');
}

Ancak çerez değişikliklerini gözlemlemek, hizmet çalışanlarında biraz farklıdır. Bir hizmet çalışanının uyandırılması oldukça pahalı olabilir. Bu nedenle, çalışanın ilgilendiği çerez değişikliklerini açık bir şekilde açıklamamız gerekir.

Aşağıdaki örnekte, kullanıcı verilerini önbelleğe almak için IndexedDB'yi kullanan bir uygulama, oturum çerezinde yapılan değişiklikleri izler ve kullanıcı çıkış yaptığında önbelleğe alınan verileri siler.

// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
  event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});

// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') {
      indexedDB.deleteDatabase('user_cache');
      break;
    }
  }
});

En iyi uygulamalar

Çok yakında.

Geri bildirim

Bu API'yi denerseniz lütfen düşüncelerinizi bizimle paylaşın. Lütfen API şekliyle ilgili geri bildirimleri spesifikasyon deposuna yönlendirin ve uygulama hatalarını Blink>Storage>CookiesAPI Blink bileşenine bildirin.

Özellikle performans ölçümleri hakkında bilgi edinmek ve açıklayıcıda belirtilenlerin dışındaki kullanım alanlarını öğrenmek isteriz.

Ek kaynaklar