Panoramica dei frame protetti

Incorpora in modo sicuro i contenuti in una pagina senza condividere dati tra siti.

Stato implementazione

Questo documento illustra un nuovo elemento HTML: <fencedframe>.

Proposal Status
Web API changes for urn to config
Explainer
Available in Chrome in Q1 2023.
Creative Macros in Fenced Frames for Ads Reporting (FFAR)
GitHub Issue
Available in Chrome in Q3 2023.
Send Automatic Beacons Once
GitHub Issue
Available in Chrome in Q3 2023.
Serializable Fenced Frames Configs
GitHub Issue
Available in Chrome in Q3 2023.
Additional Format Option for Protected Audience Ad Size Macros
GitHub Issue
Available in Chrome in Q4 2023.
Automatic beacons sending to all registered URLs
GitHub Issue | GitHub Issue
Available in Chrome in Q4 2023.
Enable Leaving Ad Interest Groups from Urn iFrames and Ad Component Frames
GitHub issue
Available in Chrome in Q1 2024
Introduce reserved.top_navigation_start/commit
GitHub issue, GitHub issue
Available in Chrome in Q1 2024
Do Not Disable Cookie Setting in ReportEvent until 3PCD
GitHub issue
Available in Chrome in Q1 2024
Add support for automatic beacons in cross-origin subframes
GitHub issue
Available in Chrome in Q1 2024

Perché sono necessari frame recintati?

Un frame recintato (<fencedframe>) è un elemento HTML per i contenuti incorporati simili a quelli di un iframe. A differenza degli iframe, un frame recintato limita la comunicazione con il suo contesto di incorporamento per consentire al frame di accedere i dati senza condividerli con il contesto di incorporamento. Alcune API Privacy Sandbox potrebbe richiedere una selezione di documenti da visualizzare all'interno di un frame recintato.

Allo stesso modo, i dati proprietari nel contesto di incorporamento non possono essere condivisi con il frame recintato.

Ad esempio, supponiamo che news.example (il contesto di incorporamento) incorpora un annuncio da shoes.example in un frame recintato. news.example non può esfiltrare i dati da l'annuncio shoes.example e shoes.example non può apprendere i dati proprietari news.example.

Rafforza la privacy tra siti con il partizionamento dello spazio di archiviazione

Mentre navighi sul web, probabilmente hai guardato prodotti su un sito e poi lo hai visto riapparire in un annuncio su un sito completamente diverso.

Oggi, questa tecnica pubblicitaria si ottiene principalmente attraverso il monitoraggio tecnologia che utilizza cookie di terze parti per condividere informazioni tra siti. Questo è la tecnologia che Chrome si è impegnata a mettere in e sostituirli con varianti che tutelano maggiormente la privacy.

Chrome sta lavorando sullo spazio di archiviazione il partizionamento orizzontale, separa l'archiviazione del browser per sito. Attualmente, se un iframe di shoes.example è incorporato in news.example e quell'iframe archivia un valore nello spazio di archiviazione, questo valore potrà essere letto dal sito di shoes.example. Dopo che lo spazio di archiviazione partizionati tra siti non condividono più lo spazio di archiviazione, pertanto shoes.example non sarà in grado di accedere alle informazioni memorizzate dall'iframe. Se l'iframe viene pubblicato da *.shoes.example e incorporato su *.shoes.example, lo spazio di archiviazione del browser verrà condiviso poiché è considerato stesso sito.

Un confronto tra lo stato precedente e dopo il partitino dello spazio di archiviazione.

Il partizionamento dello spazio di archiviazione verrà applicato alle API di archiviazione standard, tra cui LocalStorage, IndexedDB e i cookie. In un mondo partizionato, le informazioni le perdite nello spazio di archiviazione proprietario saranno significativamente ridotte.

Lavora con i dati cross-site

I frame recintati è una funzionalità di Privacy Sandbox il che suggerisce che i siti di primo livello devono eseguire il partizionamento dei dati. Molti Privacy Sandbox proposte e API mirano a soddisfare casi d'uso tra siti senza cookie di terze parti altri meccanismi di monitoraggio. Ad esempio:

