L’élément `iframe` : `src` et `sandbox`

L’élément <iframe> intègre un autre document HTML dans la page actuelle. Chaque cadre intégré possède son propre contexte de navigation, son propre DOM et sa propre portée JavaScript. Le contenu d’un cadre intégré ne peut pas accéder au DOM de la page parente sans autorisation explicite.

Définissez l’URL à intégrer dans l’attribut source : <iframe src="https://example.com" width="800" height="600">. Le cadre intégré crée un nouveau contexte de navigation. L’attribut de titre est requis pour l’accessibilité : title="Embedded map".

sandbox applique des restrictions au contenu du cadre intégré : les scripts, les formulaires, les fenêtres contextuelles et les modules d’extension sont désactivés par défaut. Ajoutez des autorisations précises pour rétablir certaines fonctionnalités : sandbox="allow-scripts allow-same-origin".

L’autorisation des scripts active JavaScript. L’autorisation de la même origine permet de traiter le cadre intégré comme provenant de la même origine (ce qui est nécessaire pour accéder à localStorage). L’autorisation des formulaires permet l’envoi de formulaires. L’autorisation des fenêtres contextuelles permet d’utiliser window.open(). N’accordez que le minimum nécessaire.

Les cadres intégrés provenant d’une autre origine ne peuvent pas accéder au DOM parent : parent.document déclenche une erreur de sécurité. La communication entre cadres interorigines utilise postMessage : iframe.contentWindow.postMessage(data, origin).

Envoyez des messages de la page parente vers le cadre intégré : iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). Dans le cadre intégré, écoutez les messages avec : window.addEventListener("message", handler). Vérifiez toujours event.origin avant de traiter le message.

loading="lazy" sur les cadres intégrés diffère leur chargement jusqu’à ce qu’ils soient proches de la fenêtre d’affichage, ce qui réduit le chargement initial de la page. Cette technique est utile pour les cartes, les vidéos intégrées et les widgets de réseaux sociaux situés sous la ligne de flottaison et qui ne sont pas immédiatement visibles.

Chaque cadre intégré charge un document HTML, du CSS, du JavaScript et des ressources distincts — un coût important en ressources. Évitez les cadres intégrés pour les contenus qui pourraient être intégrés sous forme d’extrait. Chargez paresseusement les cadres intégrés situés sous la ligne de flottaison. Envisagez des modèles de façade (afficher un espace réservé, charger au clic).

Contrôlez le comportement de défilement du cadre intégré : scrolling="no" désactive les barres de défilement (obsolète ; utilisez plutôt overflow: hidden en CSS sur le cadre intégré). Approche moderne : définissez la hauteur du cadre intégré pour qu’elle corresponde à la hauteur du contenu, ce qui élimine le besoin de barres de défilement internes.

L’attribut allow accorde au cadre intégré des fonctionnalités de la politique d’autorisations : allow="camera; microphone; fullscreen". Cela permet au cadre intégré de demander l’accès à la caméra, au microphone et à l’API plein écran, même lorsque l’origine parente n’utilise pas ces fonctionnalités.

YouTube et Google Maps fournissent des codes d’intégration pour les cadres intégrés. Ils comprennent des attributs allow pour le plein écran et la lecture automatique. Ajoutez toujours title="Video title" pour l’accessibilité des lecteurs d’écran. L’attribut sandbox n’est généralement pas ajouté aux codes d’intégration de services tiers — consultez leur documentation pour connaître les recommandations de sécurité.

Que fait par défaut l’attribut sandbox d’un cadre intégré lorsqu’aucune valeur ne lui est attribuée ?

Les cadres intégrés intègrent des documents externes dans des contextes de navigation isolés. L’attribut sandbox restreint les fonctionnalités des cadres intégrés — n’accordez que les autorisations minimales requises. postMessage permet une communication sûre entre origines différentes. Le chargement différé reporte le coût des ressources pour les cadres intégrés situés sous la ligne de flottaison. L’attribut allow accorde des fonctionnalités de la politique d’autorisations aux intégrations de contenu tiers de confiance.