Ringkasan bingkai fence

Menyematkan konten ke halaman dengan aman tanpa membagikan data lintas situs.

Status penerapan

Mengapa kita memerlukan frame tertutup?

Frame dengan fence (<fencedframe>) adalah elemen HTML untuk konten sematan, mirip dengan iframe. Tidak seperti iframe, frame dengan fence membatasi komunikasi dengan konteks penyematannya untuk memungkinkan akses frame ke data lintas situs tanpa membagikannya dengan konteks penyematan. Beberapa API Privacy Sandbox mungkin memerlukan dokumen tertentu untuk dirender dalam frame tertutup.

Demikian pula, data pihak pertama apa pun dalam konteks penyematan tidak dapat dibagikan ke frame dengan fence.

Misalnya, jika news.example (konteks penyematan) menyematkan iklan dari shoes.example dalam frame dengan fence, news.example tidak dapat mengekstraksi data 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 melihatnya muncul lagi di iklan di situs yang sama sekali berbeda.

Saat ini, teknik periklanan ini dicapai terutama melalui teknologi pelacakan yang menggunakan cookie pihak ketiga untuk membagikan informasi di seluruh situs.

Chrome sedang mengerjakan pemartisian penyimpanan, yang memisahkan penyimpanan browser per situs. Tanpa partisi, jika iframe dari shoes.example disematkan di news.example, dan iframe tersebut menyimpan nilai ke penyimpanan, maka 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 di *.shoes.example, penyimpanan browser akan dibagikan karena dianggap sebagai situs yang sama.

Perbandingan status partisi penyimpanan sebelum dan sesudah.

Partisi penyimpanan akan diterapkan ke API penyimpanan standar, termasuk LocalStorage, IndexedDB, dan cookie. Di dunia yang dipartisi, kebocoran informasi di seluruh penyimpanan pihak pertama akan berkurang secara signifikan.

Menangani data lintas situs

Frame tertutup adalah fitur Privacy Sandbox yang menyarankan agar situs tingkat teratas memartisi data. Banyak proposal dan API Privacy Sandbox 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.
  • Shared Storage memungkinkan akses ke data lintas situs yang tidak dipartisi di lingkungan yang aman.

Frame tertutup dirancang untuk bekerja dengan Protected Audience API. Dengan Protected Audience API, minat pengguna dicatat di situs pengiklan dalam 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 dilelang dan iklan pemenang ditampilkan dalam frame dengan fence.

Jika penayang menampilkan iklan yang menang dalam iframe dan skrip dapat membaca atribut src iframe, penayang dapat menyimpulkan informasi tentang minat pengunjung dari URL iklan tersebut. Hal ini tidak menjaga 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 yang dibatasi?

Frame tertutup menggunakan objek FencedFrameConfig untuk navigasi. Objek ini dapat ditampilkan dari lelang Protected Audience API atau operasi pemilihan URL Shared Storage. Kemudian, objek config ditetapkan sebagai atribut config pada elemen frame dengan fence. Hal ini berbeda dengan iframe yang menetapkan URL atau URN buram ke atribut src. Objek FencedFrameConfig memiliki properti url hanya baca; namun, karena kasus penggunaan saat ini mengharuskan URL sebenarnya dari resource internal 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 tertutup 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 dan diamati oleh penayang—tidak tersedia di frame tertutup.

Frame tertutup berperilaku seperti konteks penjelajahan tingkat atas (seperti tab browser). Meskipun frame dengan fence dalam kasus penggunaan tertentu (seperti iklan penargetan ulang berbasis minat) dapat berisi data lintas situs (seperti grup minat Protected Audience API), frame tidak dapat mengakses penyimpanan atau cookie yang tidak dipartisi. Frame dengan fence dapat mengakses partisi penyimpanan dan cookie berbasis nonce yang unik.

Karakteristik frame tertutup dijelaskan lebih lanjut dalam penjelasan.

Apa perbedaan antara frame tertutup dan iframe?

Setelah mengetahui apa yang dapat dan tidak dapat dilakukan frame tertutup, sebaiknya bandingkan dengan fitur iframe yang ada.

Fitur iframe fencedframe
Menyematkan konten Ya Ya
Konten tersemat dapat mengakses DOM konteks penyematan Ya Tidak
Konteks penyematan dapat mengakses DOM konten tersemat 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 (bergantung pada kasus penggunaan)
Akses ke data lintas situs Tidak Ya (bergantung pada kasus penggunaan)

