1. Web
  2. HTML
  3. Référence HTML
  4. Référence des éléments HTML
  5. <fencedframe>

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

<fencedframe> : l'élément de cadre protégé

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

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

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

Un entier sans unité représentant la hauteur du cadre protégé en pixels CSS. La valeur par défaut est 150.

width

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é :

html
<fencedframe
  title="Publicité pour le nouveau Log. Par Blammo&nbsp;!"
  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> :

html
<fencedframe width="640" height="320"></fencedframe>
js
const frameConfig = await navigator.runAdAuction({
  // … configuration de l'enchère
  resolveToConfig: true,
});

const frame = document.querySelector("fencedframe");
frame.config = frameConfig;

Note : Il faut passer resolveToConfig: true à l'appel de runAdAuction() pour obtenir un objet FencedFrameConfig. Si ce n'est pas le cas, la promesse (Promise) résultante renverra un URN qui ne peut être utilisé que dans un élément <iframe>.

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

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content