İçeriği siteler arası veriler paylaşmadan güvenli bir şekilde bir sayfaya yerleştirin.
Uygulama durumu
Bu dokümanda yeni bir HTML öğesi özetlenmektedir: <fencedframe>.
| Teklif | Durum |
|---|---|
| Config'e geçiş için Web API değişiklikleri Açıklayıcı |
2023'ün 1. çeyreğinde Chrome'da kullanıma sunulacaktır. |
| Reklam Raporları İçin Özel Çerçevelerde Reklam Öğesi Makroları (FFAR) GitHub Sorunu |
2023'ün 3. çeyreğinde Chrome'da kullanıma sunulacaktır. |
| Otomatik İşaretçileri Bir Kez Gönder GitHub Sorunu |
2023'ün 3. çeyreğinde Chrome'da kullanıma sunulacaktır. |
| Serileştirilebilir Sınırlandırılmış Çerçeve Yapılandırmaları GitHub Sorunu |
2023'ün 3. çeyreğinde Chrome'da kullanıma sunulacaktır. |
| Korunan Kitle Reklam Boyutu Makroları için Ek Biçim Seçeneği GitHub Sorunu |
2023'ün 4. çeyreğinde Chrome'da kullanıma sunulacaktır. |
| Tüm kayıtlı URL'lere gönderilen otomatik işaretçiler GitHub Sorunu | GitHub Sorunu |
2023'ün 4. çeyreğinde Chrome'da kullanıma sunulacaktır. |
| Reklam İlgi Alanı Gruplarının Urn iFrame'lerden ve Reklam Bileşeni Çerçevelerinden Çıkmasını Etkinleştir
GitHub sorunu |
2024'ün 1. çeyreğinde Chrome'da kullanıma sunulacak |
| Introduce Reserve.top_navigation_start/commit
GitHub sorunu, GitHub sorunu |
2024'ün 1. çeyreğinde Chrome'da kullanıma sunulacak |
| 3PCD'ye kadar ReportEvent'te Çerez Ayarını Devre Dışı Bırakma
GitHub sorunu |
2024'ün 1. çeyreğinde Chrome'da kullanıma sunulacak |
| Kaynaklar arası alt çerçevelerde otomatik işaretçiler için destek eklendi
GitHub sorunu |
2024'ün 1. çeyreğinde Chrome'da kullanıma sunulacak |
Neden özel çerçevelere ihtiyacımız var?
Kısıtlanmış çerçeve (<fencedframe>), iframe'e benzer şekilde, yerleştirilmiş içeriğe yönelik bir HTML öğesidir. iFrame'lerden farklı olarak, sınırlı bir çerçeve, yerleştirme bağlamıyla paylaşılmadan çerçevenin siteler arası verilere erişmesine izin vermek için yerleştirme bağlamıyla iletişimi kısıtlar. Bazı Özel Korumalı Alan API'leri, belirli dokümanların sınırlı bir çerçeve içinde oluşturulmasını gerektirebilir.
Benzer şekilde, yerleştirme bağlamındaki birinci taraf verileri, sınırlandırılmış çerçeveyle paylaşılamaz.
Örneğin, news.example öğesinin (yerleştirme bağlamı) shoes.example sitesinden bir reklamı sınırlı bir çerçeveye yerleştirdiğini varsayalım. news.example, shoes.example reklamından veri sızdıramaz ve shoes.example, news.example kaynağından birinci taraf verilerini öğrenemez.
Depolama bölümlendirme işleviyle siteler arası gizliliği güçlendirin
Web'de gezinirken büyük olasılıkla bir sitedeki ürünlere bakmış ve sonra bu ürünlerin tamamen farklı bir sitedeki bir reklamda tekrar göründüğünü fark etmişsinizdir.
Günümüzde bu reklamcılık tekniğinde esas olarak, siteler arasında bilgi paylaşmak için üçüncü taraf çerezleri kullanan izleme teknolojisi kullanılıyor. Chrome bu teknolojiyi aşamalı olarak kullanımdan kaldırıp gizliliği daha fazla korumaya yönelik varyantlarla değiştirmiştir.
Chrome, tarayıcı depolama alanını site bazında ayıran depolama alanı bölümlendirme işlemi üzerinde çalışmaktadır. Şu anda, shoes.example kaynaklı bir iframe news.example üzerine yerleştirilmişse ve bu iframe bir değeri depolama alanına depoluyorsa bu değer shoes.example sitesinden okunabilir. Depolama bölümlendirildiğinde, siteler arası iframe'ler artık depolama alanını paylaşmayacaktır. Bu nedenle shoes.example, iframe tarafından depolanan bilgilere erişemeyecektir. iFrame *.shoes.example üzerinden sunuluyor ve *.shoes.example üzerine yerleştirilmişse tarayıcı depolama alanı aynı site olarak kabul edildiğinden paylaşılır.
Depolama bölümlendirme; LocalStorage, IndexedDB ve çerezler de dahil olmak üzere standart depolama API'lerine uygulanır. Bölümlendirilmiş bir dünyada, birinci taraf depolama alanlarındaki bilgi sızıntısı önemli ölçüde azaltılacaktır.
Siteler arası verilerle çalışma
Eskrimli çerçeveler, üst düzey sitelerin verileri bölümlendirmesi gerektiğini gösteren bir Özel Korumalı Alan özelliğidir. Birçok Özel Korumalı Alan teklifi ve API, üçüncü taraf çerezleri veya diğer izleme mekanizmaları olmadan siteler arası kullanım alanlarını karşılamayı hedefler. Örneğin:
- Protected Audience API, gizliliği koruyan bir şekilde ilgi alanına dayalı reklam sunulmasına olanak tanır.
- Paylaşılan Depolama, güvenli bir ortamda siteler arası ve bölümlendirilmemiş verilere erişime olanak tanır.
Sınırlandırılmış çerçevelerin Protected Audience API ile nasıl çalışabileceğini inceleyelim. Protected Audience API ile kullanıcının ilgi alanları, reklamverenin sitesinde kullanıcının ilgisini çekebilecek reklamlarla birlikte ilgi alanı gruplarında kaydedilir. Ardından ayrı bir sitede ("yayıncı" olarak bilinir), alakalı ilgi alanı gruplarında kayıtlı reklamlar açık artırmaya katılır ve kazanan reklam sınırlanmış bir çerçeve içinde görüntülenir.
Yayıncı, kazanan reklamı bir iframe içinde görüntüler ve komut dosyası iframe'in src özelliğini okuyabiliyorsa, ziyaretçinin ilgi alanları hakkındaki bilgileri bu reklamın URL'sinden çıkarabilir. Bu, gizliliğin korunması değildir.
Yayıncı, sınırlı bir çerçeveyle, ziyaretçilerin ilgi alanlarıyla eşleşen bir reklam görüntüleyebilir, ancak src ve ilgi alanı grubu yalnızca çerçevedeki reklamveren tarafından tanınacaktır. Yayıncı bu bilgilere erişemedi.
Kısıtlanmış çerçeveler nasıl çalışır?
Kısıtlanmış çerçeveler, gezinme için FencedFrameConfig nesnesini kullanır. Bu nesne, Protected Audience API açık artırmasından veya Paylaşılan Depolama Alanı'nın URL seçimi işleminden döndürülebilir. Ardından yapılandırma nesnesi, sınırlanmış çerçeve öğesinde config özelliği olarak ayarlanır. Bu, src özelliğine bir URL veya opak URN'nin atandığı iframe'den farklıdır. FencedFrameConfig nesnesi salt okunur url özelliğine sahiptir; ancak mevcut kullanım alanları dahili kaynağın gerçek URL'sinin gizlenmesini gerektirdiğinden bu özellik okunurken opaque dizesini döndürür.
Sınırlanmış bir çerçeve, yerleştiriciyle iletişim kurmak için postMessage kullanamaz. Ancak, sınırlı bir çerçevede postMessage, sınırlı çerçeve içinde iframe'lerle kullanılabilir.
Kısıtlanmış çerçeveler, yayıncıdan başka yollarla izole edilir. Örneğin, yayıncı sınırlı bir çerçeve içindeki DOM'a erişemez ve sınırlı çerçeve yayıncının DOM'sine erişemez. Ayrıca, yayıncı tarafından herhangi bir değere ayarlanabilen ve gözlemlenebilen name gibi özellikler, sınırlanmış çerçevelerde kullanılamaz.
Kısıtlanmış çerçeveler, üst düzey tarama içeriği (ör. tarayıcı sekmesi) gibi davranır. Belirli kullanım alanlarında (opaque-ads gibi) sınırlı bir çerçeve, siteler arası veriler (ör. Protected Audience API ilgi alanı grubu) içerebilir ancak çerçeve bölümlendirilmemiş depolama alanına veya çerezlere erişemez. opaque-ads sınırıyla ayrılmış bir çerçeve, benzersiz, nonce tabanlı bir çerez ve depolama bölümüne erişebilir.
Özel çerçevelerin özellikleri açıklayıcıda daha ayrıntılı olarak açıklanmıştır.
Kısıtlanmış çerçeveler ile iç çerçeveler arasındaki fark nedir?
Artık sınırlanmış çerçevelerin neyi yapıp yapmayacağını bildiğinize göre mevcut iframe özellikleriyle karşılaştırmak yararlı olur.
| Öne Çıkarın | iframe |
fencedframe |
|---|---|---|
| İçerik yerleştirme | Evet | Evet |
| Yerleştirilmiş içerik, yerleştirme bağlamı DOM'sine erişebilir | Evet | Hayır |
| Yerleştirme bağlamı, yerleştirilmiş içerik DOM'una erişebilir | Evet | Hayır |
name gibi gözlemlenebilir özellikler |
Evet | Hayır |
URL'ler (http://example.com) |
Evet | Evet (kullanım alanına bağlıdır) |
Tarayıcı tarafından yönetilen opak kaynak (urn:uuid) |
Hayır | Evet |
| Siteler arası verilere erişim | Hayır | Evet (kullanım alanına bağlıdır) |
Kısıtlanmış çerçeveler, gizliliği korumak için daha az harici iletişim seçeneğini destekler.
Sınırlandırılmış çerçeveler iframe'lerin yerini mi alacak?
Son olarak, sınırlanmış çerçeveler iframe'lerin yerini almaz ve bunları kullanmak zorunda kalmazsınız. Kısıtlanmış çerçeveler, farklı üst düzey bölümlerden verilerin aynı sayfada görüntülenmesi gerektiğinde kullanım için daha gizli bir çerçevedir.
Aynı site iframe'leri (bazen uygun iframe'ler olarak da bilinir) güvenilir içerik olarak kabul edilir.
Kısıtlanmış çerçeveler kullanın
Kısıtlanmış çerçeveler, farklı depolama bölümlerindeki dokümanları tek bir sayfada görüntülemek için diğer Özel Korumalı Alan API'leriyle birlikte çalışır. Potansiyel API'ler şu anda tartışılıyor.
Bu kombinasyon için mevcut adaylar şunlardır:
- Eskrimli çerçeveler, TURTLEDOVE API ailesinden (Protected Audience API'nin temelini oluşturur) Paylaşılan Depolama kullanılarak Conversion Lift Measurement ile kullanılabilir.
- Başka bir seçenek de, sınırlanmış çerçevelerin salt okunur veya bölümlendirilmemiş depolama alanına erişmesine izin vermektir.
Daha ayrıntılı bilgi için Etilmiş Çerçeveler kullanım alanları açıklayıcısı bölümüne bakın.
Örnekler
Kısıtlanmış çerçeve config nesnesi elde etmek için resolveToConfig: true içinde Protected Audience API'nin runAdAuction() çağrısına veya Paylaşılan Depolama Alanı'nın selectURL() çağrısına geçmeniz gerekir. Özellik eklenmezse (veya false değerine ayarlanırsa) sonuçta elde edilen vaat, yalnızca iframe'de kullanılabilecek bir URN'ye çözümlenir.
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ırmanın temsil ettiği kaynağa gitmek için sınırlı bir çerçevenin config özelliğine atayabilirsiniz. Chrome'un eski sürümleri resolveToConfig özelliğini desteklemez. Bu nedenle, devam etmeden önce sözünün FencedFrameConfig ile sonuçlandığını onaylamanız gerekir:
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
const frame = document.createElement('fencedframe');
frame.config = frameConfig;
}
Daha fazla bilgi edinmek için Sınırlandırılmış Çerçeve ve Etilmiş Çerçeve yapılandırması açıklamalarına göz atın.
Üst bilgiler
Tarayıcılar, sınırlanmış bir çerçeveye yerleştirilmiş çerçevelerden ve 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ı bir ç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ı bir çerçevenin içindeki tüm iframe'ler için de bulunmalıdır.
Supports-Loading-Mode: fenced-frame
Paylaşılan depolama bağlamı
Yerleştiricideki bağlamsal verilerle ilişkili sınırlı çerçevelerde etkinlik düzeyindeki verileri raporlamak için Gizli Toplama'yı kullanabilirsiniz. fencedFrameConfig.setSharedStorageContext() yöntemini kullanarak, etkinlik kimliği gibi bazı bağlamsal verileri, yerleştiriciden Protected Audience API tarafından başlatılan paylaşılan depolama alanı iş akışlarına aktarabilirsiniz.
Aşağıdaki örnekte, gömme aracı sayfasında bulunan verilerin bir kısmını ve sınırlı bir çerçevedeki verilerin bir kısmını paylaşılan bir depolama alanında depoluyoruz. Yerleştirme sayfasında, paylaşılan depolama bağlamı olarak bir örnek etkinlik kimliği ayarlanır. Çerçeveyle ayrılmış çerçeveden, çerçeve etkinlik verileri içeri aktarılır.
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;
Kısıtlanmış çerçeveden, etkinlik düzeyindeki verileri çerçeveden paylaşılan depolama iş akışına aktarabilirsiniz (yukarıdaki yerleştirilmiş oluşturucudaki bağlamsal verilerle alakasız):
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ştirenin bağlam bilgilerini sharedStorage.context adresinden, çerçevenin etkinlik düzeyindeki verilerini ise data nesnesinden okuyabilir, ardından bunları Gizli 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.sendHistogramReport({
bucket: convertEventIdToBucket(eventId),
value: convertEventPayloadToValue(eventPayload)
});
}
}
register('send-report', ReportingOperation);
Örtülü çerçeve yapılandırma nesnesindeki yerleştirici bağlamı hakkında daha fazla bilgi edinmek için açıklayıcıya bakın.
Kısıtlanmış çerçeveleri deneyin
chrome://flags/#enable-fenced-frames konumunda Fenced Frame API'yi etkinleştirmek için Chrome işaretlerini kullanın.
İletişim kutusunda birden fazla seçenek var. Yeni mimari kullanıma sunulduğunda Chrome'un otomatik olarak güncellenmesini sağlayan *Etkinleştir*'i seçmenizi önemle tavsiye ederiz.
ShadowDOM ile etkinleştirildi ve Birden çok sayfa mimarisiyle etkinleştirildi seçenekleri, yalnızca tarayıcı mühendisleri için geçerli olan farklı uygulama stratejileri sunar. Şu anda Etkinleştir, ShadowDOM ile etkinleştirildi ile aynı şekilde çalışmaktadır. Gelecekte Etkinleştir seçeneği Çok sayfalı mimariyle etkinleştir ile eşlenecektir.
Özellik algılama
Kısıtlanmış çerçevelerin tanımlanıp tanımlanmadığını belirlemek için:
if (window.HTMLFencedFrameElement) {
// The fenced frame element is defined
}
Sınırlandırılmış çerçeve yapılandırmasının kullanılabilir olup olmadığını belirlemek için:
js
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
// The fenced frame config is available
}
Tarayıcı desteği
<fencedframe> öğesi hâlâ deneysel modda olduğundan şu anda Chrome 97'den itibaren desteklenmektedir. Şu anda diğer tarayıcılar tarafından desteklenmemektedir.
Etkileşimde bulunun ve geri bildirim paylaşın
Çitlenmiş Çerçeveler şu anda aktif bir şekilde tartışılmaktadır ve ileride değiştirilebilir. Bu API'yi deneyip geri bildirimde bulunursanız memnuniyet duyarız.
- GitHub: Açıklayıcıyı okuyun, soruları sorun ve tartışmaları takip edin.
- Geliştirici desteği: Özel Korumalı Alan Geliştirici Desteği deposunda sorular sorun ve tartışmalara katılın.