Les iFrames font partie intégrante de la norme HTML depuis longtemps. Dans HTML 4.0, ils ont été regroupés avec les frames désormais obsolètes dans la variante HTML Frameset. Les frames ne sont plus prises en compte dans HTML5, mais les cadres intégrés (iFrames) le sont.
Les iFrames permettent d'inclure d'autres sites web. Le navigateur rend donc un autre fichier HTML à l'intérieur du site web actuel. Le contenu de la fenêtre iFrame peut être formaté individuellement.
Lorsque l'on parle des iFrames, il est bien sûr essentiel d'examiner à nouveau la sécurité de cette technologie HTML. Un problème ici est la présence de code malveillant qui peut être introduit dans les sites web via les iFrames sans être remarqué. C'est évidemment un énorme problème.
Cependant, HTML5 propose désormais des mécanismes de sécurité appropriés pour contourner ces problèmes. Plus d'informations à ce sujet seront fournies dans la suite de ce tutoriel. Avant d'utiliser les iFrames, il convient néanmoins de garder à l'esprit qu'ils représentent potentiellement un danger, notamment parce que les nouveaux attributs de sécurité ne sont pas encore supportés par tous les navigateurs.
Les iFrames font donc partie intégrante du standard HTML5 et apportent quelques attributs supplémentaires. L'exemple suivant montre comment définir des iFrames.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Le résultat dans le navigateur ressemble à ceci :
L'élément iframe se voit attribuer l'attribut src. Cette src contient la page à afficher en tant que valeur. Il peut s'agir d'un fichier local. Cependant, il est également possible - comme dans l'exemple montré ici - de charger une ressource externe.
Les attributs width et height définissent la largeur et la hauteur des iFrames. Si le contenu intégré est plus grand que la taille spécifiée de l'iFrame, des barres de défilement seront affichées.
Entre les balises ouvrante et fermante de <iframe>, n'importe quel contenu peut être défini. Toutefois, ce contenu ne sera visible que dans les navigateurs qui ne reconnaissent pas l'élément iframe.
En HTML5, différents nouveaux attributs sont introduits concernant les iFrames, qui ont principalement à voir avec le comportement découpe fermée appelé "Sandbox".
Les politiques de même origine (Same Origin Policy) dans les navigateurs garantissent qu'une page intégrée ne peut pas être manipulée pendant son affichage. Cette fonctionnalité de sécurité est tout à fait raisonnable. Cependant, ce n'est pas toujours idéal. C'est pourquoi l'attribut sandbox a été introduit en HTML5, permettant aux navigateurs d'indiquer explicitement quelles autorisations doivent être attribuées au contenu intégré d'une page externe dans un iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
Les iFrames dotés de l'attribut sandbox n'ont pas accès au DOM de la page web intégrée. De plus, ils ne sont pas autorisés à exécuter des scripts ni à stocker des cookies. Ces restrictions peuvent être levées en utilisant diverses valeurs de Sandbox.
Différentes valeurs peuvent être attribuées à l'attribut sandbox. En utilisant allow-forms, la page intégrée peut recueillir des informations de l'utilisateur via des formulaires. Les utilisateurs ne savent pas que le formulaire ne provient pas de la page actuelle.
En spécifiant allow-some-origin, la page intégrée est traitée comme provenant du même hôte. Cette valeur lève la politique de même origine.
La valeur allow-top-navigation permet au contenu intégré de la page de modifier le contenu du contexte de navigation le plus haut.
Il y a aussi allow-script. Ainsi, la page intégrée peut contenir du JavaScript qui peut manipuler la page d'intégration.
Voici un exemple de la manière dont une instruction sandbox appropriée pourrait être formulée :
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Vous avez également la possibilité d'attribuer plusieurs valeurs. Celles-ci doivent être séparées par des espaces. Voici un exemple à ce sujet :
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
Les iFrames sont généralement conçus pour intégrer du contenu externe. Cependant, il est également possible de les inclure.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Cet attribut a son importance. Les cibles des liens dans le document intégré sont affichées dans la fenêtre du navigateur où l'élément iframe a été défini - à moins qu'une autre définition n'ait été spécifiée. (Lors d'une inclusion normale, les cibles de liens sont affichées dans la fenêtre iFrame si aucune autre définition n'est donnée).seamless est actuellement pris en charge uniquement par Google Canary, la version de développement de ce navigateur.
L'autre effet concerne les feuilles de style. En effet, les feuilles de style du document incluant s'appliquent également au document inclus. (Dans une inclusion normale, les styles ne sont pas appliqués).
Un nouvel attribut a également été ajouté. Avec srcdoc, il est possible de définir directement le contenu à intégrer. Voici un exemple :
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>Dans ce cas, l'attribut src est manquant, qui spécifie normalement le fichier à inclure.
Le contenu spécifié par srcdoc est traité comme s'il provenait d'un serveur étranger. Il est donc entièrement soumis à la politique Same Origin. Ce comportement est notamment intéressant en ce qui concerne les définitions de script. Tout code HTML et JavaScript arbitraire y est autorisé. Cependant, les guillemets et l'esperluette doivent être décrits par les caractères nommés " ou &.
Vous pouvez également définir une page directement ici et afficher le contenu souhaité.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.de</title> </head> <body> <p>…</p> </body> </html>"> </iframe>
Cela ne doit d'ailleurs pas être un fichier HTML complet. Quelque chose comme ceci est bien sûr également possible:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
Dans le navigateur, cela ressemble à ceci:
Il s'agit donc de la syntaxe HTML normale, sans scripts, etc.
Quelques conseils sur les attributs qui ont été utilisés jusqu'à présent pour la mise en page visuelle: Des choses comme scrolling, marginwidth et marginheight ne sont plus autorisées en HTML5. Ces attributs sont remplacés par CSS.
