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 üstbilgileri eklemek için bir kaynak denemesi başlatıyor: Storage Access Headers. 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ştirilmiş içeriğe dayalı web sitelerinde performansı ve kullanıcı deneyimini iyileştirmeyi amaçlamaktadır.

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

Daha önce, kullanıcı izin vermiş olsa bile her yeniden yüklemede document.requestStorageAccess() için JavaScript API çağrısı yapılması gerekiyordu. Bu yöntem etkili olsa da bazı sınırlamaları vardır:

• Birden fazla ağ gidiş dönüşü: İşlem, yerleştirilmiş içeriğin tam olarak çalışabilmesi için genellikle birkaç ağ isteği ve sayfanın yeniden yüklenmesini gerektiriyordu.
• Iframe bağımlılığı: JavaScript'in yürütülmesi, iframe'lerin veya iframe'lerdeki alt kaynakların kullanılmasını zorunlu kılıyor ve geliştiricilerin esnekliğini sınırlıyordu.

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

1. Yer tutucu yükleme: website.example widget'ı ister. calendar.example widget'ı, website.example sitesine yerleştirildiğinde bölümlere ayrılmamış çerezlerine erişemediği için bunun yerine bir yer tutucu widget oluşturulur.
2. İzin iste: Yer tutucu yüklenir ve storage-access izni istemek için document.requestStorageAccess() işlevi çağrılır.
3. Kullanıcı, izin vermeyi seçer.
4. Widget'ı yeniden yükleyin: Widget, bu kez çerez erişimiyle yenilenir ve sonunda kişiselleştirilmiş içerik yüklenir.
5. Kullanıcı, calendar.example widget'ını yerleştiren bir siteyi her ziyaret ettiğinde akış tam olarak 1, 2 ve 4 numaralı adımlardaki gibi görünür. Tek basitleştirme, kullanıcının erişimi yeniden vermesi gerekmemesidir.

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

HTTP üstbilgileriyle yeni akış

Yeni depolama erişimi başlıkları, iframe dışı kaynaklar da dahil olmak üzere yerleştirilmiş içeriğin daha verimli yüklenmesini sağlar.

Depolama Erişimi Başlıkları ile tarayıcı, kullanıcı daha önce izin vermişse Sec-Fetch-Storage-Access: inactive istek başlığı ayarlanmış kaynakları otomatik olarak getirir. İstek başlığını ayarlamak için geliştiricilerin herhangi bir işlem yapması gerekmez. Sunucu, Activate-Storage-Access: retry; allowed-origin="<origin>" üstbilgisiyle yanıt verebilir ve tarayıcı, gerekli kimlik bilgileriyle isteği yeniden dener.

İstek Başlığı

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

Bir kullanıcı, siteler arası içerik yerleştiren bir sayfayı ziyaret ettiğinde tarayıcı, kimlik bilgileri (ör. çerezler) gerektirebilecek siteler arası isteklere otomatik olarak Sec-Fetch-Storage-Access üstbilgisini ekler. Bu başlık, yerleştirmenin çerez erişim izni durumunu gösterir. Değerleri nasıl yorumlayacağınız aşağıda açıklanmıştır:

• none: Yerleştirme, storage-access iznine sahip olmadığından bölümlenmemiş çerezlere erişemez.
• inactive: Yerleştirme, storage-access iznine sahip ancak bu izni kullanmayı etkinleştirmemiş. Yerleştirme, bölümlenmemiş çerez erişimine sahip değil.
• active: Yerleştirme, bölümlenmemiş çerez erişimine sahip. Bu değer, bölümlenmemiş çerezlere erişimi olan tüm kaynaklar arası isteklerde yer alır.

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 etkinleştirilmiş şekilde yüklemesini söyler. Başlık aşağıdaki değerleri içerebilir:

• load: Tarayıcıya, istenen kaynak için yerleştiriciye bölümlendirilmemiş çerezlere erişim izni vermesini bildirir.
• retry: Sunucu, tarayıcının depolama erişimi iznini etkinleştirmesi ve ardından isteği yeniden denemesi gerektiğini belirtir.

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

Iframe olmayan kaynaklar için destek

Depolama Alanı Erişim Başlıkları güncellemesi, farklı bir alan adında barındırılan resimler gibi iFrame'e yerleştirilmemiş 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 bir resim isteyebilir:

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

Sunucu, çerez olup olmamasına bağlı olarak içerik veya hatayla 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 erişimiyle yeniden denenmesi gerektiğini belirten Activate-Storage-Access: retry başlığıyla yanıt verir. Çerez yoksa ve Sec-Fetch-Storage-Access başlığında etkin olmayan değeri yoksa resim yüklenmez.

