Comprendre les nouveaux éléments 'IFRAME' en HTML5

L'élément vous permet d'intégrer d'autres pages Web directement dans votre page Web. Cependant, lors de l’utilisation d’iframes, certains problèmes de sécurité et de conception n’ont pas été résolus dans HTML 4.01. HTML5 apporte trois nouveaux attributs à cet élément pour aider à répondre à ces préoccupations:

L'attribut bac à sable

le bac à sable attribut de la IFRAME element est une fonction de sécurité très utile pour les iframes. Quand vous le placez dans un IFRAME élément, vous indiquez à l'agent d'utilisateur d'interdire les fonctionnalités susceptibles de poser un risque pour la sécurité du site et de ses utilisateurs.

Par exemple:

bac à sable = "" >

Indique au navigateur d'interdire toutes les fonctionnalités pouvant constituer un risque pour la sécurité. Plus précisément, les plugins sont interdits. Les formulaires ne peuvent pas être soumis. Les scripts ne fonctionneront pas et les liens en dehors de la IFRAME ne sont pas permis. Enfin, l'accès aux cookies, au stockage local et aux autres pages du même domaine (origine) n'est pas autorisé.

Puis, en utilisant le bac à sable mot-clé, vous pouvez réactiver certaines fonctionnalités. Ces mots clés sont:

• permettre-formes-Autoriser la soumission de formulaire
• permettre-même-origine-Autoriser les scripts à accéder à des contenus tels que des cookies du même domaine d'origine
• permettre-scripts-Autoriser les scripts à s'exécuter dans cette IFRAME
• permettre-top-navigation-Autoriser le IFRAME liens et scripts à la _Haut cible

Ce n’est pas une bonne idée de définir le permettre-scripts et permettre-même-origine mots-clés ensemble sur le même IFRAME. Si vous faites cela, la page incorporée peut alors supprimer complètement le bac à sable attribut, annulant les avantages de sécurité.

L'attribut srcdoc

le srcdoc attribut est un attribut qui donne au concepteur Web plus de contrôle sur les iframes et plus de sécurité. Au lieu de créer un lien vers une page Web à une autre URL, le concepteur Web place le code HTML à afficher dans un IFRAME à l'intérieur de srcdoc attribut.

Au début, vous pourriez vous demander: «En quoi cela diffère-t-il de la mise en place du code HTML dans la page?». À certains égards, ce n'est pas très différent. Mais vous devez garder à l’esprit une des fonctions du IFRAME élément, qui consiste à garder les données non fiables séparées du reste du site.

En plaçant du HTML créé par une source non fiable, telle qu'un formulaire, dans un IFRAME vous pouvez «mettre en bac» le contenu non approuvé et l'afficher sur la page. Les commentaires de blog sont un exemple. La plupart des blogs n'ont qu'un nombre limité de balises HTML que les commentateurs peuvent utiliser dans leurs commentaires. Mais en plaçant ces commentaires dans un bac à sable IFRAME en utilisant le srcdoc attribut, les commentaires peuvent être plus robustes tout en protégeant le site dans son ensemble.

Sécurité et iframes

Les deux attributs ci-dessus assurent la sécurité de votre IFRAME éléments, mais ils ne constituent pas une preuve contre tous les sites malveillants. Si le site malveillant peut convaincre un utilisateur d’accéder directement au contenu hostile (en tapant l’URL dans son navigateur, par exemple), il peut toujours être attaqué.

Si possible, il est préférable de définir le contenu qui se trouve dans le bac à sable IFRAME comme le text / html-sandboxed Type MIME.

L'attribut sans couture

le sans couture attribut est un attribut booléen qui indique au navigateur d’afficher le IFRAME comme si cela faisait partie du document parent. Si tu veux ton IFRAME pour un affichage transparent, incluez simplement cet attribut dans l'élément:

sans couture >

Mais faire le IFRAME La transparence ne se limite pas à l'aspect visuel, c'est aussi la manière dont la page interagit avec le cadre. Par exemple:

• Liens dans le IFRAME s'ouvrira dans la fenêtre parente, à moins que le IFRAME la page a la cible _SOI ensemble.
• CSS dans le IFRAME sera ajouté à la cascade du document entier.
• L'élément racine du IFRAME la page est considérée comme un enfant du IFRAME.
• La largeur et la hauteur de la IFRAME sont définies de la même manière que les autres éléments de niveau bloc.
• Lorsque le document parent est visualisé par un outil de rendu de la parole, tel qu'un lecteur d'écran, IFRAME serait lu sans l’annoncer comme un document séparé.
• Tout script sur le document parent affecterait la IFRAME document de la même manière. Par exemple, si un script répertorie tous les cadres de la page, les liens dans la liste IFRAME serait répertorié ainsi.

En d'autres termes, le sans couture attribut fait beaucoup plus que simplement supprimer les frontières de la IFRAME. Si vous allez définir un IFRAME pour être transparent, vous devez être très sûr du contenu afin de ne pas ajouter de risque pour la sécurité de votre site Web en intégrant un site malveillant.