Vediamo come potrebbero funzionare i frame recintati con API Protected Audience. Con l'API Protected Audience, gli interessi di un utente Siano registrati sul sito di un inserzionista nel suo interesse gruppi, insieme agli annunci che può essere di interesse per l'utente. Quindi, su un sito separato (noto come "publisher"), gli annunci registrati nei gruppi di interesse pertinenti vengono venduti all'asta e l'annuncio vincente viene visualizzato in un frame recintato.

Se il publisher visualizza l'annuncio vincente in un iframe e lo script può leggere attributo src di iframe, il publisher può dedurre informazioni sul interessi dall'URL di tale annuncio. Questa procedura non tutela la privacy.

Con un frame recintato, il publisher può mostrare un annuncio che corrisponde al interessi, ma src e il gruppo basato sugli interessi saranno noti solo all'inserzionista nell'inquadratura. L'editore non è riuscito ad accedere a queste informazioni.

Come funzionano i frame recintati?

I frame bloccati utilizzano l'oggetto FencedFrameConfig per la navigazione. Questo oggetto può essere restituito da un'asta dell'API Protected Audience o da un'operazione di selezione dell'URL di Archiviazione condivisa. L'oggetto di configurazione viene quindi impostato come attributo config nell'elemento frame recintato. È diverso da un iframe in cui all'attributo src viene assegnato un URL oppure un elemento URN opaco. L'oggetto FencedFrameConfig ha una proprietà url di sola lettura; tuttavia, poiché i casi d'uso attuali richiedono che l'URL effettivo della risorsa interna sia nascosto, questa proprietà restituisce la stringa opaque quando viene letta.

Un frame recintato non può utilizzare postMessage per comunicare con l'incorporatore. Tuttavia, un frame recintato può utilizzare postMessage con iframe all'interno del frame recintato.

I frame protetti verranno isolati dal publisher in altri modi. Ad esempio il publisher non avrà accesso al DOM all'interno di un frame recintato e il frame recintato non può accedere al DOM del publisher. Inoltre, attributi come name, che può essere impostato su qualsiasi valore e può essere osservato dal publisher, non sono disponibili in frame protetti.

I frame recintati si comportano come una navigazione di primo livello contesto (come una scheda del browser). Sebbene sia un frame recintato in determinati casi d'uso (ad esempio opaque-ads) possono contenere dati cross-site (ad esempio un interesse nell'API Protected Audience il frame non può accedere allo spazio di archiviazione non partizionato o ai cookie. Un opaque-ads frame recintato può accedere a uno spazio di archiviazione e a un cookie unici non basati su nonce della partizione di testo.

Le caratteristiche dei frame recintati sono descritte in dettaglio nella sezione spiegazione.

Qual è la differenza tra i frame protetti e gli iframe?

Ora che sai quali frame bloccati funzionano o meno, è utile confrontare alle funzioni iframe esistenti.

Funzionalità iframe fencedframe
Incorporare contenuti
I contenuti incorporati possono accedere al DOM del contesto di incorporamento No
Il contesto di incorporamento può accedere al DOM dei contenuti incorporati No
Attributi osservabili, come name No
URL (http://example.com) Sì (in base al caso d'uso)
Origine opaca gestita dal browser (urn:uuid) No
Accesso ai dati tra siti No Sì (in base al caso d'uso)

I frame recintati supportano meno opzioni di comunicazione esterna per tutelare la privacy.

I frame recintati sostituiranno gli iframe?

In definitiva, i frame recintati non sostituiranno gli iframe e non dovrai utilizzarli. I frame protetti sono un frame più privato per l'uso quando i dati sulla stessa pagina devono essere visualizzate partizioni di primo livello diverse.

Gli iframe dello stesso sito (a volte noti come iframe semplici) sono considerati attendibili contenuti.

Usa frame recintati

I frame recintati funzioneranno in combinazione con altre API Privacy Sandbox per visualizzare documenti di diverse partizioni di archiviazione all'interno di un'unica pagina. Al momento sono in discussione potenziali API.

Gli attuali candidati per questa combinazione includono:

Per ulteriori dettagli, consulta la sezione Cornici recintati esplicativa dei casi d'uso.

Esempi

Per ottenere un oggetto frame config recintato, devi passare resolveToConfig: true alla chiamata runAdAuction() dell'API Protected Audience o alla chiamata selectURL() di Archiviazione condivisa. Se la proprietà non viene aggiunta (o è impostata su false), la promessa risultante verrà risolta in un URN che può essere utilizzato solo in un iframe.

Ottieni una configurazione di frame esclusi dall'asta dell'API Protected Audience
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});
Ottieni la configurazione del frame recintato dalla selezione dell'URL dello spazio di archiviazione condiviso
const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Dopo aver ottenuto la configurazione, puoi assegnarla all'attributo config di un frame recintato per passare alla risorsa rappresentata dalla configurazione nel frame. Le versioni precedenti di Chrome non supportano la proprietà resolveToConfig, quindi devi comunque confermare che la promessa è stata risolta a FencedFrameConfig prima di navigare:

