Panoramica dei frame protetti

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

Stato dell'implementazione

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

• In disponibilità generale in Chrome.
• Stato della piattaforma Chrome.

Perché abbiamo bisogno dei frame recintati?

Un fenced frame (<fencedframe>) è un elemento HTML per i contenuti incorporati, simile a un iframe. A differenza degli iframe, un fenced frame limita la comunicazione con il contesto di incorporamento per consentire al frame di accedere ai dati tra siti senza condividerli con il contesto di incorporamento. Alcune API Privacy Sandbox potrebbero richiedere il rendering di determinati documenti all'interno di un frame isolato.

Analogamente, i dati proprietari nel contesto di incorporamento non possono essere condivisi con il fenced frame.

Ad esempio, se news.example (il contesto di incorporamento) incorpora un annuncio di shoes.example in un frame isolato, news.example non può estrarre dati dall'annuncio shoes.example e shoes.example non può apprendere dati proprietari da news.example.

Rafforzare la privacy cross-site con il partizionamento dello spazio di archiviazione

Durante la navigazione sul web, probabilmente hai guardato dei prodotti su un sito e poi li hai visti di nuovo in un annuncio su un sito completamente diverso.

Oggi, questa tecnica pubblicitaria viene realizzata principalmente tramite una tecnologia di monitoraggio che utilizza cookie di terze parti per condividere informazioni tra i siti.

Chrome sta lavorando al partizionamento dello spazio di archiviazione, che separa lo spazio di archiviazione del browser per sito. Senza il partizionamento, se un iframe di shoes.example è incorporato in news.example e memorizza un valore nello spazio di archiviazione, questo valore può essere letto dal sito shoes.example. Quando lo spazio di archiviazione è stato partizionato, gli iframe cross-site non condivideranno più lo spazio di archiviazione, pertanto shoes.example non potrà accedere alle informazioni memorizzate dall'iframe. Se l'iframe viene pubblicato da *.shoes.example e incorporato in *.shoes.example, lo spazio di archiviazione del browser verrà condiviso perché questi siti sono considerati stesso sito.

Il partizionamento dello spazio di archiviazione verrà applicato alle API di archiviazione standard, inclusi LocalStorage, IndexedDB e cookie. In un mondo partizionato, la perdita di informazioni tra gli spazi di archiviazione proprietari sarà notevolmente ridotta.

Utilizzare i dati cross-site

I frame isolati sono una funzionalità di Privacy Sandbox che suggerisce ai siti di primo livello di partizionare i dati. Molte proposte e API di Privacy Sandbox mirano a soddisfare casi d'uso cross-site senza cookie di terze parti o altri meccanismi di monitoraggio. Ad esempio:

• L'API Protected Audience consente la pubblicazione di annunci basati sugli interessi in modo da tutelare la privacy.
• Shared Storage consente l'accesso ai dati tra siti non partizionati in un ambiente sicuro.

I frame isolati sono progettati per funzionare con l'API Protected Audience. Con l'API Protected Audience, gli interessi di un utente vengono registrati sul sito di un inserzionista in gruppi basati sugli interessi, insieme agli annunci che potrebbero interessare l'utente. Successivamente, su un sito separato (noto come "publisher"), gli annunci registrati in gruppi di interesse pertinenti vengono messi all'asta e l'annuncio vincente viene visualizzato in un frame protetto.

Se il publisher mostra l'annuncio vincente in un iframe e lo script può leggere l'attributo src dell'iframe, il publisher può dedurre informazioni sugli interessi del visitatore dall'URL dell'annuncio. Questo non avviene nel rispetto della privacy.

Con un frame recintato, il publisher potrebbe mostrare un annuncio che corrisponde agli interessi dei visitatori, ma il src e il gruppo di interesse saranno noti solo all'inserzionista nel frame. Il publisher non è riuscito ad accedere a queste informazioni.

Come funzionano i frame recintati?

I frame recintati utilizzano l'oggetto FencedFrameConfig per la navigazione. Questo oggetto può essere restituito da un'asta dell'API Protected Audience o dall'operazione di selezione dell'URL di Shared Storage. Successivamente, l'oggetto di configurazione viene impostato come attributo config nell'elemento frame recintato. Ciò è diverso da un iframe in cui un URL o un URN opaco viene assegnato all'attributo src. 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 il suo incorporatore. Tuttavia, un frame recintato può utilizzare postMessage con iframe all'interno del frame recintato.

I frame recintati 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 potrà accedere al DOM del publisher. Inoltre, attributi come name, che può essere impostato su qualsiasi valore e osservato dall'editore, non sono disponibili nei frame isolati.

