Halaman ini diterjemahkan oleh Cloud Translation API.

Ringkasan bingkai fence

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.

Perbandingan sebelum dan setelah status pemisahan penyimpanan.

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.

Mendapatkan konfigurasi frame dengan fence dari lelang Protected Audience API

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

Mendapatkan konfigurasi frame dengan fence dari Pilihan URL Penyimpanan Bersama

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:

Menetapkan konfigurasi ke atribut frame dengan fence

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.sendHistogramReport({
      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.

Di Chrome Experiments, setel Aktif untuk tanda yang bernama Aktifkan elemen bingkai dengan pagar

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.