Depolama erişiminde HTTP üst bilgisi desteği için kaynak denemesi

Natalia Markoborodova

Chrome, 130 sürümünde Storage Access API (SAA)'ye HTTP üstbilgilerinin eklenmesi için bir kaynak denemesi başlatıyor: Depolama Alanı Erişim Üstbilgileri. Yeni Sec-Fetch-Storage-Access istek başlığı ve Activate-Storage-Access yanıt başlığı, iframe olmayan kaynakları desteklemeyi ve sosyal medya widget'ları, takvimler ve etkileşimli araçlar gibi yerleşik içeriğe dayalı web sitelerinin performansını ve kullanıcı deneyimini iyileştirmeyi amaçlamaktadır.

JavaScript akışı (ve sınırlamaları)

Daha önce SAA, kullanıcı izin vermiş olsa bile her yeniden yüklemede document.requestStorageAccess() için JavaScript API çağrısı gerektiriyordu. Etkili olsa da bu yöntem bazı sınırlamalara sahiptir:

• Birden fazla ağ gidiş-dönüş işlemi: Bu işlem, yerleştirilmiş içeriğin tam olarak işleyebilmesi için genellikle birkaç ağ isteği ve sayfa yeniden yükleme işlemi içeriyordu.
• iFrame bağımlılığı: JavaScript yürütme, iframe'lerin veya iframe'ler içindeki alt kaynakların kullanılmasını zorunlu kılarak geliştiricilerin esnekliğini sınırladı.

Örneğin, calendar.example'ten website.example'a yalnızca JavaScript kullanılarak yerleştirilmiş bir takvim widget'ı aşağıdaki gibi görünür:

1. Boş yer yükleme: website.example widget'ı ister. website.example'a yerleştirilmiş calendar.example widget'ı, bölümlenmemiş çerezlerine erişemediği için bunun yerine bir yer tutucu widget oluşturulur.
2. İzin isteme: Yer tutucu yüklenir ve ardından storage-access iznini istemek için document.requestStorageAccess() çağrılır.
3. Kullanıcı izin vermeyi seçer.
4. Widget'ı yeniden yükleyin: Widget bu kez çerez erişimi ile yenilenir ve kişiselleştirilmiş içeriği yükler.
5. Kullanıcı, calendar.example widget'ını yerleştiren bir siteyi her ziyaret ettiğinde akış 1., 2. ve 4. adımlardakiyle tamamen aynıdır. Tek basitleştirme, kullanıcının erişimi yeniden vermesi gerekmemesidir.

Bu akış verimsizdir: Kullanıcı zaten depolama izni verdiyse ilk iframe yüklemesi, document.requestStorageAccess() çağrısı ve sonraki yeniden yükleme gereksiz hale gelir ve gecikmeye neden olur.

HTTP üst bilgileri içeren yeni akış

Yeni Depolama Alanı Erişim Başlıkları, iframe olmayan kaynaklar da dahil olmak üzere yerleşik içeriğin daha verimli bir şekilde yüklenmesini sağlar.

Depolama Alanı Erişim Başlıkları ile tarayıcı, kullanıcı önceden izin verdiyse Sec-Fetch-Storage-Access: inactive istek başlığı ayarlanmış şekilde kaynakları otomatik olarak getirir. İstek üstbilgisini ayarlamak için geliştirici işlemi gerekmez. Sunucu, Activate-Storage-Access: retry; allowed-origin="<origin>" üstbilgisiyle yanıt verebilir. Tarayıcı, gerekli kimlik bilgileriyle isteği tekrar dener.

Önemli: Bu güncelleme, ilk izin isteği sürecini değiştirmez. Web sitelerinin, izin henüz verilmemişse kullanıcı izni istemek için document.requestStorageAccess() çağıran bir iframe yerleştirmesi gerekir.

İstek Başlığı

Sec-Fetch-Storage-Access: <access-status>