I fenced frame si comportano come un contesto di navigazione di primo livello (ad esempio una scheda del browser). Sebbene un frame isolato in determinati casi d'uso (come gli annunci di retargeting basati sugli interessi) possa contenere dati cross-site (come un gruppo di interesse dell'API Protected Audience), il frame non può accedere a cookie o spazio di archiviazione non partizionato. Il frame recintato può accedere a un cookie e a una partizione di archiviazione unici basati su nonce.

Le caratteristiche dei fenced frame sono descritte in modo più dettagliato nella spiegazione.

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

Ora che sai cosa faranno e cosa non faranno i fenced frame, è utile confrontarli con le funzionalità iframe esistenti.

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

I fenced frame sostituiranno gli iframe?

In definitiva, i fenced frame non sostituiranno gli iframe e non dovrai utilizzarli. I fenced frame sono un frame più privato da utilizzare quando i dati di partizioni di primo livello diverse devono essere visualizzati nella stessa pagina.

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

Utilizzare i frame isolati

I frame recintati funzioneranno in combinazione con altre API Privacy Sandbox per visualizzare documenti di partizioni di archiviazione diverse all'interno di una singola pagina. Le potenziali API sono in fase di discussione.

I candidati attuali per questa combinazione includono:

• Dalla famiglia di API TURTLEDOVE (che è la base dell'API Protected Audience), i frame recintati potrebbero funzionare con la misurazione dell'incremento delle conversioni utilizzando Shared Storage.
• Un'altra opzione è consentire ai frame recintati di essere di sola lettura o di accedere allo spazio di archiviazione non partizionato.

Per maggiori dettagli, consulta la spiegazione dei casi d'uso dei frame recintati.

Esempi

Per ottenere un oggetto config fenced frame, devi trasmettere resolveToConfig: true alla chiamata runAdAuction() dell'API Protected Audience o alla chiamata selectURL() di Shared Storage. 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.

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

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Una volta ottenuta la configurazione, puoi assegnarla all'attributo config di un frame recintato per spostare il frame alla risorsa rappresentata dalla configurazione. Le versioni precedenti di Chrome non supportano la proprietà resolveToConfig, pertanto devi comunque verificare che la promessa sia stata risolta in un FencedFrameConfig prima di navigare:

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

Per scoprire di più, consulta le spiegazioni relative a Fenced Frame e Configurazione di Fenced Frame.

Intestazioni

I browser imposteranno Sec-Fetch-Dest: fencedframe per le richieste effettuate da frame recintati e iframe incorporati in 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 isolato. L'intestazione deve essere presente anche per gli iframe all'interno di un frame recintato.

Supports-Loading-Mode: fenced-frame

Contesto di Shared Storage

Potresti voler utilizzare Private Aggregation per generare report sui dati a livello di evento nei frame isolati associati ai dati contestuali dell'incorporatore. Utilizzando il metodo fencedFrameConfig.setSharedStorageContext(), puoi trasmettere alcuni dati contestuali, ad esempio un ID evento, dall'incorporatore ai worklet di Shared Storage avviati dall'API Protected Audience.

Nell'esempio seguente, archiviamo alcuni dati disponibili nella pagina dell'incorporatore e alcuni dati disponibili nel frame recintato nell'archiviazione condivisa. Dalla pagina di incorporamento, un ID evento simulato viene impostato come contesto di spazio di archiviazione condiviso. Dal frame recintato vengono passati i dati degli eventi del frame.

Dalla pagina dell'incorporatore, puoi impostare i dati contestuali come contesto 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 Shared Storage (non correlato ai dati contestuali dell'incorporatore riportati sopra):

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'incorporatore 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 scoprire di più sul contesto dell'incorporatore in un oggetto di configurazione del frame recintato, consulta la spiegazione.

Prova i frame isolati

Utilizza i flag di Chrome per attivare l'API Fenced Frame all'indirizzo chrome://flags/#enable-fenced-frames.

Nella finestra di dialogo sono disponibili diverse opzioni. Ti consigliamo vivamente di selezionare *Attiva, che consente a Chrome di aggiornarsi automaticamente alla nuova architettura non appena diventa disponibile.

Le altre opzioni, Attivato con ShadowDOM e Attivato con architettura di più pagine, offrono diverse strategie di implementazione pertinenti solo per gli ingegneri dei browser. Oggi, Enable funziona allo stesso modo di Enabled with ShadowDOM. In futuro, Attiva verrà mappato a Attiva con architettura multipagina.

Rilevamento delle funzionalità

Per determinare se sono definiti i frame recintati:

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

Per determinare se la configurazione del frame recintato è disponibile:

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

Supporto browser

• MDN
• Stato della piattaforma Chrome

Partecipare e condividere feedback

I Fenced Frame sono in fase di discussione e sono soggetti a modifiche in futuro. Se provi questa API e hai un feedback, ci farebbe piacere riceverlo.

• GitHub: leggi l'explainer, poni domande e segui la discussione.

Scopri di più

• Stato della piattaforma Chrome
• Blink Intent to Prototype