Cadre en ligne (iframe)

Intégrer une vidéo YouTube, une carte Google Maps ou un formulaire hébergé ailleurs sans copier ni reconstruire leur code repose sur ce principe : une fenêtre découpée dans la page qui affiche, en toute autonomie, le contenu d’une autre adresse web.

Usage type et sécurité

L’attribut src pointe vers l’adresse à afficher, tandis que l’attribut sandbox restreint ce que le contenu intégré est autorisé à faire :

<iframe
  src="https://www.youtube.com/embed/xxxxx"
  title="Vidéo de présentation"
  loading="lazy"
  allowfullscreen>
</iframe>

Dans WordPress, ce mécanisme correspond à ce que fait automatiquement l’oEmbed : coller simplement une URL YouTube ou Twitter dans l’éditeur de blocs génère en coulisses ce type de cadre, sans que l’auteur n’écrive de HTML lui-même.

Pièges fréquents

• Le contenu d’un cadre en ligne provenant d’un autre domaine ne peut pas être lu ni modifié en JavaScript depuis la page qui l’accueille, une restriction de sécurité imposée par la politique d’origine du navigateur.
• Un cadre sans attribut title explicite pose un problème d’accessibilité, car les technologies d’assistance n’ont alors aucun moyen d’annoncer son contenu à l’utilisateur.
• L’attribut loading="lazy" retarde le chargement du cadre jusqu’à ce qu’il approche de la zone visible, un gain de performance appréciable pour une page contenant plusieurs vidéos intégrées.
• Un site peut interdire d’être lui-même affiché dans un cadre en ligne provenant d’un autre domaine grâce à l’en-tête HTTP X-Frame-Options, une protection courante contre le détournement d’interface.