Sematkan konten ke halaman dengan aman 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
Proposal | Status |
---|---|
Perubahan Web API untuk urn ke konfigurasi Explainer |
Tersedia di Chrome pada Q1 2023. |
Makro Materi Iklan dalam Fenced Frames for Ads Reporting (FFAR) Masalah GitHub |
Tersedia di Chrome pada Q3 2023. |
Kirim Beacon Otomatis Sekali Masalah GitHub |
Tersedia di Chrome pada Q3 2023. |
Konfigurasi Frame dengan Fenced Serializable Masalah GitHub |
Tersedia di Chrome pada Q3 2023. |
Opsi Format Tambahan untuk Makro Ukuran Iklan Protected Audience Masalah GitHub |
Tersedia di Chrome pada Q4 2023. |
Beacon otomatis dikirim ke semua URL terdaftar Masalah GitHub | Masalah GitHub |
Tersedia di Chrome pada Q4 2023. |
Aktifkan Keluar dari Grup Minat Iklan dari iFrame Pengguna dan Frame Komponen Iklan
Masalah GitHub |
Tersedia di Chrome pada Kuartal 1 2024 |
Memperkenalkan cadangan.top_navigation_start/commit
Masalah GitHub, Masalah GitHub |
Tersedia di Chrome pada Kuartal 1 2024 |
Jangan Nonaktifkan Setelan Cookie di ReportEvent hingga
masalah GitHub |
Tersedia di Chrome pada Kuartal 1 2024 |
Menambahkan dukungan untuk beacon otomatis di subframe lintas asal
Masalah GitHub |
Tersedia di Chrome pada Kuartal 1 2024 |
Mengapa kita memerlukan frame dengan fence?
Frame dengan fence (<fencedframe>
) adalah elemen HTML untuk konten
yang disematkan, mirip dengan iframe. Tidak seperti iframe, frame dengan fence membatasi komunikasi dengan konteks embeddingnya, untuk memungkinkan akses frame ke data lintas situs tanpa membagikannya dengan konteks embedding. Beberapa Privacy Sandbox API
mungkin memerlukan dokumen tertentu untuk dirender dalam frame fence.
Demikian pula, data pihak pertama apa pun dalam konteks penyematan tidak dapat dibagikan ke frame fence.
Misalnya, news.example
(konteks penyematan) menyematkan iklan dari
shoes.example
dalam frame dengan fence. news.example
tidak boleh mengambil data yang tidak sah dari
iklan shoes.example
, dan shoes.example
tidak dapat mempelajari data pihak pertama dari
news.example
.
Memperkuat privasi lintas situs dengan partisi penyimpanan
Saat menjelajahi web, Anda mungkin pernah melihat produk di satu situs, lalu melihat produk tersebut muncul kembali dalam iklan di situs yang sama sekali berbeda.
Saat ini, teknik periklanan ini dicapai terutama melalui teknologi pelacakan yang menggunakan cookie pihak ketiga untuk berbagi informasi di seluruh situs. Ini adalah teknologi yang dikomitmenkan oleh Chrome untuk dihentikan dan diganti dengan varian yang lebih menjaga privasi.
Chrome sedang berupaya partisi
penyimpanan, 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,
nilai tersebut dapat dibaca dari situs shoes.example
. Jika penyimpanan telah
dipartisi, iframe lintas situs tidak akan lagi berbagi penyimpanan, sehingga
shoes.example
tidak akan dapat mengakses informasi yang disimpan oleh iframe. Jika iframe ditayangkan dari *.shoes.example
dan disematkan pada *.shoes.example
, penyimpanan browser akan dibagikan karena dianggap sebagai situs yang sama.
Partisi penyimpanan akan diterapkan ke API penyimpanan standar, termasuk LocalStorage, IndexedDB, dan cookie. Pada dunia yang terpartisi, kebocoran informasi di seluruh penyimpanan pihak pertama akan berkurang secara signifikan.
Bekerja dengan data lintas situs
Frame dengan fence adalah fitur Privacy Sandbox yang menyarankan agar situs tingkat atas harus mempartisi data. Banyak proposal Privacy Sandbox dan API bertujuan untuk memenuhi kasus penggunaan lintas situs tanpa cookie pihak ketiga atau 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 di lingkungan yang aman.
Mari kita pertimbangkan cara kerja frame dengan fence dengan Protected Audience API. Dengan Protected Audience API, minat pengguna didaftarkan di situs pengiklan di grup minat, bersama dengan iklan yang mungkin menarik bagi pengguna. Kemudian, di situs terpisah (dikenal sebagai "penayang"), iklan yang terdaftar dalam grup minat yang relevan akan dilelang dan iklan pemenang ditampilkan dalam frame dengan fence.
Jika penayang menampilkan iklan pemenang dalam iframe dan skrip dapat membaca
atribut src
iframe, penayang dapat menyimpulkan informasi tentang minat
pengunjung dari URL iklan tersebut. Tindakan ini tidak melindungi privasi.
Dengan frame dengan fence, penayang dapat menampilkan iklan yang cocok dengan minat
pengunjung, tetapi src
dan grup minat hanya akan diketahui oleh pengiklan
dalam frame. Penayang tidak dapat mengakses informasi ini.
Bagaimana cara kerja frame dengan fence?
Frame dengan fence menggunakan objek FencedFrameConfig
untuk navigasi. Objek ini dapat ditampilkan dari lelang Protected Audience API atau operasi pemilihan URL Shared Storage. Kemudian, objek konfigurasi ditetapkan sebagai atribut config
pada elemen frame dengan fence. Hal ini berbeda dengan iframe dengan URL atau URN buram ditetapkan ke atribut src
. Objek FencedFrameConfig
memiliki properti url
hanya baca; namun, karena kasus penggunaan saat ini memerlukan URL aktual resource internal untuk disembunyikan, properti ini menampilkan string opaque
saat dibaca.
Frame dengan fence tidak dapat menggunakan postMessage
untuk berkomunikasi dengan penyematnya. Namun, frame dengan fence dapat menggunakan postMessage
dengan iframe di dalam frame dengan fence.
Frame dengan fence akan diisolasi dari penayang dengan cara lain. Misalnya,
penayang tidak akan memiliki akses ke DOM di dalam frame dengan fence, dan
frame dengan fence tidak dapat mengakses DOM penayang. Selain itu, atribut seperti
name
—yang dapat ditetapkan ke nilai apa pun kepada dan diamati oleh
penayang—tidak tersedia dalam frame dengan fence.
Frame dengan pagar berperilaku seperti konteks penjelajahan
level atas
(seperti tab browser). Meskipun frame dengan fence dalam kasus penggunaan tertentu
(seperti opaque-ads
) dapat berisi data lintas situs (seperti grup minat
Protected Audience API), frame tidak dapat mengakses penyimpanan atau cookie yang tidak dipartisi. Frame
dengan fence opaque-ads
dapat mengakses cookie dan partisi penyimpanan
yang unik berbasis nonce.
Karakteristik frame dengan fence dijelaskan lebih lanjut dalam penjelasan.
Apa perbedaan antara frame dengan fence dan iframe?
Setelah Anda mengetahui apa yang akan dan tidak dapat dilakukan oleh frame dengan fence, sebaiknya bandingkan dengan 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 diobservasi, 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 dengan fence mendukung lebih sedikit opsi komunikasi eksternal untuk menjaga privasi.
Apakah bingkai dengan fence akan menggantikan iframe?
Pada akhirnya, bingkai dengan fence tidak akan menggantikan iframe dan Anda tidak perlu menggunakannya. Frame dengan fence adalah frame yang lebih pribadi untuk digunakan saat data dari partisi tingkat atas yang berbeda perlu ditampilkan di halaman yang sama.
Iframe situs yang sama (terkadang dikenal sebagai iframe ramah) dianggap sebagai konten tepercaya.
Gunakan frame dengan fence
Frame dengan fence akan berfungsi bersama dengan Privacy Sandbox API lainnya untuk menampilkan dokumen dari berbagai partisi penyimpanan dalam satu halaman. API potensial saat ini sedang dibahas.
Kandidat saat ini untuk kombinasi ini mencakup:
- Dari kelompok TURTLEDOVE API (yang merupakan dasar untuk Protected Audience API), frame dengan fence dapat berfungsi dengan Pengukuran Conversion Lift menggunakan Penyimpanan Bersama.
- Opsi lainnya adalah mengizinkan frame fence menjadi hanya baca atau mengakses penyimpanan tidak dipartisi.
Untuk detail selengkapnya, lihat penjelasan kasus penggunaan Frame dengan Fence.
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 disetel ke false
), promise yang dihasilkan akan di-resolve ke 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 mendapatkan konfigurasi, Anda dapat menetapkannya ke atribut config
frame dengan fence untuk membuka frame ke resource yang direpresentasikan oleh konfigurasi. Chrome versi lama tidak mendukung properti resolveToConfig
, jadi Anda tetap harus mengonfirmasi bahwa promise tersebut diselesaikan ke FencedFrameConfig
sebelum menavigasi:
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { const frame = document.createElement('fencedframe'); frame.config = frameConfig; }
Untuk mempelajari lebih lanjut, baca penjelasan Frame dengan Fenced dan konfigurasi Fenced Frame.
Header
Browser akan menetapkan Sec-Fetch-Dest: fencedframe
untuk permintaan yang dibuat dari frame dan iframe dengan fence yang disematkan dalam frame yang di-fence.
Sec-Fetch-Dest: fencedframe
Server harus menetapkan header respons Supports-Loading-Mode: fenced-frame
agar dokumen 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 Agregasi Pribadi untuk melaporkan data tingkat peristiwa dalam frame dengan fence yang terkait dengan data kontekstual dari sematan. Dengan metode fencedFrameConfig.setSharedStorageContext()
, Anda dapat meneruskan beberapa data kontekstual, seperti ID peristiwa, dari penyemat ke worklet penyimpanan bersama yang dimulai oleh Protected Audience API.
Pada contoh berikut, kita menyimpan beberapa data yang tersedia di halaman sematan dan beberapa data yang tersedia di frame dengan fence di penyimpanan bersama. Dari halaman penyemat, ID peristiwa tiruan ditetapkan sebagai konteks penyimpanan bersama. Dari frame dengan fence, data peristiwa frame diteruskan.
Dari halaman penyemat, 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 level peristiwa dari frame ke worklet penyimpanan bersama (tidak terkait dengan data kontekstual dari sematan 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 penyemat dari sharedStorage.context
dan data tingkat peristiwa frame dari objek data
, lalu melaporkannya melalui Agregasi Pribadi:
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 penyemat dalam objek konfigurasi frame dengan fence, lihat penjelasan ini.
Coba bingkai dengan fence
Gunakan flag
Chrome untuk
mengaktifkan Fenced Frame API di chrome://flags/#enable-fenced-frames
.
Ada beberapa pilihan dalam dialog. Sebaiknya pilih *Enable*, yang memungkinkan Chrome diupdate secara otomatis ke arsitektur baru saat tersedia.
Opsi lainnya, Enabled with ShadowDOM dan Enabled with beberapa arsitektur halaman, menawarkan strategi implementasi berbeda yang hanya relevan untuk engineer browser. Saat ini, Enable berfungsi dengan cara yang sama seperti Enabled dengan ShadowDOM. Di masa mendatang, opsi Aktifkan akan dipetakan ke Aktifkan dengan arsitektur beberapa halaman.
Deteksi fitur
Untuk menentukan apakah frame dengan fence sudah 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
didukung mulai Chrome 97 dan seterusnya. Saat ini, versi tersebut tidak didukung oleh browser
lain.
Berinteraksi dan memberikan masukan
Frame dengan Fence sedang dalam diskusi aktif dan dapat berubah di masa mendatang. Jika Anda mencoba API ini dan memiliki masukan, kami akan dengan senang hati mendengarnya.
- GitHub: Baca penjelasan, ajukan pertanyaan, dan ikuti diskusi.
- Dukungan developer: Ajukan pertanyaan dan ikuti diskusi di repo Dukungan Developer Privacy Sandbox.