Qu’est-ce qu’un iframe

Un cadre en ligne (iFrame) est un élément qui charge un autre élément HTML à l’intérieur d’une page web. Ils sont généralement utilisés pour intégrer des contenus spécifiques tels que des publicités externes, des vidéos, des balises ou d’autres éléments interactifs dans la page.

Vous vous demandez peut-être comment cela se passe. Il y a de fortes chances que le concepteur du site ait placé un élément iFrame dans cette page.

Dans cet article, nous allons examiner de plus près l’iFrame et la manière de l’utiliser, ainsi que d’autres facteurs à prendre en compte avant d’insérer une iFrame dans votre document HTML.

Comment utiliser iFrame

Vous ne devez pas utiliser iFrame de manière excessive. Il peut ralentir votre page et présenter un risque pour la sécurité, en particulier si vous utilisez du contenu provenant d’un site web suspect. Considérez une iFrame comme une partie de votre contenu, mais pas de votre site. Par exemple, si vous souhaitez ajouter une vidéo YouTube, vous pouvez insérer un élément iFrame dans cet article.

Vous savez maintenant que l’iFrame est un élément supplémentaire permettant de partager du contenu provenant d’autres sites. Vous pouvez l’ajouter pour donner aux lecteurs le contexte d’un certain sujet. Vous pouvez insérer un élément iFrame en utilisant la balise <iframe> dans un document HTML. Copiez le code ci-dessous et collez-le dans le bloc-notes, puis enregistrez le fichier au format .html :

<iframe src="https://www.youtube.com/embed/dXBohfjc4WA" width="680" height="480" allowfullscreen></iframe>

Le code ci-dessus affiche une vidéo tutoriel YouTube réalisée par Hostinger. Examinons chaque étiquette séparément :

• La balise <iframe>…</iframe> est utilisée pour contenir la vidéo dans l’iFrame.
• La source de l’iFrame (src) est l’origine du contenu du serveur externe ou interne. N’oubliez pas de mettre le code intégré dans l’URL.
• La largeur et la hauteur correspondent au rapport d’aspect de l’iFrame. Vous pouvez insérer une taille fixe telle que 680×480 pixels (px) comme dans l’exemple. Vous pouvez également utiliser une méthode basée sur un pourcentage (10%-100%) pour ajuster l’iFrame automatiquement.

Risques de sécurité liés à l’utilisation de l’iFrame

Par nature, l’élément iFrame ne présente aucun risque pour la sécurité de votre page web ou de vos lecteurs. Il a été développé en partie pour aider les créateurs de contenu à ajouter des éléments visuellement attrayants pour l’engagement des lecteurs. Néanmoins, vous devez faire attention lorsque vous ajoutez une iFrame à partir d’un site web non fiable.

L’utilisation d’iFrames provenant de sources non fiables ou inconnues peut potentiellement exposer votre site web à diverses menaces, telles que le JavaScript malveillant ou le cross-site scripting (XSS). Ces types d’attaques redirigent les visiteurs vers un site malveillant, qui peut alors installer un virus sur le PC des visiteurs ou tenter de voler des informations sensibles. C’est pourquoi il n’est pas recommandé d’inclure l’iFrame comme partie intégrante de votre site web.

Pour réduire les risques, les sites web doivent

• Veillez à ce que les sites web externes soient correctement sécurisés (par exemple, HTTPS, pas de contenu mixte).
• N’intégrez que du contenu provenant de sources fiables.
• Utilisez l’attribut sandbox pour restreindre les actions au sein de l’iFrame.

Conclusion

En résumé, l’iFrame est un élément puissant si vous souhaitez accroître l’engagement de vos visiteurs. Considérez l’iFrame comme une partie du contenu que vous créez, et non comme une partie intégrante de votre site web.

Vous ne devez cependant pas utiliser iFrame de manière excessive ; il est préférable que vous puissiez développer votre site sans iFrame. Si vous devez tout de même l’utiliser à des fins de développement, n’utilisez que du contenu provenant d’un site digne de confiance. Nous espérons que cet article vous aidera à mettre en œuvre et à comprendre iFrame.

Tout le contenu des tutoriels de ce site est soumis aux normes éditoriales et aux valeurs rigoureuses de Hostinger.