Depolama Erişim API'sı

Chrome, siteler arası takibi azaltmak için üçüncü taraf çerezlerine yönelik desteği kademeli olarak sonlandırıyor. Bu durum, yerleşik bağlamlarda kimlik doğrulama gibi kullanıcı yolculuklarında çerezlerden yararlanan siteler ve hizmetler açısından bir zorluk oluşturur. Storage Access API (SAA), bu kullanım alanlarının çalışmaya devam etmesini sağlarken siteler arası izlemeyi mümkün olduğunca kısıtlar.

Uygulama durumu

Tarayıcı Desteği

  • 119
  • 85
  • 65
  • 11.1

Kaynak

Storage Access API, önde gelen tüm tarayıcılarda kullanılabilir, ancak tarayıcılar arasında ufak uygulama farklılıkları vardır. Söz konusu farklılıklar, bu yayının ilgili bölümlerinde vurgulanmıştır.

API'yi standartlaştırmadan önce, kalan tüm engelleme sorunlarını çözmeye çalışıyoruz.

Storage Access API nedir?

Storage Access API, erişimin tarayıcı ayarları tarafından reddedilmesi durumunda iframe'lerin depolama erişim izinleri istemesine olanak tanıyan bir JavaScript API'sidir. Siteler arası kaynakların yüklenmesine bağlı olan kullanım alanlarına sahip yerleştirmeler, gerektiğinde kullanıcıdan erişim izni istemek için API'yi kullanabilir.

Depolama isteği onaylanırsa iframe, kullanıcılar üst düzey site olarak ziyaret ettiğinde de kullanılabilen siteler arası çerezlerine erişebilir.

Storage Access API, son kullanıcıya minimum yük ile belirli siteler arası çerez erişiminin sağlanmasına olanak tanırken kullanıcı izleme için sıklıkla kullanılan genel siteler arası çerez erişimini önler.

Kullanım alanları

Bazı üçüncü taraf yerleştirmeleri, kullanıcıya daha iyi bir deneyim sunmak için siteler arası çerezlere erişim gerektirir. Bu da üçüncü taraf çerezleri kullanımdan kaldırıldıktan sonra kullanılamaz.

Kullanım alanlarından bazıları şunlardır:

  • Giriş oturumu ayrıntılarını gerektiren yerleşik yorum widget'ları.
  • Giriş oturumu ayrıntılarının girilmesini gerektiren sosyal medyadaki "Beğen" düğmeleri
  • Giriş oturumu ayrıntıları gerektiren yerleştirilmiş dokümanlar.
  • Yerleştirilmiş videolara sağlanan premium deneyim (örneğin, oturum açmış kullanıcılara reklam göstermemek, kullanıcının altyazı tercihlerini öğrenmek veya belirli video türlerini kısıtlamak için).
  • Yerleşik ödeme sistemleri.

Bu kullanım alanlarının çoğu, yerleştirilmiş iframe'lerde sürekli oturum açma erişimi içerir.

Storage Access API ne zaman diğer API'ler yerine kullanılır?

Storage Access API, üçüncü taraf çerezlerini kullanmanın alternatiflerinden biridir. Bu nedenle, diğerlerine kıyasla bu API'yi ne zaman kullanacağınızı anlamak önemlidir. Bu tablo aşağıdaki durumların her ikisinin de geçerli olduğu kullanım alanları için tasarlanmıştır:

  • Kullanıcı, yerleştirilmiş içerikle etkileşimde bulunur. Diğer bir deyişle, bu bir pasif iframe veya gizli bir iframe değildir.
  • Kullanıcı, yerleştirilmiş kaynağı üst düzey bir bağlamda ziyaret etmiştir (söz konusu kaynak başka bir siteye yerleştirilmediğinde).

