Sematkan konten dengan aman ke halaman tanpa membagikan data lintas situs.
Status penerapan
Dokumen ini menguraikan elemen HTML baru: <fencedframe>
.
- Proposal Frame dengan Fence kini tersedia secara umum.
- Status Platform Chrome
建议 | 状态 |
---|---|
有关 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 中推出 |
Mengapa kita memerlukan bingkai dengan fence?
Bingkai dengan fence (<fencedframe>
) adalah elemen HTML untuk disematkan
konten, mirip dengan iframe. Tidak seperti iframe, frame dengan fence membatasi
komunikasi dengan konteks embedding-nya untuk
memungkinkan akses frame ke lintas situs
tanpa membagikannya dengan konteks embedding. Beberapa API Privacy Sandbox
mungkin memerlukan dokumen tertentu untuk dirender dalam frame dengan fence.
Demikian pula, data pihak pertama apa pun dalam konteks penyematan tidak dapat dibagikan kepada {i>frame<i} berpagar.
Misalnya, news.example
(konteks penyematan) menyematkan iklan dari
shoes.example
dalam bingkai dengan fence. news.example
tidak dapat memindahkan data dari
iklan shoes.example
, dan shoes.example
tidak dapat mempelajari data pihak pertama dari
news.example
.
Perkuat privasi lintas situs dengan partisi penyimpanan
Saat menjelajahi web, Anda mungkin pernah melihat produk di satu situs, Anda telah melihatnya muncul lagi dalam iklan di situs yang benar-benar berbeda.
Saat ini, teknik periklanan ini dicapai terutama melalui pelacakan yang menggunakan cookie pihak ketiga untuk berbagi informasi di seluruh situs. Ini adalah teknologi yang dikomitmenkan Chrome untuk keluar dan ganti dengan varian yang lebih menjaga privasi.
Chrome sedang mengerjakan penyimpanan
pembuatan partisi, yang
memisahkan penyimpanan browser per situs. Saat ini, jika iframe dari shoes.example
disematkan di news.example
, dan iframe tersebut menyimpan nilai ke dalam penyimpanan,
maka nilai tersebut dapat dibaca dari situs shoes.example
. Kapan penyimpanan telah
iframe lintas situs yang dipartisi tidak akan lagi berbagi penyimpanan,
shoes.example
tidak akan dapat mengakses informasi yang disimpan oleh iframe. Jika
iframe ditayangkan dari *.shoes.example
dan disematkan di
*.shoes.example
, penyimpanan browser akan digunakan bersama karena dianggap sebagai situs yang sama.
Partisi penyimpanan akan diterapkan ke API penyimpanan standar, termasuk LocalStorage, IndexedDB, dan cookie. Dalam dunia yang terpartisi, informasi kebocoran di seluruh penyimpanan pihak pertama akan berkurang secara signifikan.
Bekerja dengan data lintas situs
Frame berpagar adalah fitur Privacy Sandbox yang menyarankan situs tingkat atas untuk mempartisi data. Banyak Privacy Sandbox dan API ditujukan untuk memenuhi kasus penggunaan lintas situs tanpa cookie pihak ketiga, mekanisme pelacakan lainnya. Contoh:
- Protected Audience API memungkinkan penayangan iklan menurut minat dengan cara yang menjaga privasi.
- Penyimpanan Bersama memungkinkan akses ke data lintas situs yang tidak dipartisi dalam lingkungan yang aman.
Mari kita pertimbangkan bagaimana {i>fence frame<i} dapat bekerja dengan Protected Audience API. Dengan Protected Audience API, minat pengguna terdaftar di situs pengiklan di minat grup, bersama dengan iklan yang mungkin menarik bagi pengguna. Kemudian, pada situs terpisah (dikenal sebagai "penayang"), iklan yang terdaftar dalam grup minat yang relevan dilelang dan iklan pemenang ditampilkan dalam bingkai dengan pagar.
Jika penayang menampilkan iklan pemenang dalam iframe dan skrip dapat membaca
atribut src
iframe, penayang dapat menyimpulkan informasi tentang atribut
minat dari URL iklan tersebut. Tindakan ini tidak melindungi privasi.
Dengan bingkai dengan pagar, penayang dapat menampilkan iklan yang cocok dengan pengunjung
minat, tetapi src
dan grup minat hanya akan diketahui oleh pengiklan
dalam bingkai. Penerbit tidak dapat mengakses informasi ini.
Bagaimana cara kerja bingkai dengan fence?
Frame berpagar menggunakan objek FencedFrameConfig
untuk navigasi. Objek ini dapat ditampilkan dari lelang Protected Audience API atau operasi pemilihan URL Penyimpanan Bersama. Kemudian, objek konfigurasi ditetapkan sebagai atribut config
pada elemen frame dengan fence. Ini berbeda dengan iframe tempat URL atau URN buram ditetapkan ke atribut src
. Objek FencedFrameConfig
memiliki properti url
hanya baca; namun, karena kasus penggunaan saat ini memerlukan URL aktual dari resource internal untuk disembunyikan, properti ini akan menampilkan string opaque
saat dibaca.
Frame dengan fence tidak dapat menggunakan postMessage
untuk berkomunikasi dengan sematannya. Namun, frame dengan fence dapat menggunakan postMessage
dengan iframe di dalam frame dengan fence.
Frame berpagar akan diisolasi dari penerbit dengan cara lain. Misalnya
penayang tidak akan memiliki akses ke DOM di dalam bingkai dengan fence, dan
frame dengan fence tidak dapat mengakses DOM penayang. Selanjutnya, atribut seperti
name
—yang dapat ditetapkan ke nilai apa pun dan diamati oleh
penayang—tidak tersedia dalam frame dengan fence.
Bingkai dengan pagar berperilaku seperti penjelajahan tingkat atas
konteks
(misalnya, tab browser). Meskipun fence dalam kasus penggunaan tertentu
(seperti opaque-ads
) dapat berisi data lintas situs (seperti minat Protected Audience API
grup), frame tidak dapat mengakses penyimpanan atau cookie yang tidak dipartisi. Channel
opaque-ads
frame dengan fence dapat mengakses cookie dan penyimpanan unik berbasis nonce
partisi.
Karakteristik bingkai dengan fence diuraikan lebih lanjut dalam penjelasan kami.
Bagaimana perbedaan frame dengan fence dibandingkan dengan iframe?
Setelah Anda mengetahui apa yang akan dan tidak akan dilakukan {i>fence, <i}kita perlu membandingkan ke fitur iframe yang ada.
Fitur | iframe |
fencedframe |
---|---|---|
Menyematkan konten | Ya | Ya |
Konten yang disematkan dapat mengakses DOM konteks penyematan | Ya | Tidak |
Menyematkan konteks dapat mengakses DOM konten yang disematkan | Ya | Tidak |
Atribut yang dapat diamati, seperti name |
Ya | Tidak |
URL (http://example.com ) |
Ya | Ya (bergantung pada kasus penggunaan) |
Sumber buram yang dikelola browser (urn:uuid ) |
Tidak | Ya |
Akses ke data lintas situs | Tidak | Ya (bergantung pada kasus penggunaan) |
Frame berpagar mendukung lebih sedikit opsi komunikasi eksternal untuk menjaga privasi.
Apakah frame dengan fence menggantikan iframe?
Pada akhirnya, frame dengan fence tidak akan menggantikan iframe dan Anda tidak perlu menggunakannya. {i>Frame<i} berpagar adalah {i>frame<i} yang lebih pribadi untuk digunakan ketika data dari partisi tingkat atas yang berbeda perlu ditampilkan di halaman yang sama.
iframe situs yang sama (terkadang dikenal sebagai iframe ramah) dianggap tepercaya saat ini.
Menggunakan bingkai dengan fence
Frame berpagar akan berfungsi bersama API Privacy Sandbox lain untuk menampilkan dokumen dari partisi penyimpanan yang berbeda dalam satu halaman. API potensial saat ini sedang dibahas.
Kandidat saat ini untuk kombinasi ini mencakup:
- Dari kelompok TURTLEDOVE API (yang sebagai dasar untuk Protected Audience API), bingkai dengan fence dapat berfungsi dengan Conversion Lift Pengukuran menggunakan Penyimpanan Bersama.
- Pilihan lain adalah dengan mengizinkan {i> fence <i}untuk hanya baca atau akses tidak dipartisi Google Cloud Storage.
Untuk detail selengkapnya, lihat Bingkai Berpagar penjelasan kasus penggunaan.
Contoh
Untuk mendapatkan objek config
frame dengan fence, Anda harus meneruskan resolveToConfig: true
ke panggilan runAdAuction()
Protected Audience API atau panggilan selectURL()
Penyimpanan Bersama. Jika properti tidak ditambahkan (atau ditetapkan ke false
), promise yang dihasilkan akan di-resolve menjadi URN yang hanya dapat digunakan dalam iframe.
const frameConfig = await navigator.runAdAuction({ // ...auction configuration resolveToConfig: true });
const frameConfig = await sharedStorage.selectURL('operation-name', { resolveToConfig: true });
Setelah memperoleh konfigurasi, Anda dapat menetapkannya ke atribut config
frame dengan fence untuk membuka frame ke resource yang diwakili oleh konfigurasi. Chrome versi lama tidak mendukung properti resolveToConfig
, sehingga Anda tetap harus mengonfirmasi bahwa promise telah ditetapkan ke FencedFrameConfig
sebelum membuka:
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { const frame = document.createElement('fencedframe'); frame.config = frameConfig; }
Untuk mempelajari lebih lanjut, lihat penjelasan Fenced Frame dan Fenced Frame config.
Header
Browser akan menetapkan Sec-Fetch-Dest: fencedframe
untuk permintaan yang dibuat dari frame dengan fence dan iframe yang disematkan dalam frame dengan fence.
Sec-Fetch-Dest: fencedframe
Server harus menetapkan header respons Supports-Loading-Mode: fenced-frame
untuk dokumen yang akan dimuat dalam frame dengan fence. Header juga harus ada untuk iframe apa pun di dalam frame dengan fence.
Supports-Loading-Mode: fenced-frame
Konteks Penyimpanan Bersama
Anda mungkin perlu menggunakan Private Aggregation untuk melaporkan data tingkat peristiwa dalam frame dengan fence yang terkait dengan data kontekstual dari sematan. Dengan menggunakan metode fencedFrameConfig.setSharedStorageContext()
, Anda dapat meneruskan beberapa data kontekstual, seperti ID peristiwa, dari sematan ke worklet penyimpanan bersama yang dimulai oleh Protected Audience API.
Pada contoh berikut, kami menyimpan beberapa data yang tersedia di halaman sematan dan beberapa data yang tersedia dalam frame dengan fence di penyimpanan bersama. Dari halaman sematan, ID peristiwa tiruan ditetapkan sebagai konteks penyimpanan bersama. Dari frame dengan fence, data peristiwa frame diteruskan.
Dari halaman sematan, Anda dapat menetapkan data kontekstual sebagai konteks penyimpanan bersama:
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;
Dari frame dengan fence, Anda dapat meneruskan data tingkat peristiwa dari frame ke worklet penyimpanan bersama (tidak terkait dengan data kontekstual dari embeddingder di atas):
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
},
});
Anda dapat membaca informasi kontekstual sematan dari sharedStorage.context
dan data tingkat peristiwa frame dari objek data
, lalu melaporkannya melalui Private Aggregation:
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);
Untuk mempelajari lebih lanjut konteks sematan dalam objek konfigurasi frame dengan fence, lihat penjelasan.
Coba bingkai dengan fence
Gunakan Chrome
tanda untuk
mengaktifkan Fenced Frame API di chrome://flags/#enable-fenced-frames
.
Ada beberapa pilihan dalam dialog. Sebaiknya Anda memilih *Aktifkan*, yang memungkinkan Chrome diupdate secara otomatis ke arsitektur baru saat tersedia.
Opsi lainnya, Enabled with ShadowDOM dan Enabled with multiple arsitektur halaman, menawarkan berbagai strategi implementasi yang hanya relevan bagi insinyur browser. Saat ini, opsi Aktifkan berfungsi dengan cara yang sama seperti Diaktifkan dengan ShadowDOM. Di masa mendatang, Enable akan dipetakan ke Enable with arsitektur multi-halaman.
Deteksi fitur
Untuk menentukan apakah frame dengan fence ditentukan:
if (window.HTMLFencedFrameElement) {
// The fenced frame element is defined
}
Untuk menentukan apakah konfigurasi frame dengan fence tersedia:
js
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
// The fenced frame config is available
}
Dukungan browser
Elemen <fencedframe>
masih dalam mode eksperimental, sehingga saat ini elemen tersebut
didukung mulai Chrome 97 dan seterusnya. Saat ini, fitur tersebut tidak didukung oleh
browser.
Berinteraksi dan memberikan masukan
Bingkai Berpagar sedang dalam diskusi aktif dan dapat berubah sewaktu-waktu masa depan. Jika Anda mencoba API ini dan memiliki masukan, kami ingin sekali mendengarnya.
- GitHub: Baca penjelasan, ajukan pertanyaan, dan ikuti diskusi.
- Dukungan developer: Ajukan pertanyaan dan ikuti diskusi di Dukungan Developer Privacy Sandbox Repositories.