Attributs de contenu, de sécurité et de conception pour IFRAME

click fraud protection

le iframe L'élément intègre d'autres pages Web directement dans la page actuelle. HTML5 introduit trois nouveaux attributs à cet élément pour aider à résoudre les problèmes de sécurité et de convivialité du HTML4 iframe la mise en oeuvre.

L'attribut 'bac à sable'

le bac à sable attribut de la iframe L'élément est une fonctionnalité de sécurité utile pour les iframes. Lorsque vous le placez dans un iframe élément, l'agent utilisateur interdit les fonctionnalités qui pourraient présenter un risque de sécurité pour le site et ses utilisateurs.

Par example:

demande au navigateur d'interdire toutes les fonctionnalités qui pourraient constituer un risque pour la sécurité - donc pas de plug-ins, formulaires, scripts, liens sortants, biscuits, stockage local et accès à la page du même site.

Ensuite, en utilisant le bac à sable les valeurs des mots clés, réactivez certaines des fonctionnalités. Ces mots-clés sont:

  • permettre-formulaires: Autoriser la soumission de formulaire.
  • instagram viewer
  • autoriser-même-origine: autorise les scripts à accéder au contenu comme les cookies du même domaine d'origine.
  • autoriser les scripts: autorise l'exécution des scripts dans cet IFRAME.
  • autoriser-haut-navigation: Autoriser les liens et scripts iframe vers la cible "_top"

Ne réglez pas à la fois le autoriser les scripts et autoriser-même-origine mots-clés ensemble sur le même iframe. Si vous le faites, la page intégrée peut alors supprimer le bac à sable attribut, annulant ses avantages en matière de sécurité.

L'attribut 'srcdoc'

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

En plaçant du code HTML créé par une source non fiable, telle qu'un formulaire, dans un iframe vous pouvez mettre en sandbox le contenu non fiable et l'afficher toujours sur la page. Les commentaires de blog en sont un exemple. La plupart des blogs ne proposent 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 Iframe

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

Si vous le pouvez, définissez le contenu qui se trouve dans le bac à sable iframe comme le text/html-sandbox Type MIME.

L'attribut « sans couture »

le sans couture L'attribut est un attribut booléen qui indique au navigateur d'afficher le iframe comme s'il faisait partie du document parent. Si vous voulez votre iframe pour afficher de manière transparente, incluez simplement cet attribut dans l'élément:

Mais faire le iframe sans couture, c'est plus que l'apparence, c'est aussi la façon dont la page interagit avec le cadre. Quelques conseils:

  • Liens dans le iframe s'ouvrira dans la fenêtre parent à moins que le iframe la page a la cible "_SELF" définie.
  • CSS dans le iframe sera ajouté à la cascade de l'ensemble du document.
  • L'élément racine du iframe la page est considérée comme un enfant de la iframe.
  • La largeur et la hauteur du iframe sont définis de manière similaire à la façon dont autres éléments de niveau bloc serait fixé.
  • Lorsque le document parent est visualisé par un outil de rendu vocal tel qu'un lecteur d'écran, le iframe serait lu sans l'annoncer en tant que document séparé.

Tout script sur le document parent affecterait le iframe documenter de la même manière. Par exemple, si un script répertorie tous les cadres de la page, les liens dans le iframe serait également répertorié.

En d'autres termes, le sans couture L'attribut fait bien plus que simplement supprimer les bordures du 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 de sécurité à votre site Web en incorporant un site malveillant.

instagram story viewer