Bir kullanıcı siteler arası içerik barındıran bir sayfayı ziyaret ettiğinde tarayıcı, kimlik bilgileri (çerez gibi) gerektirebilecek siteler arası isteklere otomatik olarak Sec-Fetch-Storage-Access başlığını ekler. Bu başlık, yerleştirilen içeriğin çerez erişimi izni durumunu gösterir. Değerlerini şu şekilde yorumlayabilirsiniz:

• none: Yer paylaşımı storage-access iznine sahip olmadığından, bölümlenmemiş çerezlere erişemez.
• inactive: Yerleştirilen öğe storage-access iznine sahip ancak bu izni etkinleştirmemiştir. Yerleştirme, bölümlenmemiş çerez erişimine sahip değil.
• active: Yerleştirme, bölümlenmemiş çerez erişimine sahiptir. Bu değer, bölümlenmemiş çerezlere erişimi olan tüm kaynak dışı isteklere dahil edilir.

Yanıt Başlıkları

Activate-Storage-Access: <retry-or-reload>

Activate-Storage-Access başlığı, tarayıcıya isteği çerezlerle yeniden denemesini veya kaynağı doğrudan SAA etkinken yüklemesini söyler. Başlık aşağıdaki değerlere sahip olabilir:

• load: Tarayıcıya, yerleştirilen öğe sağlayıcıya istenen kaynak için bölümlenmemiş çerezlere erişim izni vermesini söyler.
• retry: Sunucu, tarayıcının depolama alanı erişim iznini etkinleştirmesi ve ardından isteği yeniden denemesi gerektiğini yanıtlar.

Önemli: retry kullanırken, kaynağın sunucunuza kimlik bilgisi içeren istekler göndermesine izin vermek için yanıtınız allowed-origin parametresini de içermelidir. Ayrıca, ilk istek Sec-Fetch-Storage-Access: inactive başlığını içermelidir.

Activate-Storage-Access: retry; allowed-origin="https://site.example"
Activate-Storage-Access: retry; allowed-origin=*
Activate-Storage-Access: load

Iframe dışı kaynaklar için destek

Depolama Alanı Erişim Başlıkları güncellemesi, farklı bir alanda barındırılan resimler gibi iFrame olmayan yerleştirilmiş içerikler için SAA'yı etkinleştirir. Daha önce, üçüncü taraf çerezleri kullanılamıyorsa hiçbir web platformu API'si, bu tür kaynakların tarayıcılarda kimlik bilgileriyle yüklenmesine izin vermiyordu. Örneğin, embedding-site.example'ünüz aşağıdaki durumlarda resim isteyebilir:

   <img src="https://server.example/image"/>

Sunucu, çerez olup olmadığına bağlı olarak içerik veya hata ile yanıt verebilir:

app.get('/image', (req, res) => {
  const headers = req.headers;
  const cookieHeader = headers.cookie;
  // Check if the embed has the necessary cookie access
  if (!cookieHeader || !cookieHeader.includes('foo')) {
  // If the cookie is not present, check if the browser supports Storage Access headers
    if (
      'sec-fetch-storage-access' in headers &&
      headers['sec-fetch-storage-access'] == 'inactive'
    ) {
    // If the browser supports Storage Access API, retry the request with storage access enabled
      res.setHeader('Activate-Storage-Access', 'retry; allowed-origin="https://embedding-site.example"');
    }
    res.status(401).send('No cookie!');
   } else {
    // If the cookie is available, check if the user is authorized to access the image
    if (!check_authorization(cookieHeader)) {
      return res.status(401).send('Unauthorized!');
    }
    // If the user is authorized, respond with the image file
    res.sendFile("path/to/image.jpeg");
  }
});

Çerez kullanılamıyorsa sunucu, Sec-Fetch-Storage-Access istek başlığının değerini kontrol eder. Bu değer inactive olarak ayarlanırsa sunucu, isteğin depolama alanı erişimi ile yeniden denenmesi gerektiğini belirten Activate-Storage-Access: retry üst bilgisiyle yanıt verir. Çerez yoksa ve Sec-Fetch-Storage-Access başlığında etkin olmayan değeri yoksa resim yüklenmez.

