Intégrez du contenu de manière sécurisée sur une page sans partager de données intersites.
État de l'implémentation
Ce document décrit un nouvel élément HTML: <fencedframe>.
- La proposition Fenced Frames est désormais en disponibilité générale.
- État de la plate-forme Chrome
| Proposition | État |
|---|---|
| Modifications de l'API Web pour l'URL dans la configuration Explication |
Disponible dans Chrome au premier trimestre 2023. |
| Macros de création dans Fenced Frames pour les rapports sur les annonces (FFAR) Problème GitHub |
Disponible dans Chrome au 3e trimestre 2023. |
| Envoyer des balises automatiques une seule fois Problème GitHub |
Disponible dans Chrome au 3e trimestre 2023. |
| Configurations de Fenced Frames Serializable Problème GitHub |
Disponible dans Chrome au 3e trimestre 2023. |
| Option de format supplémentaire pour les macros de taille d'annonce Protected Audience Problème GitHub |
Disponible dans Chrome au 4e trimestre 2023. |
| Balises automatiques envoyées à toutes les URL enregistrées Problème GitHub | Problème GitHub |
Disponible dans Chrome au 4e trimestre 2023. |
| Activation de la fermeture des groupes de centres d'intérêt des annonces à partir des cadres iFrame Urn et des composants d'annonce
Problème GitHub |
Disponible dans Chrome au 1er trimestre 2024 |
| Introduction d'un réservé.top_navigation_start/commit problème GitHub, problème GitHub |
Disponible dans Chrome au 1er trimestre 2024 |
| Ne pas désactiver le paramètre de cookie dans ReportEvent avant 3PCD
Problème GitHub |
Disponible dans Chrome au 1er trimestre 2024 |
| Ajout de la prise en charge des balises automatiques dans les sous-frames multi-origines
Problème GitHub |
Disponible dans Chrome au 1er trimestre 2024 |
Pourquoi avons-nous besoin de cadres cloisonnés ?
Un frame cloisonné (<fencedframe>) est un élément HTML de contenu intégré, semblable à un iFrame. Contrairement aux iFrames, un frame cloisonné limite la communication avec son contexte de représentation vectorielle continue pour lui permettre d'accéder aux données intersites sans les partager avec le contexte de représentation vectorielle continue. Certaines API de la Privacy Sandbox peuvent exiger que certains documents s'affichent dans un frame cloisonné.
De même, aucune donnée first party dans le contexte d'intégration ne peut être partagée avec le frame cloisonné.
Par exemple, supposons que news.example (le contexte d'intégration) intègre une annonce de shoes.example dans un frame cloisonné. news.example ne peut pas exfiltrer les données de l'annonce shoes.example, et shoes.example ne peut pas apprendre les données first party à partir de news.example.
Renforcez la confidentialité intersites avec le partitionnement du stockage
En parcourant le Web, vous avez probablement déjà consulté des produits sur un site, puis vous les avez vus réapparaître dans une annonce sur un site complètement différent.
Aujourd'hui, cette technique publicitaire repose principalement sur une technologie de suivi qui utilise des cookies tiers pour partager des informations entre les sites. Il s'agit d'une technologie que Chrome s'est engagé à supprimer et à remplacer par davantage de variantes protégeant la confidentialité.
Chrome travaille sur le partitionnement du stockage, qui sépare le stockage du navigateur par site. Actuellement, si un iFrame de shoes.example est intégré à news.example et qu'il stocke une valeur dans l'espace de stockage, cette valeur peut être lue à partir du site shoes.example. Une fois le stockage partitionné, les iFrames intersites ne partagent plus l'espace de stockage. Par conséquent, shoes.example ne peut pas accéder aux informations stockées par l'iFrame. Si l'iFrame est diffusé à partir de *.shoes.example et intégré à *.shoes.example, l'espace de stockage du navigateur sera partagé, car ils sont considérés comme identiques.
Le partitionnement du stockage sera appliqué aux API de stockage standards, y compris LocalStorage, IndexedDB et les cookies. Dans un monde partitionné, les fuites d'informations sur le stockage propriétaire seront considérablement réduites.
Utiliser des données intersites
Fenced Frames est une fonctionnalité de la Privacy Sandbox qui suggère que les sites de premier niveau doivent partitionner les données. De nombreuses propositions et API de la Privacy Sandbox visent à répondre à des cas d'utilisation intersites sans cookies tiers ni autres mécanismes de suivi. Exemple :
- L'API Protected Audience permet de diffuser des annonces par centres d'intérêt tout en préservant la confidentialité.
- Le stockage partagé permet d'accéder à des données intersites non partitionnées dans un environnement sécurisé.
Examinons le fonctionnement des trames cloisonnées avec l'API Protected Audience. Avec l'API Protected Audience, les centres d'intérêt d'un utilisateur sont enregistrés sur le site d'un annonceur dans des groupes de centres d'intérêt, ainsi que les annonces qui peuvent l'intéresser. Ensuite, sur un site distinct (appelé "éditeur"), les annonces enregistrées dans les groupes de centres d'intérêt pertinents sont mises aux enchères et l'annonce gagnante est affichée dans un cadre cloisonné.
Si l'éditeur affiche l'annonce gagnante dans un iFrame et que le script peut lire l'attribut src de l'iFrame, l'éditeur peut déduire des informations sur les centres d'intérêt du visiteur à partir de l'URL de cette annonce. Cela ne protège pas la confidentialité.
Avec un frame cloisonné, l'éditeur peut afficher une annonce qui correspond aux centres d'intérêt des visiteurs, mais l'élément src et le groupe de centres d'intérêt ne sont connus que de l'annonceur dans le cadre. L'éditeur n'a pas pu accéder à ces informations.
Comment fonctionnent les cadres cloisonnés ?
Les Fenced Frames utilisent l'objet FencedFrameConfig pour la navigation. Cet objet peut être renvoyé à partir d'une mise aux enchères de l'API Protected Audience ou de l'opération de sélection d'URL du stockage partagé. Ensuite, l'objet "config" est défini en tant qu'attribut config sur l'élément de frame cloisonné. À la différence d'un iFrame, dans lequel une URL ou une URN opaque est attribuée à l'attribut src. L'objet FencedFrameConfig possède une propriété url en lecture seule. Toutefois, comme les cas d'utilisation actuels nécessitent le masquage de l'URL réelle de la ressource interne, cette propriété renvoie la chaîne opaque lorsqu'elle est lue.
Une trame cloisonnée ne peut pas utiliser postMessage pour communiquer avec son outil d'intégration. Cependant, un frame cloisonné peut utiliser postMessage avec des iFrames à l'intérieur du frame cloisonné.
Les cadres cloisonnés sont isolés de l'éditeur d'autres manières. Par exemple, l'éditeur n'aura pas accès au DOM à l'intérieur d'un frame cloisonné, qui ne pourra pas non plus accéder au DOM de l'éditeur. De plus, les attributs tels que name, qui peuvent être définis sur n'importe quelle valeur et observés par l'éditeur, ne sont pas disponibles dans les cadres cloisonnés.
Les cadres cloisonnés se comportent comme un contexte de navigation de premier niveau (par exemple, un onglet de navigateur). Bien qu'une trame cloisonnée dans certains cas d'utilisation (tels que opaque-ads) puisse contenir des données intersites (telles qu'un groupe de centres d'intérêt de l'API Protected Audience), la trame ne peut pas accéder au stockage ni aux cookies non partitionnés. Une trame clôturée opaque-ads peut accéder à une partition de stockage et de cookie unique basée sur des nonces.
Les caractéristiques des frames cloisonnés sont détaillées dans l'explication.
Quelle est la différence entre les cadres cloisonnés et les cadres iFrame ?
Maintenant que vous savez ce que font ou non les cadres cloisonnés, il est utile de comparer les fonctionnalités iFrame existantes.
| Caractéristique | iframe |
fencedframe |
|---|---|---|
| Intégrer du contenu | Oui | Oui |
| Le contenu intégré peut accéder au DOM de contexte d'intégration | Oui | Non |
| Le contexte de représentation vectorielle continue peut accéder au DOM du contenu intégré | Oui | Non |
Attributs observables, tels que name |
Oui | Non |
URL (http://example.com) |
Oui | Oui (selon le cas d'utilisation) |
Source opaque gérée par le navigateur (urn:uuid) |
Non | Oui |
| Accès à des données intersites | Non | Oui (selon le cas d'utilisation) |
Les cadres cloisonnés acceptent moins d'options de communication externe pour préserver la confidentialité.
Les cadres cloisonnés remplaceront-ils les cadres iFrame ?
En fin de compte, les cadres cloisonnés ne remplacent pas les cadres iFrame, et vous n'avez pas besoin de les utiliser. Les cadres cloisonnés sont un frame plus privé à utiliser lorsque les données de différentes partitions de niveau supérieur doivent être affichées sur la même page.
Les iFrames sur le même site (parfois appelés "iFrames conviviaux") sont considérés comme du contenu fiable.
Utiliser des cadres cloisonnés
Les Fenced Frames fonctionnent en combinaison avec d'autres API Privacy Sandbox pour afficher les documents de différentes partitions de stockage sur une seule page. Des API potentielles sont actuellement en cours de discussion.
Les candidats actuels pour cette combinaison sont les suivants:
- À partir de la famille de l'API TURTLEDOVE (qui constitue la base de l'API Protected Audience), les trames clôturées peuvent fonctionner avec la mesure du conversion lift via un stockage partagé.
- Une autre option consiste à autoriser les frames cloisonnés en lecture seule ou à accéder au stockage non partitionné.
Pour en savoir plus, consultez la présentation des cas d'utilisation de Fenced Frames.
Exemples
Pour obtenir un objet config de frame cloisonné, vous devez transmettre resolveToConfig: true à l'appel runAdAuction() de l'API Protected Audience ou à l'appel selectURL() du stockage partagé. Si la propriété n'est pas ajoutée (ou si elle est définie sur false), la promesse qui en résulte renvoie une URN qui ne peut être utilisée que dans un iFrame.
const frameConfig = await navigator.runAdAuction({
// ...auction configuration
resolveToConfig: true
});
const frameConfig = await sharedStorage.selectURL('operation-name', {
resolveToConfig: true
});
Une fois la configuration obtenue, vous pouvez l'attribuer à l'attribut config d'un frame cloisonné pour accéder au frame jusqu'à la ressource représentée par la configuration. Les anciennes versions de Chrome ne sont pas compatibles avec la propriété resolveToConfig. Vous devez donc tout de même confirmer que la promesse a été résolue en FencedFrameConfig avant de naviguer:
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
const frame = document.createElement('fencedframe');
frame.config = frameConfig;
}
Pour en savoir plus, consultez les explications sur Fenced Frame et Fenced Frame.
En-têtes
Les navigateurs définissent Sec-Fetch-Dest: fencedframe pour les requêtes effectuées à partir de cadres cloisonnés et d'iFrames intégrés à un frame cloisonné.
Sec-Fetch-Dest: fencedframe
Le serveur doit définir l'en-tête de réponse Supports-Loading-Mode: fenced-frame pour qu'un document soit chargé dans un frame cloisonné. L'en-tête doit également être présent pour tous les iFrames à l'intérieur d'un cadre cloisonné.
Supports-Loading-Mode: fenced-frame
Contexte de stockage partagé
Vous pouvez utiliser l'agrégation privée pour générer des rapports sur les données au niveau des événements dans des frames cloisonnés associés à des données contextuelles de l'outil d'intégration. En utilisant la méthode fencedFrameConfig.setSharedStorageContext(), vous pouvez transmettre des données contextuelles, telles qu'un ID d'événement, de l'outil d'intégration aux Worklets de stockage partagé lancés par l'API Protected Audience.
Dans l'exemple suivant, nous stockons certaines données disponibles sur la page de l'outil d'intégration et d'autres données disponibles dans le frame cloisonné dans un espace de stockage partagé. Sur la page de l'outil d'intégration, un ID d'événement fictif est défini comme contexte de stockage partagé. À partir de la trame cloisonnée, les données d'événement de frame sont transmises.
Sur la page de l'outil d'intégration, vous pouvez définir les données contextuelles en tant que contexte de stockage partagé:
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;
À partir de la trame cloisonnée, vous pouvez transmettre les données au niveau de l'événement de la trame au worklet de stockage partagé (sans lien avec les données contextuelles de l'intégrateur ci-dessus):
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
},
});
Vous pouvez lire les informations contextuelles de l'intégrateur à partir de sharedStorage.context et les données au niveau de l'événement du frame à partir de l'objet data, puis les signaler via l'agrégation privée:
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);
Pour en savoir plus sur le contexte de l'outil d'intégration dans un objet de configuration de frame cloisonné, consultez cette explication.
Essayer les cadres cloisonnés
Utilisez les options Chrome pour activer l'API Fenced Frame sur chrome://flags/#enable-fenced-frames.
Plusieurs choix s'affichent dans la boîte de dialogue. Nous vous recommandons vivement de sélectionner *Activer*, ce qui permet à Chrome de passer automatiquement à la nouvelle architecture dès qu'elle devient disponible.
Les autres options, Activé avec ShadowDOM et Activée avec une architecture multipage, proposent différentes stratégies de mise en œuvre qui ne concernent que les ingénieurs de navigateurs. Actuellement, Enable fonctionne de la même manière que Enabled with ShadowDOM. À l'avenir, Activer correspondra à Activer avec l'architecture multipage.
Détection de fonctionnalités
Pour déterminer si des images cloisonnées sont définies:
if (window.HTMLFencedFrameElement) {
// The fenced frame element is defined
}
Pour déterminer si la configuration de frame cloisonné est disponible :
js
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
// The fenced frame config is available
}
Prise en charge des navigateurs
L'élément <fencedframe> est toujours en mode expérimental. Il est donc actuellement compatible avec Chrome 97 et versions ultérieures. Pour le moment, elle n'est pas compatible avec les autres navigateurs.
Interagir et donner votre avis
Les cadres Fenced Frames font l'objet de discussions actives et peuvent changer à l'avenir. Si vous essayez cette API et que vous avez des commentaires, n'hésitez pas à nous en faire part.
- GitHub: consultez l'explication, soulevez des questions et suivez la discussion.
- Assistance aux développeurs: posez des questions et participez à des discussions sur le dépôt d'assistance pour les développeurs Privacy Sandbox.