HTTP Çerezlerine Eşzamansız Erişim

Victor Costan
X GitHub

Cookie Store API nedir?

Cookie Store API, HTTP çerezlerini hizmet işçilerine gösterir ve document.cookie için asenkron bir alternatif sunar. API, aşağıdakileri kolaylaştırır:

  • Çerezlere eşzamansız olarak erişerek ana iş parçacığında takılmalardan kaçının.
  • Çerezlerde değişiklikler gözlemlenebilir olduğundan çerezleri sorgulamak için anket yapmaktan kaçının.
  • Hizmet çalışanlarından çerezlere erişme.

Açıklayıcıyı okuyun

Mevcut durum

Step Durum
1. Açıklayıcı oluşturun Tamamlandı
2. Spesifikasyonun ilk taslağını oluşturma Tamamlandı
**3. Geri bildirim toplayın ve spesifikasyon üzerinde iterasyon yapın** **Devam ediyor**
4. Kaynak denemesi Duraklatıldı
5. Başlat Başlatılmadı

Asynchronize çerez deposunu nasıl kullanırım?

Kaynak denemesini etkinleştirme

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

chrome --enable-blink-features=CookieStore

Komut satırında bu işareti iletmek, API'yi mevcut oturum için Chrome'da dünya genelinde etkinleştirir.

Alternatif olarak, chrome://flags'ta #enable-experimental-web-platform-features işaretini etkinleştirebilirsiniz.

Muhtemelen çerezlere ihtiyacınız yok

Yeni API'ye geçmeden önce, çerezlerin hâlâ web platformunun en kötü istemci tarafı depolama aracı olduğunu ve son çare olarak kullanılması gerektiğini belirtmek isterim. Bu durum tesadüf değildir. Çerezler, web'in istemci tarafında kullanılan ilk depolama mekanizmasıydı ve o zamandan beri çok şey öğrendik.

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

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

  • Çerezlerin karmaşık bir güvenlik modeli vardır. Modern web platformu özellikleri aynı kaynak politikasını izler. Bu, her uygulamanın kendi korumalı alanını aldığı ve kullanıcının çalıştırmakta olabileceği diğer uygulamalardan tamamen bağımsız olduğu anlamına gelir. Çerez kapsamları çok daha karmaşık bir güvenlik hikayesi sağlar ve sadece bu makalenin boyutunu iki katına çıkaracak şekilde özetlemeye çalışır.

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

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

Bununla birlikte, çerezleri kullanmaya devam etmek için iyi bir nedeniniz olduğu için bu makaleyi okumaya devam ediyorsunuz...

Eski document.cookie API'si, uygulamanızda takılmalara yol açacak oldukça garantili bir kaynaktı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 işlem, bir işlem atlaması veya disk okuması gerektirebilir ve kullanıcı arayüzünüzün takılmasına neden olur.

Bu sorunun basit bir çözümü, document.cookiegeter'den asenkron 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 ayarlayıcısı da benzer şekilde değiştirilebilir. Değişikliğin yalnızca cookieStore.set tarafından döndürülen Taahhüt çözümlendikten sonra uygulanacağının garanti edildiğini unutmayın.

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

// undefined

Anket yapmayın, gözlemleyin

JavaScript'ten çerezlere erişmek için kullanılan popüler bir uygulama, kullanıcının çıkış yaptığını algılayıp kullanıcı arayüzünü güncellemektir. Bu işlem şu anda document.cookie anketi yapılarak gerçekleştiriliyor. Bu işlem, takılmalara neden olur ve pil ömrünü olumsuz etkiler.

Cookie Store API, çerez değişikliklerini gözlemlemek için anket 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);
  }
});

Service Worker'ları karşılayın

document.cookie API, eşzamanlı tasarım nedeniyle service çalışanları tarafından kullanıma sunulmamıştır. Cookie Store API asynkron olduğundan hizmet işçilerinde kullanılmasına izin verilir.

Çerezlerle etkileşim kurma, doküman bağlamlarında ve hizmet işçilerinde aynı şekilde çalışır.

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

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

Aşağıdaki örnekte, kullanıcı verilerini önbelleğe almak için IndexedDB kullanan bir uygulama, oturum çerezindeki değişiklikleri izler ve kullanıcı oturumu kapattığı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. API şekliyle ilgili geri bildirimlerinizi lütfen özellik deposuna gönderin ve uygulama hatalarını Blink>Storage>CookiesAPI Blink bileşenine bildirin.

Özellikle açıklayıcı makalede belirtilenlerin dışındaki performans ölçümleri ve kullanım alanları hakkında bilgi edinmek istiyoruz.

Ek kaynaklar