Çeşitli kullanım alanları için alternatif API'ler vardır:

  • Bağımsız Bölümlendirilmiş Duruma Sahip Çerezler (CHIPS), geliştiricilerin bir çerezi, üst düzey site başına ayrı bir çerez haznesi ile "bölümlü" depolama için etkinleştirmesine olanak tanır. Örneğin, üçüncü taraf bir web sohbeti widget'ı, oturum bilgilerini kaydetmek için bir çerez ayarlamayı gerektirebilir. Oturum bilgileri site bazında kaydedilir, böylece widget tarafından ayarlanan çereze, gömülü olduğu diğer web sitelerinden erişilmesi gerekmez. Storage Access API, yerleştirilmiş bir üçüncü taraf widget'ında aynı bilgilerin farklı kaynaklarda (ör. giriş yapılmış oturum ayrıntıları veya tercihler) paylaşılması gerektiğinde kullanışlıdır.
  • İlgili Web Siteleri Grupları (RWS), bir kuruluşun siteler arasındaki ilişkileri beyan etmesi için kullanılan bir yöntemdir. Böylece tarayıcılar, belirli amaçlar için sınırlı üçüncü taraf çerezi erişimine izin verir. Sitelerin yine de Storage Access API ile erişim istemesi gerekir ancak gruptaki sitelere kullanıcı istemleri olmadan erişim izni verilebilir.
  • Federated Credential Management (FedCM), birleşik kimlik hizmetlerine yönelik gizliliği korumaya yönelik bir yaklaşımdır. Storage Access API, giriş sonrası çerezlere erişimle ilgilenir. Bazı kullanım örneklerinde FedCM, Storage Access API için alternatif bir çözüm sağlar ve daha giriş odaklı bir tarayıcı istemi içerdiğinden tercih edilebilir. Ancak FedCM'yi benimsemek için genellikle kodunuzda ek değişiklikler (örneğin, HTTP uç noktalarını desteklemek için) yapmanız gerekir.
  • Sahtekarlıkla mücadele, reklamla ilgili ve ölçüm API'leri de mevcuttur ve Storage Access API'nin bu endişeleri gidermesi amaçlanmamıştır.

Storage Access API'yi kullanma

Storage Access API'nin kullanıma sunulması planlanan iki yöntem mevcuttur:

Ayrıca Permissions API ile de entegredir. Bu, üçüncü taraf bağlamında depolama erişimi izninin durumunu kontrol etmenize olanak tanır. Bu, document.requestStorageAccess() çağrısına otomatik olarak verilip verilmeyeceğini gösterir:

hasStorageAccess() yöntemini kullanma

Bir site ilk yüklendiğinde üçüncü taraf çerezlerine erişim izni verilip verilmediğini kontrol etmek için hasStorageAccess() yöntemini kullanabilir.

// Set a hasAccess boolean variable which defaults to false.
let hasAccess = false;

async function handleCookieAccessInit() {
  if (!document.hasStorageAccess) {
    // Storage Access API is not supported so best we can do is
    // hope it's an older browser that doesn't block 3P cookies.
    hasAccess = true;
  } else {
    // Check whether access has been granted via the Storage Access API.
    // Note on page load this will always be false initially so we could be
    // skipped in this example, but including for completeness for when this
    // is not so obvious.
    hasAccess = await document.hasStorageAccess();
    if (!hasAccess) {
      // Handle the lack of access (covered later)
    }
  }
  if (hasAccess) {
    // Use the cookies.
  }
}
handleCookieAccessInit();

Depolama erişimi, bir iframe dokümanına yalnızca requestStorageAccess(), çağrısından sonra verilir. Dolayısıyla, aynı iframe'de başka bir aynı kaynak dokümanına zaten erişim izni verildiği durumlar haricinde, hasStorageAccess() başlangıçta her zaman false döndürür. İzin, özellikle HTML dokümanının ilk isteğinde çerezlerin bulunmasını gerektiren sayfalara erişim verildikten sonra yeniden yüklemelere izin verilmesi için iframe içindeki aynı kaynak gezinmelerinde korunur.

requestStorageAccess() yöntemini kullanma

iframe'in erişimi yoksa requestStorageAccess() yöntemini kullanarak erişim istemesi gerekebilir:

if (!hasAccess) {
  try {
    await document.requestStorageAccess();
  } catch (err) {
    // Access was not granted and it may be gated behind an interaction
    return;
  }
}

Bu ilk kez istendiğinde kullanıcının bu erişimi bir tarayıcı istemiyle onaylaması gerekebilir. Daha sonra söz konusu erişim sözü çözümlenir veya await kullanılırsa istisna olarak sonuçlanacak şekilde reddedilir.

Kötüye kullanımın önlenmesi için bu tarayıcı istemi yalnızca kullanıcı etkileşiminden sonra gösterilir. Bu nedenle requestStorageAccess(), iframe yüklenirken hemen değil, başlangıçta kullanıcı tarafından etkinleştirilen bir etkinlik işleyiciden çağrılmalıdır:

async function doClick() {

  // Only do this extra check if access hasn't already been given
  // based on the hasAccess variable.
  if (!hasAccess) {
    try {
      await document.requestStorageAccess();
      hasAccess = true; // Can assume this was true if above did not reject.
    } catch (err) {
      // Access was not granted.
      return;
    }
  }

  if (hasAccess) {
    // Use the cookies
  }
}

document.querySelector('#my-button').addEventListener('click', doClick);

İzin istemleri

Kullanıcı düğmeyi ilk kez tıkladığında, genellikle adres çubuğunda tarayıcı istemi otomatik olarak görünür. Aşağıda, Chrome isteminin bir örneğini görebilirsiniz, ancak diğer tarayıcıların benzer bir kullanıcı arayüzü vardır:

Chrome Storage Access API izin isteminin ekran görüntüsü
Chrome'un Storage Access API izin istemi

Tarayıcı tarafından istem atlanabilir ve izin belirli durumlarda otomatik olarak sağlanır:

  • İstemi kabul ettikten sonraki 30 gün içinde sayfa ve iframe kullanıldıysa.
  • Yerleştirilmiş iframe'in, İlgili Web Sitesi Grubu'nun parçası olup olmadığı.
  • Firefox'ta, bilinen web siteleri (üst düzeyde etkileşimde bulunduğunuz siteler) için ilk beş denemede istem de atlanır.

Alternatif olarak, yöntem belirli durumlarda istem gösterilmeden otomatik olarak reddedilebilir:

  • Kullanıcı, iframe'in sahibi olan siteyi bir iframe içinde değil, üst düzey doküman olarak daha önce ziyaret etmediyse ve bu siteyle etkileşimde bulunmadıysa. Bu, Storage Access API'nin yalnızca kullanıcıların daha önce birinci taraf bağlamında ziyaret ettiği yerleştirilmiş siteler için yararlı olduğu anlamına gelir.
  • requestStorageAccess() yöntemi, bir etkileşimden sonra istemin önceden onayı alınmadan bir kullanıcı etkileşimi etkinliğinin dışında çağrılırsa.

İlk kullanımda kullanıcıdan onay istenir, ancak sonraki ziyaretlerde requestStorageAccess() herhangi bir istemde bulunulmadan ve Chrome ile Firefox'ta kullanıcı etkileşimi gerektirmeden çözülebilir. Safari'nin her zaman kullanıcı etkileşimi gerektirdiğini unutmayın.

Çerez erişimi, herhangi bir istem veya kullanıcı etkileşimi olmadan verilebileceğinden, bunu destekleyen tarayıcılarda (Chrome ve Firefox) kullanıcı etkileşiminden önce sayfa yükleme sırasında requestStorageAccess() yöntemini çağırarak üçüncü taraf çerezi erişimi elde edilebilir. Bu, üçüncü taraf siteler arası çerezlere hemen erişmenize ve kullanıcı iframe ile etkileşime girmeden önce daha kapsamlı bir deneyim sağlamanıza olanak tanıyabilir. Bu, bazı durumlarda kullanıcı etkileşimini beklemekten daha iyi bir kullanıcı deneyimi sağlayabilir.

storage-access izin sorgusunu kullanma

Bir kullanıcı etkileşimi olmadan erişim izni verilip verilmeyeceğini kontrol etmek için storage-access izninin durumunu kontrol edebilir ve requestStoreAccess() çağrısını yalnızca kullanıcı işlemi gerekmiyorsa erken yapabilirsiniz; böyle bir durumda çağırmak ve bir etkileşim gerekli olduğunda başarısız olmasını sağlayabilirsiniz.

Bu, farklı bir içerik (ör. giriş düğmesi) görüntüleyerek potansiyel olarak istem ihtiyacını önceden ele almanıza da olanak tanır.

Aşağıdaki kod, storage-access izin kontrolünü önceki örneğe ekler:

// Set a hasAccess boolean variable which defaults to false except for
// browsers which don't support the API - where we assume
// such browsers also don't block third-party cookies.
let hasAccess = false;

async function hasCookieAccess() {
  // Check if Storage Access API is supported
  if (!document.requestStorageAccess) {
    // Storage Access API is not supported so best we can do is
    // hope it's an older browser that doesn't block 3P cookies.
    return true;
  }

  // Check if access has already been granted
  if (await document.hasStorageAccess()) {
    return true;
  }

  // Check the storage-access permission
  // Wrap this in a try/catch for browsers that support the
  // Storage Access API but not this permission check
  // (e.g. Safari and older versions of Firefox).
  let permission;
  try {
    permission = await navigator.permissions.query(
      {name: 'storage-access'}
    );
  } catch (error) {
    // storage-access permission not supported. Assume no cookie access.
    return false;
  }

    if (permission) {
    if (permission.state === 'granted') {
      // Permission has previously been granted so can just call
      // requestStorageAccess() without a user interaction and
      // it will resolve automatically.
      try {
        await document.requestStorageAccess();
        return true;
      } catch (error) {
        // This shouldn't really fail if access is granted, but return false
        // if it does.
        return false;
      }
    } else if (permission.state === 'prompt') {
      // Need to call requestStorageAccess() after a user interaction
      // (potentially with a prompt). Can't do anything further here,
      // so handle this in the click handler.
      return false;
          } else if (permission.state === 'denied') {
            // Currently not used. See:
      // https://github.com/privacycg/storage-access/issues/149
      return false;
          }
    }

  // By default return false, though should really be caught by one of above.
  return false;
}

