Kısıtlanmış çerçevelere genel bakış

Farklı sitelerden gelen verileri paylaşmadan bir sayfaya güvenli şekilde içerik yerleştirin.

Uygulama durumu

• Kullanımdan kaldırılması planlanıyor.
• Gönderme amacı: FencedFrame öğesini ve window.fence API'lerini kaldırma
• Chrome Platform Status

Neden sınırlı çerçevelere ihtiyacımız var?

Sınırlı çerçeve (<fencedframe>), yerleştirilmiş içerik için kullanılan bir HTML öğesidir ve iframe'e benzer. iFrame'lerin aksine, sınırlı çerçeve, çerçeveye farklı sitelerden gelen verilere erişme izni vermek için yerleştirme bağlamıyla iletişimi kısıtlar ancak bu veriler yerleştirme bağlamıyla paylaşılmaz. Bazı Özel Korumalı Alan API'leri, belirli dokümanların sınırlı çerçeve içinde oluşturulmasını gerektirebilir.

Benzer şekilde, yerleştirme bağlamındaki birinci taraf verileri de sınırlı çerçeveyle paylaşılamaz.

Örneğin, news.example (yerleştirme bağlamı), shoes.example reklamını sınırlı çerçeveye yerleştirirse news.example, shoes.example reklamından veri sızdıramaz ve shoes.example, news.example'dan birinci taraf verilerini öğrenemez.

Depolama bölümlendirme ile siteler arası gizliliği güçlendirme

Web'de gezinirken muhtemelen bir sitedeki ürünlere göz atmış ve ardından bu ürünlerin tamamen farklı bir sitedeki reklamda tekrar göründüğünü fark etmişsinizdir.

Günümüzde bu reklamcılık tekniği, öncelikli olarak siteler arasında bilgi paylaşmak için üçüncü taraf çerezlerini kullanan izleme teknolojisi aracılığıyla gerçekleştirilmektedir.

Chrome, depolama alanı bölümleme üzerinde çalışıyor. Bu özellik, tarayıcı depolama alanını siteye göre ayırır. Bölümlendirme olmadan, shoes.example sitesinden bir iframe news.example sitesine yerleştirilirse ve bu iframe depolama alanına bir değer kaydederse bu değer shoes.example sitesinden okunabilir. Depolama alanı bölümlendiğinde siteler arası iframe'ler artık depolama alanını paylaşmayacak. Bu nedenle shoes.example, iframe tarafından depolanan bilgilere erişemeyecek. Iframe *.shoes.example alanından sunuluyor ve *.shoes.example alanına yerleştiriliyorsa tarayıcı depolama alanı paylaşılır. Bunun nedeni, bu alanların aynı site olarak kabul edilmesidir.

Depolama alanı bölümleme, LocalStorage, IndexedDB ve çerezler dahil olmak üzere standart depolama alanı API'lerine uygulanır. Bölümlendirilmiş bir dünyada, birinci taraf depolama alanları arasındaki bilgi sızıntısı önemli ölçüde azalır.

Siteler arası verilerle çalışma

Sınırlı çerçeveler, üst düzey sitelerin verileri bölümlendirmesi gerektiğini öneren bir Özel Korumalı Alan özelliğidir. Birçok Özel Korumalı Alan önerisi ve API'si, üçüncü taraf çerezleri veya diğer izleme mekanizmaları olmadan siteler arası kullanım alanlarını karşılamayı amaçlar. Örneğin:

• Protected Audience API, ilgi alanına dayalı reklam yayınlamaya olanak tanır. Bu API, gizliliği korumaya yönelik olarak tasarlanmıştır.
• Shared Storage, güvenli bir ortamda bölümlenmemiş siteler arası verilere erişime olanak tanır.

Sınırlı çerçeveler, Protected Audience API ile çalışmak üzere tasarlanmıştır. Protected Audience API ile kullanıcının ilgi alanları, reklamverenin sitesinde ilgi alanı grupları halinde kaydedilir. Ayrıca, kullanıcıyı ilgilendirebilecek reklamlar da gösterilir. Ardından, ayrı bir sitede ("yayıncı" olarak bilinir) alakalı ilgi gruplarına kaydedilen reklamlar açık artırmaya çıkarılır ve kazanan reklam, sınırlı çerçevede gösterilir.

Yayıncı, kazanan reklamı bir iFrame'de gösteriyorsa ve komut dosyası iFrame'in src özelliğini okuyabiliyorsa yayıncı, ziyaretçinin ilgi alanları hakkında bilgileri söz konusu reklamın URL'sinden çıkarabilir. Bu yöntem, gizliliği korumaya yönelik değildir.