Imposta la configurazione sull'attributo frame recintato
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

Per scoprire di più, consulta i video esplicativi Frame schermati e Configurazione di frame schermati.

Intestazioni

I browser imposteranno Sec-Fetch-Dest: fencedframe per le richieste effettuate da frame e iframe incorporati all'interno di un frame recintato.

Sec-Fetch-Dest: fencedframe

Il server deve impostare l'intestazione della risposta Supports-Loading-Mode: fenced-frame affinché un documento venga caricato in un frame recintato. L'intestazione deve essere presente anche in eventuali iframe all'interno di un frame recintato.

Supports-Loading-Mode: fenced-frame

Contesto dello spazio di archiviazione condiviso

Ti consigliamo di utilizzare l'aggregazione privata per generare report sui dati a livello di evento in frame protetti associati ai dati contestuali dell'incorporamento. Utilizzando il metodo fencedFrameConfig.setSharedStorageContext(), puoi trasmettere alcuni dati contestuali, ad esempio un ID evento, dall'utente che ha eseguito l'incorporamento ai worklet dello spazio di archiviazione condiviso avviati dall'API Protected Audience.

Nel seguente esempio, vengono memorizzati alcuni dati disponibili nella pagina dell'incorporamento e alcuni dati disponibili nel frame protetto nello spazio di archiviazione condiviso. Dalla pagina dell'incorporamento, viene impostato un ID evento fittizio come contesto dello spazio di archiviazione condiviso. Dal frame recintato vengono trasmessi i dati dell'evento frame.

Dalla pagina dell'incorporamento, puoi impostare dati contestuali come contesto dello spazio di archiviazione condiviso:

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;

Dal frame recintato, puoi passare i dati a livello di evento dal frame al worklet dello spazio di archiviazione condiviso (non correlati ai dati contestuali dell'incorporamento precedente):

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
  },
});

Puoi leggere le informazioni contestuali dell'incorporamento da sharedStorage.context e i dati a livello di evento del frame dall'oggetto data, quindi segnalarli tramite l'aggregazione privata:

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);

Per saperne di più sul contesto dell'incorporamento in un oggetto di configurazione di frame recintati, consulta la spiegazione.

Prova frame recintati

Utilizza Chrome di sicurezza per abilita l'API Fenced Frame in chrome://flags/#enable-fenced-frames.

In Chrome Experiments, imposta Attivato per il flag denominato Attiva l&#39;elemento frame fenced

Nella finestra di dialogo sono presenti più opzioni. Ti consigliamo vivamente di selezionare *Abilita*, che consente a Chrome di aggiornarsi automaticamente alla nuova architettura non appena diventano disponibili.

Le altre opzioni, Abilitata con ShadowDOM e Abilitata con più architettura della pagina, offrono diverse strategie di implementazione che sono per i tecnici dei browser. Attualmente, Attiva funziona come Abilitata con ShadowDOM. In futuro, Attiva verrà mappato ad Attiva con su più pagine.

Rilevamento delle caratteristiche

Per determinare se sono definiti frame recintati:

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

Per determinare se è disponibile la configurazione di frame recintati: js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

Supporto browser

L'elemento <fencedframe> è ancora in modalità sperimentale, quindi lo è attualmente supportati da Chrome 97 e versioni successive. Al momento non è supportato da altri browser supportati.

Interagisci e condividi il feedback

I frame protetti sono in fase di discussione attiva e sono soggetti a modifica in per il futuro. Se provi questa API e hai feedback, ci piacerebbe conoscere la tua opinione.

Scopri di più