<fencedframe> : l'élément de cadre protégé
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
L'élément HTML <fencedframe>
(ou « cadre protégé ») représente un contexte de navigation imbriqué, intégrant une autre page HTML dans la page courante. Les <fencedframe>
sont très similaires aux éléments <iframe>
dans leur forme et leur fonction, à ceci près :
- La communication est restreinte entre le contenu du
<fencedframe>
et le site qui l'intègre. - Un
<fencedframe>
peut accéder à des données intersites, mais uniquement dans un ensemble très spécifique de circonstances contrôlées qui préservent la vie privée de l'utilisateur·ice. - Un
<fencedframe>
ne peut pas être manipulé ni voir ses données accessibles via des scripts classiques (par exemple, lecture ou modification de l'URL source). Le contenu d'un<fencedframe>
ne peut être intégré que via des API spécifiques. - Un
<fencedframe>
ne peut pas accéder au DOM du contexte parent, et le contexte parent ne peut pas accéder au DOM du<fencedframe>
.
L'élément <fencedframe>
est un type d'élément <iframe>
doté de fonctionnalités de confidentialité natives supplémentaires. Il répond aux limites des <iframe>
, comme la dépendance aux cookies tiers et d'autres risques pour la vie privée. Voir l'API Fenced frame pour plus de détails.
Attributs
Cet élément inclut les attributs universels.
allow
Expérimental-
Définit une politique d'autorisations pour l'élément
<fencedframe>
, qui précise quelles fonctionnalités sont disponibles pour le<fencedframe>
selon l'origine de la requête. Voir Politiques d'autorisations disponibles pour les cadres protégés pour plus de détails sur les fonctionnalités contrôlables via une politique appliquée à un cadre protégé. height
Expérimental-
Un entier sans unité représentant la hauteur du cadre protégé en pixels CSS. La valeur par défaut est
150
. width
Expérimental-
Un entier sans unité représentant la largeur du cadre protégé en pixels CSS. La valeur par défaut est
300
.
Politiques d'autorisations disponibles pour les cadres protégés
Les autorisations déléguées du contexte principal à un cadre protégé pour autoriser ou refuser des fonctionnalités pourraient servir de canal de communication, ce qui constituerait une menace pour la vie privée. Par conséquent, les fonctionnalités web standards dont la disponibilité peut être contrôlée via une politique d'autorisations (par exemple, camera
ou geolocation
) sont indisponibles dans les cadres protégés.
Les seules fonctionnalités pouvant être activées par une politique à l'intérieur des cadres protégés sont celles spécifiquement conçues pour être utilisées dans ce contexte :
- L'API Protected Audience
attribution-reporting
private-aggregation
shared-storage
shared-storage-select-url
- L'API Shared Storage
attribution-reporting
private-aggregation
shared-storage
shared-storage-select-url
Actuellement, ces fonctionnalités sont toujours activées dans les cadres protégés. À l'avenir, celles qui sont activées pourront être contrôlées via l'attribut allow
de <fencedframe>
. Bloquer les fonctionnalités du privacy sandbox de cette manière empêchera également le chargement du cadre protégé : il n'y aura alors aucun canal de communication.
Sélection à travers les frontières d'un cadre protégé
La possibilité de déplacer la sélection active du document à travers les frontières d'un cadre protégé (c'est-à-dire d'un élément extérieur vers l'intérieur du cadre protégé, ou inversement) est limitée. Les actions initiées par l'utilisateur·ice, comme un clic ou la touche Tab, le permettent, car il n'y a alors aucun risque d'empreinte numérique.
En revanche, tenter de franchir la frontière via un appel d'API comme HTMLElement.focus()
est interdit : un script malveillant pourrait utiliser une série de tels appels pour faire fuiter des informations déduites à travers la frontière.
Positionnement et mise à l'échelle
En tant qu'élément remplacé, le <fencedframe>
permet d'ajuster la position du document intégré dans sa boîte à l'aide de la propriété object-position
.
Note :
La propriété object-fit
n'a aucun effet sur les éléments <fencedframe>
.
La taille du contenu intégré peut être définie par les propriétés internes contentWidth
et contentHeight
de l'objet config
du <fencedframe>
. Dans ce cas, modifier la width
ou la height
du <fencedframe>
changera la taille du conteneur intégré sur la page, mais le document à l'intérieur du conteneur sera visuellement mis à l'échelle pour s'adapter. La largeur et la hauteur rapportées du document intégré (c'est-à-dire Window.innerWidth
et Window.innerHeight
) resteront inchangées.
Accessibilité
Les personnes naviguant avec des technologies d'assistance, comme un lecteur d'écran, peuvent utiliser l'attribut title
sur un <fencedframe>
pour étiqueter son contenu. La valeur du titre doit décrire de façon concise le contenu intégré :
<fencedframe
title="Publicité pour le nouveau Log. Par Blammo !"
width="640"
height="320"></fencedframe>
Sans ce titre, cela les obliges à naviguer à l'intérieur du <fencedframe>
pour déterminer quel est le contenu intégré. Ce changement de contexte peut être déroutant et chronophage, en particulier pour les pages comportant plusieurs <fencedframe>
ou si les contenus intégrés sont interactifs (vidéo, audio, etc.).
Exemples
Pour définir le contenu affiché dans un <fencedframe>
, une API d'utilisation (comme Protected Audience ou Shared Storage) génère un objet FencedFrameConfig
, qui est ensuite affecté à la propriété config
du <fencedframe>
.
L'exemple suivant récupère un FencedFrameConfig
depuis une enchère publicitaire de l'API Protected Audience, qui est ensuite utilisé pour afficher la publicité gagnante dans un <fencedframe>
:
<fencedframe width="640" height="320"></fencedframe>
const frameConfig = await navigator.runAdAuction({
// … configuration de l'enchère
resolveToConfig: true,
});
const frame = document.querySelector("fencedframe");
frame.config = frameConfig;
Résumé technique
Catégories de contenu | Contenu de flux, contenu phrasé, contenu intégré, contenu interactif, contenu tangible. |
---|---|
Contenu autorisé | Aucun. |
Omission de balises | Aucune, la balise ouvrante et la balise fermante sont obligatoires. |
Parents autorisés | Tous les éléments acceptant du contenu intégré. |
Rôle ARIA implicite | Aucun rôle correspondant (angl.) |
Rôles ARIA autorisés |
application , document ,
img , none ,
presentation
|
Interface DOM | HTMLFencedFrameElement |
Spécifications
Specification |
---|
Fenced Frame> # the-fencedframe-element> |
Compatibilité des navigateurs
Loading…
Voir aussi
- L'API Fenced Frame
- Les cadres protégés sur privacysandbox.google.com
- Le bac à sable de la vie privée sur privacysandbox.google.com