Chrome 154 : un iframe à la hauteur de son contenu

Ce qui se passe

Chrome 154 permet à un iframe de grandir jusqu'à la hauteur de son contenu avec une ligne de CSS : plus de mesure, de messages ni de script de redimensionnement. Mais la page dans l'iframe doit y consentir. Cette contrainte est l'essentiel du billet de Ahmad Alfy, qui relaie la documentation de Chrome (Responsive iframes in Chrome 154).

L'ancienne méthode

Une page ne peut pas regarder dans un iframe d'une autre origine : elle ignore sa hauteur. D'où une hauteur fixe, trop grande (un vide sous le formulaire) ou trop petite (une deuxième barre de défilement, surtout gênante sur mobile devant un formulaire de paiement), ou un échange de messages entre les deux pages : un ResizeObserver dans l'iframe qui envoie sa hauteur par postMessage, et un écouteur dans la page qui vérifie l'origine. Ce code cache plusieurs problèmes : la largeur change la hauteur, le contenu arrive en retard (polices, images, messages d'erreur), plusieurs iframes demandent des identifiants, et si le tiers n'envoie rien, on revient à deviner.

La nouvelle méthode

Dans la page parente :

.embed {
  width: 100%;
  frame-sizing: content-height;
}

Dans le document de l'iframe, une balise meta placée dans le HTML d'origine (l'ajouter en JavaScript ne marche pas) qui liste les sites autorisés à le dimensionner :

<meta name="responsive-embedded-sizing" content="allow-origins=https://shop.example">

Quand le contenu change après le chargement, la page intégrée redemande une mesure :

window.requestResize();

frame-sizing accepte aussi content-width, content-inline-size et content-block-size ; on peut le combiner avec max-height: 80vh.

Avant de livrer

• Chromium seulement pour l'instant. Garder une hauteur fixe par défaut et n'activer le dimensionnement que sous @supports (frame-sizing: content-height) ; côté iframe, tester 'requestResize' in window avant l'appel.
• Décalage de mise en page. L'iframe charge après la page, puis grandit : ce qui est dessous bouge. Dans le premier écran, cela pèse sur les Core Web Vitals ; un min-height raisonnable limite le saut.
• Pas de allow-origins=* sans raison. Laisser n'importe quel site lire la hauteur d'une page peut révéler une information : une page plus haute quand l'utilisateur est connecté en dit déjà long. Lister seulement les sites utiles, en complément de frame-ancestors en CSP.

Où commencer

Les formulaires de paiement et les widgets tiers (commentaires, réservation) sont les cas les plus parlants, mais ils dépendent du prestataire, seul à pouvoir poser la balise et appeler requestResize(). Le point de départ le plus simple est le contenu que vous rendez vous-même dans un iframe srcdoc : aperçus d'e-mails, de texte riche, démos de code. Vous écrivez les deux côtés.

Source : Iframes that finally fit their content, Ahmad Alfy, 9 octobre 2026.