Yayıncı, sınırlı erişimli bir çerçeveyle ziyaretçi ilgi alanlarına uygun bir reklam gösterebilir ancak src ve ilgi alanı grubu yalnızca çerçevedeki reklamveren tarafından bilinir. Yayıncı bu bilgilere erişemedi.

Sınırlı çerçevelerin işleyiş şekli

Sınırlı çerçeveler, gezinme için FencedFrameConfig nesnesini kullanır. Bu nesne, Protected Audience API açık artırmasından veya Shared Storage'ın URL seçimi işleminden döndürülebilir. Ardından, yapılandırma nesnesi, sınırlı çerçeve öğesinde config özelliği olarak ayarlanır. Bu, src özelliğine bir URL veya opak URN'nin atandığı bir iFrame'den farklıdır. FencedFrameConfig nesnesinin salt okunur url özelliği vardır. Ancak mevcut kullanım alanları, dahili kaynağın gerçek URL'sinin gizlenmesini gerektirdiğinden bu özellik okunduğunda opaque dizesini döndürür.

Sınırlı bir çerçeve, yerleştirildiği öğeyle iletişim kurmak için postMessage kullanamaz. Ancak, sınırlı bir çerçeve, sınırlı çerçeve içindeki iframe'lerle postMessage kullanabilir.

Sınırlı çerçeveler, yayıncıdan başka şekillerde de yalıtılır. Örneğin, yayıncı, sınırlı çerçeve içindeki DOM'a erişemez ve sınırlı çerçeve, yayıncının DOM'una erişemez. Ayrıca, yayıncı tarafından herhangi bir değere ayarlanabilen ve gözlemlenebilen name gibi özellikler, sınırlı çerçevelerde kullanılamaz.

Sınırlı çerçeveler, üst düzey göz atma bağlamı (ör. tarayıcı sekmesi) gibi davranır. Belirli kullanım alanlarında (ör. ilgi alanına dayalı yeniden hedefleme reklamları) bir sınırlı çerçeve siteler arası veriler (ör. Protected Audience API ilgi alanı grubu) içerebilse de çerçeve, bölümlenmemiş depolama alanına veya çerezlere erişemez. Sınırlı çerçeve, tek seferlik sayı tabanlı benzersiz bir çereze ve depolama bölümüne erişebilir.

Çitli çerçevelerin özellikleri açıklayıcı belgede daha ayrıntılı olarak açıklanmıştır.

Sınırlı çerçeveler ile iFrame'ler arasındaki farklar nelerdir?

Fenced frame'lerin neler yapıp neler yapamayacağını öğrendiğinize göre, mevcut iframe özellikleriyle karşılaştırma yapmak faydalı olacaktır.

Fenced frame'ler, gizliliği korumak için daha az harici iletişim seçeneğini destekler.

Fenced frame'ler iFrame'lerin yerini alacak mı?

Sonuç olarak, fenced frame'ler iFrame'lerin yerini almayacak ve bunları kullanmanız gerekmeyecek. Sınırlı çerçeveler, farklı üst düzey bölümlerdeki verilerin aynı sayfada gösterilmesi gerektiğinde kullanılan daha gizli bir çerçevedir.

Aynı siteye ait iFrame'ler (bazen güvenli iFrame'ler olarak da bilinir) güvenilir içerik olarak kabul edilir.

Sınırlı çerçeveleri kullanma

Sınırlı çerçeveler, tek bir sayfada farklı depolama bölümlerindeki dokümanları göstermek için diğer Özel Korumalı Alan API'leriyle birlikte çalışır. Potansiyel API'ler hakkında görüşmeler devam ediyor.

Bu kombinasyon için mevcut adaylar şunlardır:

• TURTLEDOVE API ailesinden (Protected Audience API'nin temelini oluşturur) gelen fenced frame'ler, Shared Storage kullanılarak dönüşüm artışı ölçümü ile çalışabilir.
• Diğer bir seçenek ise sınırlı çerçevelerin salt okunur olmasına veya bölümlenmemiş depolama alanına erişmesine izin vermektir.

Daha fazla bilgi için Fenced Frames kullanım alanları açıklayıcısı başlıklı makaleyi inceleyin.

Örnekler

Bir sınırlı çerçeve config nesnesi elde etmek için Protected Audience API'nin runAdAuction() çağrısına veya Ortak Depolama'nın selectURL() çağrısına resolveToConfig: true iletmeniz gerekir. Özellik eklenmezse (veya false olarak ayarlanırsa) sonuçta elde edilen söz, yalnızca bir iframe'de kullanılabilen bir URN'ye dönüşür.

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Yapılandırmayı aldıktan sonra, çerçeveyi yapılandırmayla temsil edilen kaynağa yönlendirmek için bunu sınırlı bir çerçevenin config özelliğine atayabilirsiniz. Chrome'un eski sürümleri resolveToConfig özelliğini desteklemediğinden gezinmeden önce sözün FencedFrameConfig olarak çözümlendiğini onaylamanız gerekir:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

Daha fazla bilgi edinmek için Fenced Frame ve Fenced Frame yapılandırması açıklayıcılarına bakın.

Üst bilgiler

Tarayıcılar, sınırlı çerçevelerden ve sınırlı çerçeveye yerleştirilmiş iframe'lerden yapılan istekler için Sec-Fetch-Dest: fencedframe değerini ayarlar.

Sec-Fetch-Dest: fencedframe

Bir dokümanın sınırlı çerçeveye yüklenmesi için sunucu, Supports-Loading-Mode: fenced-frame yanıt başlığını ayarlamalıdır. Başlık, sınırlı çerçeve içindeki tüm iframe'ler için de mevcut olmalıdır.

Supports-Loading-Mode: fenced-frame

Ortak Depolama bağlamı

Yerleştirici tarafından sağlanan bağlamsal verilerle ilişkili, sınırlı çerçevelerdeki etkinlik düzeyinde verileri raporlamak için Private Aggregation'ı kullanmak isteyebilirsiniz. fencedFrameConfig.setSharedStorageContext() yöntemini kullanarak yerleştiriciden Protected Audience API tarafından başlatılan Shared Storage iş parçacıklarına etkinlik kimliği gibi bazı bağlamsal veriler iletebilirsiniz.

Aşağıdaki örnekte, yerleştirici sayfada bulunan bazı verileri ve sınırlı çerçevede bulunan bazı verileri paylaşılan depolama alanında saklıyoruz. Yerleştirici sayfasında, paylaşılan depolama bağlamı olarak sahte bir etkinlik kimliği ayarlanır. Sınırlı çerçeveden çerçeve etkinlik verileri iletilir.

Yerleştirici sayfasından, bağlamsal verileri paylaşılan depolama bağlamı olarak ayarlayabilirsiniz:

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });

// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext('some-event-id');

const frame = document.createElement('fencedframe');
frame.config = frameConfig;

Sınırlı çerçeveden, çerçevedeki etkinlik düzeyinde verileri ortak depolama işletebilirine iletebilirsiniz (yukarıdaki yerleştiriciden gelen bağlamsal verilerle ilgili değildir):

const frameData = {
  // Data available only inside the fenced frame
}

await window.sharedStorage.worklet.addModule('reporting-worklet.js');

await window.sharedStorage.run('send-report', {
  data: {
    frameData
  },
});

Yerleştiricinin bağlamsal bilgilerini sharedStorage.context öğesinden, çerçevenin etkinlik düzeyindeki verilerini ise data nesnesinden okuyabilir, ardından bunları Özel Toplama aracılığıyla bildirebilirsiniz:

class ReportingOperation {
  convertEventIdToBucket(eventId) { ... }
  convertEventPayloadToValue(info) { ... }

  async run(data) {
    // Data from the embedder
    const eventId = sharedStorage.context;

    // Data from the fenced frame
    const eventPayload = data.frameData;

    privateAggregation.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

Bir sınırlı çerçeve yapılandırma nesnesindeki yerleştiricinin bağlamı hakkında daha fazla bilgi edinmek için açıklayıcıya bakın.

Sınırlı çerçeveleri deneyin

Chrome flags'i kullanarak chrome://flags/#enable-fenced-frames adresinde Fenced Frame API'yi etkinleştirin.

İletişim kutusunda birden fazla seçenek vardır. Chrome'un kullanıma sunulduğunda yeni mimariye otomatik olarak güncellenmesine olanak tanıyan *Etkinleştir* seçeneğini belirlemenizi önemle tavsiye ederiz.

Diğer seçenekler olan ShadowDOM ile etkin ve Birden fazla sayfa mimarisiyle etkin, yalnızca tarayıcı mühendisleri için geçerli olan farklı uygulama stratejileri sunar. Bugün Etkinleştir, ShadowDOM ile etkinleştirildi ile aynı şekilde çalışır. Gelecekte Etkinleştir, Çok sayfalı mimariyle etkinleştir olarak eşlenecektir.

Özellik algılama

Sınırlı çerçevelerin tanımlanıp tanımlanmadığını belirlemek için:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

Sınırlı çerçeve yapılandırmasının kullanılabilir olup olmadığını belirlemek için:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

Tarayıcı desteği

• MDN
• Chrome Platform Status

Etkileşim kurma ve geri bildirim paylaşma

Fenced Frames aktif olarak tartışılmaktadır ve gelecekte değişebilir. Bu API'yi denerseniz geri bildiriminizi bizimle paylaşmanızı rica ederiz.

• GitHub: Açıklamayı okuyun, soru sorun ve tartışmayı takip edin.

Daha fazla bilgi

• Chrome Platform Status
• Blink Intent to Prototype