İç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>
.
建议 | 状态 |
---|---|
有关 urn 到配置的 Web API 变更 说明 |
将于 2023 年第 1 季度在 Chrome 中推出。 |
用于广告报告 (FFAR) 的围栏框架中的广告素材宏 GitHub 问题 |
将于 2023 年第 3 季度在 Chrome 中推出。 |
发送自动信标一次 GitHub 问题 |
将于 2023 年第 3 季度在 Chrome 中推出。 |
可序列化围栏框架配置 GitHub 问题 |
将于 2023 年第 3 季度在 Chrome 中推出。 |
Protected Audience 广告尺寸宏的其他格式选项 GitHub 问题 |
将于 2023 年第 4 季度在 Chrome 中推出。 |
向所有注册网址发送自动信标 GitHub 问题 | GitHub 问题 |
将于 2023 年第 4 季度在 Chrome 中推出。 |
允许从 Urn iframe 和广告组件框架中退出广告兴趣组
GitHub 问题 |
将于 2024 年第 1 季度在 Chrome 中推出 |
引入 reservation.top_navigation_start/commit
GitHub 问题、GitHub 问题 |
将于 2024 年第 1 季度在 Chrome 中推出 |
在 3PCD 之前,请勿停用 ReportEvent 中的 Cookie 设置
GitHub 问题 |
将于 2024 年第 1 季度在 Chrome 中推出 |
添加对跨源子框架中的自动信标的支持
GitHub 问题 |
将于 2024 年第 1 季度在 Chrome 中推出 |
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.contributeToHistogram({
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.