Frame tertutup mendukung lebih sedikit opsi komunikasi eksternal untuk menjaga privasi.

Apakah frame yang dibatasi akan menggantikan iframe?

Pada akhirnya, frame tertutup tidak akan menggantikan iframe dan Anda tidak perlu menggunakannya. Frame tertutup adalah frame yang lebih privat untuk digunakan saat data dari partisi tingkat teratas yang berbeda perlu ditampilkan di halaman yang sama.

Iframe same-site (terkadang dikenal sebagai iframe tepercaya) dianggap sebagai konten tepercaya.

Menggunakan frame tertutup

Frame tertutup akan berfungsi bersama dengan Privacy Sandbox API lainnya untuk menampilkan dokumen dari partisi penyimpanan yang berbeda dalam satu halaman. API potensial sedang didiskusikan.

Kandidat saat ini untuk kombinasi ini mencakup:

Untuk mengetahui detail selengkapnya, lihat penjelasan kasus penggunaan Fenced Frame.

Contoh

Untuk mendapatkan objek config frame dengan fence, Anda harus meneruskan resolveToConfig: true ke panggilan runAdAuction() Protected Audience API atau panggilan selectURL() Shared Storage. 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 Pemilihan URL Shared Storage
const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Setelah mendapatkan konfigurasi, Anda dapat menetapkannya ke atribut config frame tertutup untuk membuka frame ke resource yang diwakili oleh konfigurasi. Versi Chrome yang lebih lama tidak mendukung properti resolveToConfig, jadi Anda tetap harus mengonfirmasi bahwa promise diselesaikan ke FencedFrameConfig sebelum membuka:

Menetapkan config ke atribut frame dengan fence
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

Untuk mempelajari lebih lanjut, lihat penjelasan Fenced Frame dan konfigurasi Fenced Frame.

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 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 Shared Storage

Anda dapat menggunakan Private Aggregation untuk melaporkan data tingkat peristiwa dalam frame tertutup yang terkait dengan data kontekstual dari penyematan. Dengan menggunakan metode fencedFrameConfig.setSharedStorageContext(), Anda dapat meneruskan beberapa data kontekstual, seperti ID peristiwa, dari penyematan ke worklet penyimpanan bersama yang dimulai oleh Protected Audience API.

Dalam contoh berikut, kita menyimpan beberapa data yang tersedia di halaman penyematan dan beberapa data yang tersedia di frame dengan fence dalam penyimpanan bersama. Dari halaman penyematan, ID peristiwa tiruan ditetapkan sebagai konteks penyimpanan bersama. Dari frame dengan fence, data peristiwa frame diteruskan.

Dari halaman penyematan, 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 penyematan 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 embedder 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 di objek konfigurasi frame tertutup, lihat penjelasan.

Mencoba frame dengan fence

Gunakan flag Chrome untuk mengaktifkan Fenced Frame API di chrome://flags/#enable-fenced-frames.

Di Chrome Experiments, tetapkan Enabled untuk tanda yang bernama Enable the frame dengan fence element

Ada beberapa pilihan dalam dialog. Sebaiknya pilih *Aktifkan*, yang memungkinkan Chrome diupdate secara otomatis ke arsitektur baru saat tersedia.

Opsi lainnya, Diaktifkan dengan ShadowDOM dan Diaktifkan dengan arsitektur beberapa halaman, menawarkan strategi penerapan yang berbeda yang hanya relevan bagi engineer browser. Saat ini, Aktifkan berfungsi dengan cara yang sama seperti Diaktifkan dengan ShadowDOM. Pada masa mendatang, Aktifkan akan dipetakan ke Aktifkan dengan arsitektur multi-halaman.

Deteksi fitur

Untuk menentukan apakah frame tertutup ditentukan:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

Untuk menentukan apakah konfigurasi frame dengan fence tersedia:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

Dukungan browser

Berinteraksi dan memberikan masukan

Fenced Frame sedang dalam tahap diskusi aktif dan dapat berubah di masa mendatang. Jika Anda mencoba API ini dan memiliki masukan, kami ingin mendengarnya.

Cari tahu lebih lanjut