diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/fr/web/html/element/iframe/index.html | 400 |
1 files changed, 178 insertions, 222 deletions
diff --git a/files/fr/web/html/element/iframe/index.html b/files/fr/web/html/element/iframe/index.html index 1ce4ef0446..1e7c45a210 100644 --- a/files/fr/web/html/element/iframe/index.html +++ b/files/fr/web/html/element/iframe/index.html @@ -1,274 +1,230 @@ --- -title: <iframe> +title: '<iframe> : l''élément de cadre intégré' slug: Web/HTML/Element/iframe tags: - - Contenu + - Content - Element + - Embedded content + - Embedding + - Frames - HTML + - HTML embedded content + - Inline Frames - Reference - Web + - embedded + - iframe translation_of: Web/HTML/Element/iframe +browser-compat: html.elements.iframe --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><iframe></code></strong> représente un contexte de navigation imbriqué qui permet en fait d'obtenir une page HTML intégrée dans la page courante. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. {{domxref("Window")}}).</p> +<p>L'élément HTML <strong><code><iframe></code></strong> représente un <a href="/fr/docs/Glossary/Browsing_context">contexte de navigation</a> imbriqué qui permet en fait d'obtenir une page HTML intégrée dans la page courante.</p> <div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<p>Chaque contexte de navigation possède son propre <a href="/fr/docs/Web/API/History">historique</a> et son propre <a href="/fr/docs/Web/API/Document">document actif</a>. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. <a href="/fr/docs/Web/API/Window"><code>Window</code></a>).</p> -<p>Chaque contexte de navigation possède son propre historique et son propre document actif.</p> - -<p>Chaque contexte de navigation créé par un élément <code><iframe></code> représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi bien qu'en théorie on puisse ajouter autant d'<em>iframes</em> que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.</p> - -<h2 id="Attributs">Attributs</h2> +<div class="notecard warning"> + <p>Chaque contexte de navigation créé par un élément <code><iframe></code> représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi, bien qu'en théorie on puisse ajouter autant d'<em>iframes</em> que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.</p> +</div> -<p>Cet élément prend en charge <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>Aucune omission, la balise ouvrante et la balise fermante doivent être présentes.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Aucun rôle correspondant</a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#application"><code>application</code></a>, <a href="https://w3c.github.io/aria/#document"><code>document</code></a>, <a href="https://w3c.github.io/aria/#img"><code>img</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a></td> + </tr> + </tbody> + </table> + +<h2 id="attributes">Attributs</h2> + +<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("allow")}}</dt> - <dd>L'attribut <code>allow</code> permet de définir une <a href="/fr/docs/Web/HTTP/Feature_Policy">politique de fonctionnalité</a> pour l'<em>iframe</em>.</dd> - <dt>{{htmlattrdef("allowfullscreen")}}</dt> - <dd>Cet attribut, lorsqu'il vaut <code>true</code><em>(vrai)</em> indique que l'<em>iframe</em> intégré peut être passé en plein écran via la méthode{{domxref("Element.requestFullscreen()")}}. - <p class="note">Cet attribut est considéré comme historique et a été redéfini avec <code>allow="fullscreen"</code>.</p> - </dd> - <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> - <dd>Cet attribut, lorsqu'il vaut <code>true</code>, permet à l'<em>iframe</em> intégré d'appeler l'API <a href="https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API">Payment Request</a>. - <p class="note">Cet attribut est considéré comme historique et a été redéfini avec <code>allow="payment"</code>.</p> - </dd> - <dt>{{htmlattrdef("csp")}}{{experimental_inline}}</dt> - <dd>L'attribut <code>csp</code> définit <a href="/fr/docs/Web/HTTP/CSP">la politique de sécurité du contenu</a> que le document intégré doit respecter.</dd> - <dt>{{htmlattrdef("height")}}</dt> - <dd>Cet attribut définit la hauteur du cadre en pixels CSS ({{HTMLVersionInline(5)}}). En {{HTMLVersionInline(4.01)}}, elle peut être exprimée en pixels ou en pourcentages.</dd> - <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt> - <dd>Cet attribut indique l'importance de la ressource. La priorité est indiquée au navigateur à l'aide d'une des valeurs suivantes : - <dl> - <dt><code>auto</code></dt> - <dd>Cette valeur indique l'absence de préférence. Le navigateur pourra utiliser sa propre heuristique afin de décider de la priorité de la ressource. C'est la valeur par défaut.</dd> - <dt><code>high</code></dt> - <dd>Cette valeur indique au navigateur que la ressource a une priorité haute.</dd> - <dt><code>low</code></dt> - <dd>Cette valeur indique au navigateur que la ressource a une priorité basse.</dd> - </dl> - </dd> - <dt id="name-attribute">{{htmlattrdef("name")}}</dt> - <dd>Un nom pour le contexte de navigation (ou la <em>frame</em>). Ce nom peut être utilisé comme la valeur de l'attribut <code><strong>target</strong></code> <em>(cible)</em> d'un élément {{HTMLElement("a")}} ou {{HTMLElement("form")}} <em>(formulaire)</em> ou comme valeur de l'attribut <strong><code>formtarget</code></strong> d'un élément {{HTMLElement("input")}} <em>(entrée)</em> ou {{HTMLElement("button")}} <em>(bouton)</em>. Il peut également être utilisé comme valeur pour le paramètre <code>windowName</code> de la méthode {{domxref("Window.open()","window.open()")}}.</dd> - <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> - <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource : - <ul> - <li><code>no-referrer</code> signifie que l'en-tête {{HTTPHeader("Referer")}} ne sera pas envoyé.</li> - <li><code>no-referrer-when-downgrade</code> signifie qu'aucune en-tête <code>Referrer</code> ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.</li> - <li><code>origin</code> signifie que le référent sera l'origine de la page (c'est-à-dire son schéma, son hôte et le port utilisé).</li> - <li><code>origin-when-cross-origin</code> signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.</li> - <li><code>same-origin</code> un référent sera envoyé pour <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">les origines du même site</a> mais les requêtes multi-origines ne contiendront pas d'informations de référent.</li> - <li><code>strict-origin</code> seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).</li> - <li><code>strict-origin-when-cross-origin</code> : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).</li> - <li><code>unsafe-url</code> signifie que le référent incluera l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.</li> - </ul> - </dd> - <dt>{{htmlattrdef("sandbox")}}</dt> - <dd>Cet attribut permet d'appliquer des restrictions sur le contenu qui peut apparaître dans l'<em>iframe</em>. Si cet attribut vaut la chaîne de caractères vide, toutes les restrictions sont appliquées, sinon, on peut utiliser une liste de mots-clés séparés par des espaces pour définir des restrictions précises. Les mots-clés qui peuvent être utilisés sont : - <ul> - <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}} : permet aux téléchargements d'avoir lieu sans un signe de l'utilisateur.</li> - <li><code>allow-forms</code> : le contexte de navigation intégré peut envoyer des formulaires. Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li> - <li><code>allow-modals</code> : le contexte de navigation peut ouvrir des fenêtres modales.</li> - <li><code>allow-orientation-lock</code> : le contexte de navigation peut désactiver le verrouillage de l'orientation de l'écran.</li> - <li><code>allow-pointer-lock</code> : le contexte de navigation peut utliser <a href="/fr/docs/WebAPI/Pointer_Lock">l'API Pointer Lock</a>.</li> - <li><code>allow-popups</code> : le contexte de navigation peut déclencher des fenêtres contextuelles (par exemple avec <code>window.open</code>, <code>target="_blank"</code>, <code>showModalDialog</code>). Si ce mot-clé n'est pas utilisé, la fonctionnalité échouera sans message d'erreur.</li> - <li><code>allow-popups-to-escape-sandbox</code> : ce mot-clé permet à un document isolé dans un bac à sable (<em>sandboxed</em>) d'ouvrir de nouvelles fenêtres sans avoir à forcer la mise en bac à sable pour ces fenêtres. Cela permettra par exemple à une publicité tierce d'être correctement mise dans un bac à sable sans appliquer les mêmes restrictions sur la page initiale.</li> - <li><code>allow-presentation</code> : ce mot-clé permet à un <em>iframe</em> de démarrer <a href="/fr/docs/Web/API/PresentationRequest">une session de présentation</a>.</li> - <li><code>allow-same-origin</code> : ce mot-clé permet au document isolé de supporter les tests de {{Glossary("same-origin policy")}} en désactivant le remplacement de l'origine de l'<em>iframe</em> par une origine unique.</li> - <li><code>allow-scripts</code> : le contexte de navigation peut exécuter des scripts (mais ne peut pas créer de fenêtres contextuelles). Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li> - <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}} : ce mot-clé permet au contexte de navigation embarqué de demander l'accès aux fonctionnalités de stockage du document parent (ex. ses cookies, <a href="/fr/docs/Web/API/Web_Storage_API">le stockage web</a>) grâce à l'<a href="/fr/docs/Web/API/Storage_Access_API">API Storage Access</a>.</li> - <li><code>allow-top-navigation</code> : le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li> - <li><code>allow-top-navigation-by-user-activation</code> : le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li> - </ul> - - <div class="note"> - <p><strong>Notes :</strong></p> - - <ul> - <li>Lorsque le document intégré possède la même origine que la page principale, il est fortement déconseillé d'employer <code>allow-scripts</code> et <code>allow-same-origin</code> simultanément car cela permet de retirer l'attribut <code>sandbox</code>par programme. Bien que ce soit accepté, ce cas de figure n'est pas plus sûr que de ne pas utiliser l'attribut <code>sandbox</code>.</li> - <li>La mise en bac à sable (<em>sandboxing</em>) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un <em>iframe</em> sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.</li> - <li>L'attribut <code>sandbox</code> n'est pas pris en charge par Internet Explorer 9 et les versions antérieures.</li> - </ul> - </div> - </dd> - <dt>{{htmlattrdef("src")}}</dt> - <dd>L'URL de la page qu'on souhaite intégrer. On pourra utiliser <code>about:blank</code> pour les pages vides afin de respecter les règles de même origine (<em>Same-Origin Policy</em>). On notera également que retirer l'attribut <code>src</code> d'un élément <code><iframe></code> à l'aide d'un script (par exemple avec {{domxref("Element.removeAttribute()")}}) provoquera le chargement de <code>about:blank</code> dans la <em>frame</em> pour Firefox à partir de la version 65, pour les navigateurs basés sur Chromium ainsi que pour Safari.</dd> - <dt>{{htmlattrdef("srcdoc")}}</dt> - <dd>Le contenu de la page qu'on souhaite intégrer dans le contexte de navigation. Cet attribut est généralement utilisé avec l'attribut <code>sandbox</code>. Si le navigateur prend en charge l'attribut <code>srcdoc</code>, ce dernier surchargera le contenu éventuellement défini via l'attribut <code>src</code>. Si un navigateur ne prend pas en charge l'attribut <code>srcdoc</code>, c'est le contenu lié via <code>src</code> qui sera affiché. On notera que si le contenu de l'attribut contient une balise ouvrante <code><script></code>, il est nécessaire d'avoir une balise fermante afin que le script soit exécuté, même s'il n'y a aucun contenu après le script.</dd> - <dt>{{htmlattrdef("width")}}</dt> - <dd>Cet attribut indique la largeur de l'<em>iframe</em> en pixels CSS. Par défaut, cet attribut vaut <code>300</code>.</dd> + <dt><code id="attr-allow">allow</code></dt> + <dd>L'attribut <code>allow</code> permet de définir une <a href="/fr/docs/Web/HTTP/Feature_Policy">politique de fonctionnalité</a> pour l'<i>iframe</i>. Cette politique définit les fonctionnalités disponibles au sein de l'<i>iframe</i> selon l'origine de la requête (les fonctionnalités peuvent être l'accès au micro, à la caméra, aux informations de batterie, etc.). Pour plus d'informations, voir <a href="/fr/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#the_iframe_allow_attribute">l'article sur l'utilisation de <code>Feature-Policy</code></a>.</dd> + <dt><code id="attr-allowfullscreen">allowfullscreen</code></dt> + <dd>Cet attribut, lorsqu'il vaut <code>true</code>, indique que l'<i>iframe</i> intégrée peut être passée en plein écran via la méthode<a href="/fr/docs/Web/API/Element/requestFullScreen"><code>Element.requestFullscreen()</code></a>. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est considéré comme historique et a été redéfini avec <code>allow="fullscreen"</code>.</p> + </div> + </dd> + <dt><code id="attr-allowpaymentrequest">allowpaymentrequest</code></dt> + <dd>Cet attribut, lorsqu'il vaut <code>true</code>, permet à l'<i>iframe</i> intégrée d'appeler l'API <a href="/fr/docs/Web/API/Payment_Request_API">Payment Request</a>. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est considéré comme historique et a été redéfini avec <code>allow="payment"</code>.</p> + </div> + </dd> + <dt><code id="attr-csp">csp</code> {{experimental_inline}}</dt> + <dd>L'attribut <code>csp</code> définit <a href="/fr/docs/Web/HTTP/CSP">la politique de sécurité du contenu</a> que le document intégré doit respecter. Voir <a href="/fr/docs/Web/API/HTMLIFrameElement/csp"><code>HTMLIFrameElement.csp</code></a> pour plus de détails.</dd> + <dt><code id="attr-height">height</code></dt> + <dd>Cet attribut définit la hauteur du cadre en pixels CSS. La valeur par défaut est <code>150</code>.</dd> + <dt><code id="attr-loading">loading</code> {{experimental_inline}}</dt> + <dd>Cet attribut indique la façon dont le navigateur devrait charger l'<i>iframe</i> : + <ul> + <li><code>eager</code> : L'<i>iframe</i> doit être chargée immédiatement, même si elle n'est pas dans la zone d'affichage (<i>viewport</i>) visible. C'est la valeur par défaut.</li> + <li><code>lazy</code> : Le chargement de l'<i>iframe</i> est retardé jusqu'à ce que celle-ci atteigne une distance donnée du <i>viewport</i>, définie par le navigateur.</li> + </ul> + </dd> + <dt id="name-attribute"><code id="attr-name">name</code></dt> + <dd>Un nom pour le contexte de navigation (ou la <em>frame</em>). Ce nom peut être utilisé comme la valeur de l'attribut <code>target</code> <em>(cible)</em> d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> ou <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> <em>(formulaire)</em> ou comme valeur de l'attribut <code>formtarget</code> d'un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> <em>(entrée)</em> ou <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> <em>(bouton)</em>. Il peut également être utilisé comme valeur pour le paramètre <code>windowName</code> de la méthode <a href="/fr/docs/Web/API/Window/open"><code>window.open()</code></a>.</dd> + <dt id="attr-referrer"><code id="attr-referrerpolicy">referrerpolicy</code></dt> + <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource : + <ul> + <li><code>no-referrer</code> signifie que l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> ne sera pas envoyé.</li> + <li><code>no-referrer-when-downgrade</code> signifie qu'aucun en-tête <code>Referer</code> ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas <a href="/fr/docs/Glossary/TLS">TLS</a> (<a href="/fr/docs/Glossary/https">HTTPS</a>). C'est le comportement par défaut de l'agent utilisateur.</li> + <li><code>origin</code> signifie que le référent sera l'origine de la page (c'est-à-dire son <a href="/fr/docs/Learn/Common_questions/What_is_a_URL">schéma</a>, son <a href="/fr/docs/Glossary/Host">hôte</a> et le <a href="/fr/docs/Glossary/Port">port</a> utilisé).</li> + <li><code>origin-when-cross-origin</code> signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine incluront le chemin explicite du référent.</li> + <li><code>same-origin</code> un référent sera envoyé pour <a href="/fr/docs/Web/Security/Same-origin_policy">les mêmes origines</a> mais les requêtes multi-origines ne contiendront pas d'informations de référent.</li> + <li><code>strict-origin</code> seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).</li> + <li><code>strict-origin-when-cross-origin</code> : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).</li> + <li><code>unsafe-url</code> signifie que le référent inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). <strong>Cette valeur n'est pas sûre</strong>, car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines non sécurisées.</li> + </ul> + </dd> + <dt><code id="attr-sandbox">sandbox</code></dt> + <dd>Cet attribut permet d'appliquer des restrictions sur le contenu qui peut apparaître dans l'<i>iframe</i>. Si cet attribut vaut la chaîne de caractères vide, toutes les restrictions sont appliquées, sinon, on peut utiliser une liste de mots-clés séparés par des espaces pour définir des restrictions précises. Les mots-clés qui peuvent être utilisés sont : + <ul> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}} : permet aux téléchargements d'avoir lieu sans un signe de l'utilisateur.</li> + <li><code>allow-downloads</code> : permet aux téléchargements d'avoir lieu après une action de la part de l'utilisateur.</li> + <li><code>allow-forms</code> : le contexte de navigation intégré peut envoyer des formulaires. Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li> + <li><code>allow-modals</code> : le contexte de navigation peut ouvrir des fenêtres modales.</li> + <li><code>allow-orientation-lock</code> : le contexte de navigation peut désactiver le verrouillage de l'orientation de l'écran.</li> + <li><code>allow-pointer-lock</code> : le contexte de navigation peut utliser <a href="/fr/docs/Web/API/Pointer_Lock_API">l'API Pointer Lock</a>.</li> + <li><code>allow-popups</code> : le contexte de navigation peut déclencher des fenêtres contextuelles (par exemple avec <code>window.open</code>, <code>target="_blank"</code>, <code>showModalDialog</code>). Si ce mot-clé n'est pas utilisé, la fonctionnalité échouera sans message d'erreur.</li> + <li><code>allow-popups-to-escape-sandbox</code> : ce mot-clé permet à un document isolé dans un bac à sable (<em>sandboxed</em>) d'ouvrir de nouvelles fenêtres sans avoir à forcer la mise en bac à sable pour ces fenêtres. Cela permettra par exemple à une publicité tierce d'être correctement mise dans un bac à sable sans appliquer les mêmes restrictions sur la page initiale.</li> + <li><code>allow-presentation</code> : ce mot-clé permet à un <i>iframe</i> de démarrer <a href="/fr/docs/Web/API/PresentationRequest">une session de présentation</a>.</li> + <li><code>allow-same-origin</code> : ce mot-clé permet au document isolé de supporter les tests de <a href="/fr/docs/Glossary/Same-origin_policy">same-origin policy</a> en désactivant le remplacement de l'origine de l'<i>iframe</i> par une origine unique.</li> + <li><code>allow-scripts</code> : le contexte de navigation peut exécuter des scripts (mais ne peut pas créer de fenêtres contextuelles). Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}} : ce mot-clé permet au contexte de navigation embarqué de demander l'accès aux fonctionnalités de stockage du document parent (ex. ses cookies, <a href="/fr/docs/Web/API/Web_Storage_API">le stockage web</a>) grâce à l'<a href="/fr/docs/Web/API/Storage_Access_API">API Storage Access</a>.</li> + <li><code>allow-top-navigation</code> : le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li> + <li><code>allow-top-navigation-by-user-activation</code> : le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li> + </ul> + <div class="notecard note"> + <p><b>Notes :</b></p> + <ul> + <li>Lorsque le document intégré possède la même origine que la page principale, il est <strong>fortement déconseillé</strong> d'employer <code>allow-scripts</code> et <code>allow-same-origin</code> simultanément, car cela permet de retirer l'attribut <code>sandbox</code> via un programme, c'est donc aussi sûr que de ne pas utiliser l'attribut <code>sandbox</code>.</li> + <li>La mise en bac à sable (<em>sandboxing</em>) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un <i>iframe</i> sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.</li> + <li>L'attribut <code>sandbox</code> n'est pas pris en charge par Internet Explorer 9 et les versions antérieures.</li> + </ul> + </div> + </dd> + <dt><code id="attr-src">src</code></dt> + <dd>L'URL de la page qu'on souhaite intégrer. On pourra utiliser <code>about:blank</code> pour les pages vides afin de respecter les règles de même origine (<em>Same-Origin Policy</em>). On notera également que retirer l'attribut <code>src</code> d'un élément <code><iframe></code> à l'aide d'un script (par exemple avec <a href="/fr/docs/Web/API/Element/removeAttribute"><code>Element.removeAttribute()</code></a>) provoquera le chargement de <code>about:blank</code> dans la <em>frame</em> pour Firefox à partir de la version 65, pour les navigateurs basés sur Chromium ainsi que pour Safari.</dd> + <dt><code id="attr-srcdoc">srcdoc</code></dt> + <dd>Le contenu de la page qu'on souhaite intégrer dans le contexte de navigation et qui surcharge celui indiqué par <code>src</code>.</dd> + <dt><code id="attr-width">width</code></dt> + <dd>Cet attribut indique la largeur de l'<i>iframe</i> en pixels CSS. Par défaut, cet attribut vaut <code>300</code>.</dd> </dl> -<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> +<h3 id="deprecated_attributes">Attributs dépréciés</h3> <dl> - <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut obsolète permettait de définir l'alignement de l'<em>iframe</em> par rapport à son contexte englobant.</dd> - <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt> - <dd>Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu'il vaut 0, aucune bordure n'est dessinée.</dd> - <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt> - <dd>Un URI vers une description détaillée du cadre. En raison d'un mauvais usage, cet attribut n'est pas utile pour les navigateurs non-visuels.</dd> - <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt> - <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges haute et basse.</dd> - <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt> - <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges gauche et droite.</dd> - <dt>{{htmlattrdef("scrolling")}} {{HTMLVersionInline(4)}} uniquement</dt> - <dd>Un attribut à valeur contrainte qui indique si le navigateur doit afficher une barre de défilement (ou tout autre moyen de défilement) pour<em> </em>le cadre : - <ul> - <li><code>auto</code> : la barre de défilement est uniquement affichée lorsque c'est nécessaire.</li> - <li><code>yes</code> : la barre de défilement est toujours affichée.</li> - <li><code>no</code> : aucune barre de défilement n'est affichée.</li> - </ul> - </dd> + <dt><code id="attr-align">align</code> {{deprecated_inline}}</dt> + <dd>Cet attribut obsolète permettait de définir l'alignement de l'<i>iframe</i> par rapport à son contexte englobant.</dd> + <dt><code id="attr-frameborder">frameborder</code> {{deprecated_inline}}</dt> + <dd>Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu'il vaut 0, aucune bordure n'est dessinée. Plutôt que cet attribut, on utilisera la propriété CSS <a href="/fr/docs/Web/CSS/border"><code>border</code></a> pour dessiner la bordure autour d'une iframe.</dd> + <dt><code id="attr-longdesc">longdesc</code> {{deprecated_inline}}</dt> + <dd>Un URI vers une description détaillée du cadre. En raison d'un mauvais usage, cet attribut n'est pas utile pour les navigateurs non-visuels.</dd> + <dt><code id="attr-marginheight">marginheight</code> {{deprecated_inline}}</dt> + <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges haute et basse.</dd> + <dt><code id="attr-marginwidth">marginwidth</code> {{deprecated_inline}}</dt> + <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges gauche et droite.</dd> + <dt><code id="attr-scrolling">scrolling</code> {{deprecated_inline}}</dt> + <dd>Un attribut à valeur contrainte qui indique si le navigateur doit afficher une barre de défilement (ou tout autre moyen de défilement) pour<em> </em>le cadre : + <ul> + <li><code>auto</code> : la barre de défilement est uniquement affichée lorsque c'est nécessaire.</li> + <li><code>yes</code> : la barre de défilement est toujours affichée.</li> + <li><code>no</code> : aucune barre de défilement n'est affichée.</li> + </ul> + </dd> </dl> -<h3 id="Attributs_non-standard_non-standard_inline">Attributs non-standard {{non-standard_inline}}</h3> +<h3 id="non-standard_attributes">Attributs non-standard {{non-standard_inline}}</h3> <dl> - <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> - <dd>Cet attribut est uniquement disponible pour les <a href="/fr/docs/MDN/Doc_status/Addons/WebExtensions">WebExtensions</a>. L'<em>iframe</em> se comporte comme une fenêtre de navigateur de plus haut niveau. Voir {{bug(1318532)}} quant à l'exposition de cet attribut dans Firefox.</dd> + <dt><code id="attr-mozbrowser">mozbrowser</code> {{non-standard_inline}}</dt> + <dd>Cet attribut est uniquement disponible pour les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. L'<i>iframe</i> se comporte comme une fenêtre de navigateur de plus haut niveau. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1318532">le bug 1318532</a> quant à l'exposition de cet attribut dans Firefox.</dd> </dl> -<h2 id="iframe_et_scripts">iframe et scripts</h2> +<h2 id="scripting">Scripts</h2> -<p>Les <code>iframes</code>, tels que les {{HTMLElement("frame")}}, font partie du pseudo-tableau {{domxref("window.frames")}}.</p> +<p>Les <code>iframes</code> (et aussi les <a href="/fr/docs/Web/HTML/Element/frame"><code><frame></code></a>) font partie du pseudo-tableau <a href="/fr/docs/Web/API/Window/frames"><code>window.frames</code></a>.</p> -<p>En utilisant l'élément <code>iframe</code> du DOM, les scripts peuvent accéder à l'objet {{domxref("window")}} de la page HTML incluse par la propriété <code>contentWindow</code>. La propriété <code>contentDocument</code> fait référence au document contenu dans l'<code>iframe</code> (l'équivalent de <code>contentWindow.document</code>) mais n'est pas prise en charge par Internet Explorer avant IE8.</p> +<p>En utilisant l'élément <a href="/fr/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a> du DOM, les scripts peuvent accéder à l'objet <a href="/fr/docs/Web/API/Window"><code>window</code></a> de la page HTML incluse par la propriété <a href="/fr/docs/Web/API/HTMLIFrameElement/contentWindow"><code>contentWindow</code></a>. La propriété <a href="/fr/docs/Web/API/HTMLIFrameElement/contentDocument"><code>contentDocument</code></a> fait référence au document contenu dans l'<code>iframe</code> (l'équivalent de <code>contentWindow.document</code>).</p> -<p>Depuis l'<em>iframe</em>, un script peut obtenir une référence à la fenêtre parente via la propriété {{domxref("window.parent")}}.</p> +<p>Depuis l'<i>iframe</i>, un script peut obtenir une référence à la fenêtre parente via la propriété <a href="/fr/docs/Web/API/Window/parent"><code>window.parent</code></a>.</p> -<p>Les scripts qui tentent d'accéder au contenu de l'<em>iframe</em> doivent respecter <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">les règles de même origine</a> et ne peuvent pas accéder à la plupart des propriétés d'une autre fenêtre s'ils ont été chargés depuis un domaine différent. Cela s'applique également aux scripts d'un <em>iframe</em> qui souhaitent accéder au contexte englobant. On peut toutefois communiquer entre différents domaines grâce à la méthode {{domxref("Window.postMessage()")}}.</p> +<p>Les scripts qui tentent d'accéder au contenu de l'<i>iframe</i> doivent respecter <a href="/fr/docs/Web/Security/Same-origin_policy" title="Same origin policy for JavaScript">les règles de même origine</a> et ne peuvent pas accéder à la plupart des propriétés d'une autre fenêtre s'ils ont été chargés depuis un domaine différent. Cela s'applique également aux scripts d'un <i>iframe</i> qui souhaitent accéder au contexte englobant. On peut toutefois communiquer entre différents domaines grâce à la méthode <a href="/fr/docs/Web/API/Window/postMessage"><code>Window.postMessage()</code></a>.</p> -<h2 id="Positionnement_et_redimensionnement">Positionnement et redimensionnement</h2> +<h2 id="positioning_and_scaling">Positionnement et redimensionnement</h2> -<p>En tant qu'élément remplacé, la position, l'alignement et le redimensionnement du document embarqué via <code><iframe></code> peuvent être ajustés via les propriétés {{cssxref("object-position")}} et {{cssxref("object-fit")}}.</p> +<p>En tant qu'<a href="/fr/docs/Web/CSS/Replaced_element">élément remplacé</a>, la position, l'alignement et le redimensionnement du document embarqué via <code><iframe></code> peuvent être ajustés via les propriétés <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> et <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a>.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="Un_<iframe>_simple">Un <code><iframe></code> simple</h3> +<h3 id="example1">Une <iframe> simple</h3> -<p>Voici un exemple simple où, lorsque l'utilisateur clique sur le bouton, le titre est affiché dans une fenêtre contextuelle.</p> +<p>L'exemple qui suit utilise la page située à <a href="https://example.org">https://example.org</a> pour l'intégrer à la page courante via une iframe.</p> -<h4 id="HTML">HTML</h4> +<h4 id="html">HTML</h4> -<div id="htmlOutputWrapper"> -<pre class="brush: html notranslate"><iframe title="exemple 1 avec iframe" src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300"> +<pre class="brush: html"><iframe src="https://example.org" + title="Exemple d'iframe" width="400" height="300"> </iframe></pre> -</div> - -<h4 id="Résultat">Résultat</h4> -<p>{{EmbedLiveSample('Une_<iframe>_simple', 640, 400)}}</p> +<h4 id="result">Résultat</h4> -<h3 id="Ouvrir_un_lien_dans_un_<iframe>_dans_un_autre_onglet">Ouvrir un lien dans un <code><iframe></code> dans un autre onglet</h3> +<p>{{EmbedLiveSample('example1', 640, 400)}}</p> -<p>Dans cet exemple, une carte Google est affichée dans un cadre.</p> +<h2 id="accessibility_concerns">Accessibilité</h2> -<h4 id="HTML_2">HTML</h4> +<p>Les personnes qui utilisent des outils d'assistance tels que des lecteurs d'écran peuvent utiliser l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#title"><code>title</code></a> pour obtenir la description du contenu embarqué par l'<code>iframe</code>. La valeur du titre doit décrire, de façon claire et concise, le contenu embarqué.</p> -<pre class="brush: html notranslate"><base target="_blank"> -<iframe id="Example2" - title="Example2" - width="400" height="300" - style="border: none" - src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es-419&amp;geocode=&amp;q=buenos+aires&amp;sll=37.0625,-95.677068&amp;sspn=38.638819,80.859375&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Buenos+Aires,+Argentina&amp;z=11&amp;ll=-34.603723,-58.381593&amp;output=embed"> -</iframe> -</pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Ouvrir_un_lien_d'une_<iframe>_dans_un_onglet", 640, 400)}}</p> +<pre class="brush: html"><iframe + title="La page Wikipédia consacrée à Robert Louis Stevenson" + src="https://fr.wikipedia.org/wiki/Robert_Louis_Stevenson"> +</iframe></pre> -<p><a href="https://jsfiddle.net/pablofiumara/mCfAe/">Exemple réel</a></p> +<p>Sans cette description, les utilisateurs peuvent devoir naviguer à l'intérieur de l'<code>iframe</code> et parcourir le contenu afin de comprendre de quoi il s'agit. Le changement de contexte peut être source de confusion et demander un temps de réflexion, notamment pour les pages qui contiennent plusieurs <code>iframe</code> et/ou du contenu interactif tel que des vidéos ou de la musique.</p> -<h2 id="Accessibilité">Accessibilité</h2> +<h2 id="specifications">Spécifications</h2> -<p>Les personnes qui utilisent des outils d'assistance tels que des lecteurs d'écran peut utiliser l'attribut {{HTMLattrxref("title")}} pour obtenir la description du contenu embarqué par l'<code>iframe</code>. La valeur du titre doit décrire, de façon claire et concise, le contenu embarqué.</p> +<p>{{Specifications}}</p> -<pre class="brush: html notranslate"><iframe title="La page Wikipédia consacrée à Robert Louis Stevenson" src="https://fr.wikipedia.org/wiki/Robert_Louis_Stevenson"></iframe></pre> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>Sans cette description, les utilisateurs peuvent devoir naviguer à l'intérieur de l'<code>iframe</code> et parcourir le contenu afin de comprendre de quoi il s'agit. Le changement de contexte peut être source de confusion et demander un temps de réflexion, notamment pour les pages qui contiennent plusieurs <code>iframe</code> et/ou du contenu interactif tel que des vidéos ou de la musique.</p> +<p>{{Compat}}</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="see_also">Voir aussi</h2> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Le contenu alternatif, qui sera affiché par les navigateurs qui ne prennent pas en charge cet élément.</td> - </tr> - <tr> - <th scope="row">Omission de balise</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte du contenu intégré.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLIFrameElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> - <td>{{Spec2('Referrer Policy')}}</td> - <td>Ajout de l'attribut <code>referrerpolicy</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '<iframe>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('Screen Orientation')}}</td> - <td>{{Spec2('Screen Orientation')}}</td> - <td>Ajout du mot-clé <code>allow-orientation-lock</code> pour l'attribut <code>sandbox</code>.</td> - </tr> - <tr> - <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td> - <td>{{Spec2('Presentation')}}</td> - <td>Ajout du mot-clé <code>allow-presentation</code> pour l'attribut <code>sandbox</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> - -<p>{{Compat("html.elements.iframe",3)}}</p> +<ul> + <li><a href="/fr/docs/Web/Privacy">Vie privée, autorisations et sécurité de l'information</a></li> +</ul> |