Not: Activate-Storage-Access: load'yi kullanmadan iframe olmayan kaynaklar için Activate-Storage-Access: retry başlığını kullanabilirsiniz. load yanıt üst bilgisi, iFrame'ler için tasarlanmıştır ve await document.requestStorageAccess()'ü yürütüp pencereyi yeniden yüklemeye eşdeğerdir. load yanıt başlığı kullanılarak iframe yalnızca bir kez getirilir ve yüklenir.

HTTP üst bilgisi akışı

Tarayıcı, HTTP üstbilgileriyle kullanıcının widget'a depolama erişimi izni verdiğini algılayabilir ve sonraki ziyaretlerde iframe'i, bölümlenmemiş çerezlere erişimle yükleyebilir.

Depolama Alanı Erişim Başlıkları ile sonraki sayfa ziyaretleri aşağıdaki akışı tetikler:

1. Kullanıcı, calendar.example öğesinin yeniden yerleştirildiği website.example sayfasını ziyaret eder. Bu getirme işlemi, önceki gibi çereze henüz erişemez. Ancak kullanıcı daha önce storage-access izni vermiştir ve getirme işlemi, bölümlenmemiş çerez erişiminin kullanılabilir ancak kullanılmadığını belirtmek için bir Sec-Fetch-Storage-Access: inactive başlığı içerir.
2. calendar.example sunucusu, kaynak getirme işleminin depolama alanı erişim izniyle bölümlenmemiş çerezlerin kullanılmasını gerektirdiğini belirtmek için bir Activate-Storage-Access: retry; allowed-origin="<origin>" üstbilgisiyle yanıt verir (bu durumda <origin>, https://website.example olur).
3. Tarayıcı, bu kez bölümlenmemiş çerezleri de dahil ederek isteği yeniden dener (bu getirme işlemi için storage-access iznini etkinleştirir).
4. calendar.example sunucusu, kişiselleştirilmiş iframe içeriğiyle yanıt verir. Yanıt, tarayıcının içeriği storage-access izni etkinleştirilmiş şekilde yüklemesi gerektiğini (yani document.requestStorageAccess() çağrılmış gibi bölümlenmemiş çerez erişimi ile yüklemesi gerektiğini) belirtmek için bir Activate-Storage-Access: load başlığı içerir.
5. Kullanıcı aracısı, depolama alanı erişimi iznini kullanarak iframe içeriğini bölümlenmemiş çerez erişimi ile yükler. Bu adımdan sonra widget beklendiği gibi çalışabilir.

Depolama Alanı Erişim Üstbilgisi akış şeması.

Çözümünüzü güncelleme

Depolama Alanı Erişim Başlıkları özelliğiyle kodunuzu iki durumda güncellemeniz gerekebilir:

1. SAA kullanıyorsanız ve başlık mantığıyla daha iyi performans elde etmek istiyorsanız.
2. Sunucunuzdaki isteğe Origin üstbilgisinin eklenip eklenmediğine bağlı bir doğrulama veya mantığınız var.

SAA üstbilgi mantığını uygulama

Depolama Alanı Erişim Başlıkları'nı çözümünüzde kullanabilmek için çözümünüzü güncellemeniz gerekir. calendar.example'nin sahibi olduğunuzu varsayalım. website.example'ün kişiselleştirilmiş bir calendar.example widget'ı yükleyebilmesi için widget kodunun depolama erişimine sahip olması gerekir.

İstemci tarafı

Depolama Alanı Erişim Başlıkları özelliği, mevcut çözümler için istemci tarafında herhangi bir kod güncellemesi gerektirmez. SAA'yı nasıl uygulayacağınızı öğrenmek için dokümanları okuyun.

Sunucu tarafı

Sunucu tarafında yeni üstbilgileri kullanabilirsiniz:

app.get('/cookie-access-endpoint', (req, res) => {
  const storageAccessHeader = req.headers['sec-fetch-storage-access'];

  if (storageAccessHeader === 'inactive') {
    // User needs to grant permission, trigger a prompt
    if (!validate_origin(req.headers.origin)) {
      res.status(401).send(`${req.headers.origin} is not allowed to send` +
          ' credentialed requests to this server.');
      return;
    }
    res.set('Activate-Storage-Access', `retry; allowed-origin="${req.headers.origin}"`);
    res.status(401).send('This resource requires storage access. Please grant permission.');
  } else if (storageAccessHeader === 'active') {
    // User has granted permission, proceed with access
    res.set('Activate-Storage-Access', 'load');
    // Include the actual iframe content here
    res.send('This is the content that requires cookie access.');
  } else {
    // Handle other cases (e.g., 'Sec-Fetch-Storage-Access': 'none')
  }
});

Bu çözümün pratikte nasıl çalıştığını görmek için demoya göz atın.

Kaynak üstbilgisi mantığınızı güncelleme

Depolama Alanı Erişim Üstbilgileri sayesinde Chrome, Origin üstbilgisini öncekinden daha fazla sayıda istekle gönderir. Bu durum, Origin başlığının yalnızca belirli istek türlerinde (CORS tarafından tanımlananlar gibi) mevcut olmasını gerektiriyorsa sunucu tarafı mantığınızı etkileyebilir.

Olası sorunları önlemek için sunucu tarafı kodunuzu incelemeniz gerekir:

• Origin üstbilgisinin varlığına bağlı doğrulama veya mantık olup olmadığını kontrol edin.
• Origin başlığının daha fazla durumda mevcut olması için kodunuzu güncelleyin.

Temel avantajlar

Depolama Alanı Erişim Başlıkları, SAA'yı kullanmanın önerilen ve daha yüksek performanslı bir yoludur. Bu değişiklik genel olarak birkaç iyileştirme sağlar:

• İframe olmayan yerleşimler için destek: Daha geniş bir kaynak yelpazesi için SAA'yı etkinleştirir.
• Daha az ağ kullanımı: Daha az istek ve daha küçük yük.
• Daha düşük CPU kullanımı: Daha az JavaScript işleme.
• İyileştirilmiş kullanıcı deneyimi: Ara yüklemelerin neden olduğu kesintileri ortadan kaldırır.

Kaynak denemesine katılma

Kaynak denemeleri, yeni özellikleri denemenize ve kullanılabilirlikleri, pratiklikleri ve etkililikleri hakkında geri bildirim vermenize olanak tanır. Daha fazla bilgi için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi inceleyin.

Chrome 130'dan itibaren kaynak deneme sürümlerine kaydolarak Depolama Alanı Erişim Başlıkları özelliğini deneyebilirsiniz. Kaynak denemesine katılmak için:

1. Depolama Alanı Erişim Başlıkları kaynak deneme kayıt sayfasına gidin.
2. Kaynak deneme katılımıyla ilgili talimatları uygulayın.

Yerel olarak test etme

Web sitenizin bu değişikliğe hazır olduğundan emin olmak için Depolama Alanı Erişim Başlıkları özelliğini yerel olarak test edebilirsiniz.

Chrome örneğinizi yapılandırmak için aşağıdaki adımları uygulayın:

1. chrome://flags/#storage-access-headers üzerinde Chrome işaretini etkinleştirin.
2. Değişikliklerin geçerli olması için Chrome'u yeniden başlatın.

Etkileşim kurma ve geri bildirim paylaşma

Geri bildiriminiz varsa veya herhangi bir sorunla karşılaşırsanız sorun bildirebilirsiniz. Depolama Alanı Erişim Başlıkları hakkında daha fazla bilgiyi GitHub'daki açıklama bölümünde bulabilirsiniz.