HTTP üstbilgi akışı

HTTP üstbilgileri sayesinde tarayıcı, kullanıcının widget'a depolama erişimi izni verdiğini anlayabilir ve sonraki ziyaretlerde iFrame'i bölümlendirilmemiş çerezlere erişimle yükleyebilir.

Storage Access Headers ile sonraki sayfa ziyaretleri aşağıdaki akışı tetikler:

1. Kullanıcı, calendar.example'nin tekrar yerleştirildiği website.example adresini ziyaret eder. Bu getirme işlemi, daha önce olduğu gibi çerezlere henüz erişemiyor. Ancak kullanıcı daha önce storage-access izni vermiş ve getirme işlemi, bölümleme yapılmamış çerez erişiminin mevcut ancak kullanılmadığını belirten bir Sec-Fetch-Storage-Access: inactive üstbilgisi içeriyor.
2. calendar.example sunucusu, kaynak getirme işleminin depolama erişimi izniyle bölümlendirilmemiş çerezlerin kullanılmasını gerektirdiğini belirtmek için Activate-Storage-Access: retry; allowed-origin="<origin>" üstbilgisiyle (bu durumda <origin>, https://website.example olur) yanıt verir.
3. Tarayıcı, isteği yeniden dener. Bu sefer, isteğe bölümlenmemiş çerezleri de dahil eder (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 belirtmek için Activate-Storage-Access: load üstbilgisini içerir (diğer bir deyişle, document.requestStorageAccess() çağrılmış gibi, bölüm oluşturulmamış çerez erişimiyle yükleme).
5. Kullanıcı aracısı, depolama erişimi iznini kullanarak iframe içeriğini bölümlenmemiş çerez erişimiyle yükler. Bu adımdan sonra widget beklendiği gibi çalışabilir.

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

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

1. SAA kullanıyorsunuz ve başlık mantığıyla daha iyi performans elde etmek istiyorsunuz.
2. Sunucunuzda, Origin üstbilgisinin isteğe dahil edilip edilmediğine bağlı bir doğrulama veya mantık vardır.

SAA başlıkları mantığını uygulama

Çözümünüzde depolama alanı erişim başlıklarını kullanmak için çözümünüzü güncellemeniz gerekir. calendar.example hesabının sahibi olduğunuzu varsayalım. website.example, kişiselleştirilmiş bir calendar.example widget'ı yükleyebilmek 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 şu yeni başlıkları 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 demoyu inceleyin.

Origin başlığı mantığınızı güncelleme

Chrome, Storage Access Headers ile Origin üstbilgisini eskisinden daha fazla istekte gönderir. Bu durum, yalnızca belirli istek türleri için (ör. CORS tarafından tanımlananlar) Origin başlığının mevcut olmasına bağlıysa 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 üstbilgisinin daha fazla durumda bulunmasını işlemek için kodunuzu güncelleyin.

Temel avantajlar

Storage Access Headers, SAA'yı kullanmak için önerilen ve daha yüksek performanslı bir yöntemdir. Genel olarak bu değişiklik, çeşitli iyileştirmeler sunar:

• Iframe dışı yerleştirmeler için destek: SAA'nın daha geniş bir kaynak yelpazesinde kullanılmasını sağlar.
• Daha az ağ kullanımı: Daha az istek ve daha küçük yükler.
• Daha düşük CPU kullanımı: Daha az JavaScript işleme.
• Daha iyi kullanıcı deneyimi: Yüklemeler sırasında kesintiye neden olan ara yüklemeleri ortadan kaldırır.

Kaynak denemesine katılma

Kaynak denemeleri, yeni özellikleri denemenize ve kullanılabilirlik, pratiklik ve etkinlikleri hakkında geri bildirim vermenize olanak tanır. Daha fazla bilgi için Get started with origin trials (Kaynak denemelerini kullanmaya başlama) başlıklı makaleyi inceleyin.

Chrome 130'dan itibaren başlayan kaynak denemelerine kaydolarak Depolama Alanı Erişim Başlıkları özelliğini deneyebilirsiniz. Kaynak denemesine katılmak için:

1. Storage Access Headers kaynak denemesi kayıt sayfasına gidin.
2. Kaynak denemesine katılım talimatlarını uygulayın.

Yerel olarak test etme

Web sitenizin bu değişikliğe hazır olduğundan emin olmak için Storage Access Headers ö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 flag'ini 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 kaydı oluşturabilirsiniz. Depolama Alanı Erişim Başlıkları hakkında daha fazla bilgiyi GitHub açıklayıcı belgesinde bulabilirsiniz.