async function handleCookieAccessInit() {
  hasAccess = await hasCookieAccess();

  if (hasAccess) {
    // Use the cookies.
  }
}

handleCookieAccessInit();

Korumalı alana alınmış iframe'ler

Storage Access API'yi korumalı alanda bulunan iframe'lerde kullanırken aşağıdaki korumalı alan izinleri gereklidir:

  • Storage Access API'ye erişim izni vermek için allow-storage-access-by-user-activation gereklidir.
  • API'yi çağırmak üzere JavaScript kullanımına izin vermek için allow-scripts gereklidir.
  • Aynı kaynaklı çerezlere ve diğer depolama alanlarına erişim izni vermek için allow-same-origin gereklidir.

Örneğin:

<iframe sandbox="allow-storage-access-by-user-activation
                 allow-scripts
                 allow-same-origin"
        src="..."></iframe>

Chrome'da Storage Access API ile erişilebilmesi için siteler arası çerezlerin aşağıdaki iki özellikle ayarlanması gerekir:

  • SameSite=None: Çerezi siteler arası olarak işaretlemek için gereklidir
  • Secure: Yalnızca HTTPS siteleri tarafından ayarlanan çerezlere erişilebilir.

Firefox ve Safari'de çerezler varsayılan olarak SameSite=None değerine ayarlanır ve SSA'yı Secure çerezleriyle kısıtlamaz. Bu nedenle, bu özellikler gerekli değildir. SameSite özelliği konusunda açık olmanız ve her zaman Secure çerezlerini kullanmanız önerilir.

Üst düzey sayfa erişimi

Storage Access API, yerleştirilmiş iframe'lerde üçüncü taraf çerezlerine erişim sağlamak amacıyla tasarlanmıştır.

Üst düzey sayfanın, üçüncü taraf çerezlerine erişim gerektirdiği başka kullanım durumları da vardır. Örneğin, çerezlerle kısıtlanan ve site sahiplerinin iframe yerine doğrudan üst düzey dokümana eklemek isteyebilecekleri resimler veya komut dosyaları. Bu kullanım alanını ele almak için Chrome, Storage Access API'ye, requestStorageAccessFor() yöntemi ekleyen bir uzantı önermiştir.

requestStorageAccessFor() yöntemi

Tarayıcı Desteği

  • 119
  • 119
  • x
  • x

Kaynak

requestStorageAccessFor() yöntemi, requestStorageAccess() ile benzer şekilde çalışır, ancak üst düzey kaynaklar için geçerlidir. Üçüncü taraf çerezlerine genel erişim verilmesini önlemek amacıyla yalnızca bir İlgili Web Sitesi Grubu içindeki sitelerde kullanılabilir.

requestStorageAccessFor() ürününün nasıl kullanılacağı hakkında daha fazla bilgi için İlgili Web Sitesi Grupları: geliştirici rehberini okuyun.

top-level-storage-access izin sorgusu

Tarayıcı Desteği

  • 119
  • 119
  • x
  • x

storage-access iznine benzer şekilde, requestStorageAccessFor() için de erişim verilip verilmediğini kontrol etmek üzere top-level-storage-access izni vardır.

Storage Access API'nin RWS ile kullanıldığında arasındaki fark nedir?

İlişkili Websitesi Grupları Storage Access API ile kullanıldığında, aşağıdaki tabloda ayrıntılı olarak açıklandığı üzere belirli ek özellikler kullanılabilir:

RWS'siz RWS Özellikli
Depolama erişimi isteğini başlatmak için kullanıcı hareketi gerektirir
Erişim izni vermeden önce kullanıcının, istenen depolama kaynağını üst düzey bağlamda ziyaret etmesini gerektirir.
İlk kez kullanıcı istemi atlanabilir
Daha önce erişim izni verilmişse requestStorageAccess uygulamasının çağrılması gerekmez
Bir İlişkili Web Sitesi Sitesindeki diğer alanlar genelinde otomatik olarak erişim izni verir
Üst düzey sayfa erişimi için requestStorageAccessFor desteklenir
Storage Access API'yi İlişkili Websitesi Grupları olmadan ve bunlarla ilgili olarak kullanma arasındaki farklar

Demo: Çerezleri ayarlama ve çerezlere erişme

Aşağıdaki demo, demonun ilk ekranında ayarladığınız bir çereze, demonun ikinci sitesindeki yerleşik bir çerçeveden nasıl erişebileceğinizi göstermektedir:

storage-access-api-demo.glitch.me

Demo, üçüncü taraf çerezlerinin devre dışı olduğu bir tarayıcı gerektirir:

  • chrome://flags/#test-third-party-cookie-phaseout bayrağı ayarlanmış ve tarayıcı yeniden başlatılmış olarak Chrome 118 veya sonraki sürümler.
  • Firefox
  • Safari

Kaynaklar