L’élément HTML iframe

Nous savons désormais comment ajouter des images, de l’audio ou des vidéos dans nos pages en intégrant nos propres médias. Il nous reste donc une chose à voir : comment intégrer une autre page web dans un fichier HTML.

L’élément iframe, qui est l’objet de cette leçon, va nous permettre de faire cela et d’intégrer, entre autres, des vidéos YouTube directement dans nos pages.

 

L’élément iframe et ses attributs

L’élément iframe va nous permettre d’intégrer un fichier web entier dans un autre. Nous allons notamment utiliser cet élément pour intégrer des vidéos YouTube dans nos pages web ou des cartes Google Maps.

Pourquoi intégrer des contenus provenant d’autres sites web plutôt qu’héberger nos propres contenus ? Il y a deux raisons principales.

La première concerne l’économie des ressources : en hébergeant une vidéo sur YouTube, par exemple, et en l’intégrant après sur notre site on ne va pas utiliser notre espace serveur ni notre bande passante mais ceux de YouTube, ce qui peut se transformer en des économies substantielles de notre côté.

La deuxième raison est purement technique : il est souvent plus facile et sûr d’utiliser les services créés par d’autres entités reconnues plutôt que de créer nous-mêmes ces choses. Cela est le cas pour les cartes Google Maps par exemple : il est hors de question de se procurer une carte du monde détaillée et de recréer l’outil de notre côté pour afficher une carte quand on peut utiliser celles de Google.

De même pour l’intégration de vidéos YouTube : en passant par YouTube, on n’a pas à se soucier de tous les problèmes de compatibilité des différents codecs avec les différentes versions des navigateurs puisque YouTube se charge de faire ce travail de son côté lorsqu’on télécharge une vidéo sur la plateforme.

Les attributs généralement précisés lors de l’utilisation de l’élément iframe sont les suivants :

src

Cet attribut va nous permettre d’indiquer l’adresse du document à intégrer

width et height

Ces attributs permettent de définir les dimensions de notre élément iframe. On pourra les utiliser dans le cas où nous ne pouvons pas modifier les dimensions de l’iframe en CSS.

allow

Cet attribut permet de définir une politique de fonctionnalité pour notre iframe. Le terme « politique de fonctionnalité » désigne le fait de choisir quelles fonctionnalités de l’iframe activer ou désactiver. Cet attribut est utilisé pour renforcer la sécurité du code.

sandbox

Cet attribut est relativement récent. Il nous permet de limiter les permissions de notre iframe c’est-à-dire de limiter ses possibilités. Cet attribut est utilisé pour renforcer la sécurité de notre code.

 

Intégrer une vidéo YouTube avec l’élément iframe

Voyons immédiatement comment utiliser l’élément iframe en pratique en intégrant une vidéo YouTube dans notre page.

Pour cela, je vais utiliser l’une de mes toutes premières vidéos que vous pourrez trouver en cliquant ici.

Ici, nous allons cliquer sur le bouton « partager » sous la vidéo…

…puis sur « intégrer » (« embed » en anglais)…

… et nous allons finalement copier le code d’intégration qui est bien un élément iframe

Nous n’avons ensuite plus qu’à coller ce code dans notre page HTML pour intégrer notre vidéo !

 

iframes et APIs : le cas de l’intégration de cartes Google Maps

L’intégration de cartes Google Maps va être plus complexe ou tout au moins plus longue que celles de vidéos YouTube.

Cela est dû au fait que l’API Google Maps est plus restrictive que celle de YouTube. Une API « Application Programming Interface » ou « Interface de Programmation Applicative » en français est une interface généralement complexe qui va permettre à différentes applications de communiquer entre elles et de s’échanger des données.

L’intégration d’iframes va souvent de pair avec l’utilisation d’API. Pour nous, vous pouvez considérer qu’une API nous permet d’accéder à une application sans avoir à se soucier des mécanismes d’arrière-plan permettant de la faire fonctionner.

D’un autre côté, les API servent également à limiter les intégrations « sauvages » en demandant à l’utilisateur de s’enregistrer et de générer une clef pour pouvoir utiliser une application en question sur son site.

Cela va être le cas avec l’intégration de cartes Google Maps : nous allons devoir passer une clef de sécurité (API Key ou API Token) en attribut de notre iframe pour pouvoir s’identifier auprès de Google et pouvoir utiliser le service de cartes.

Pour obtenir une clef d’API, il suffit généralement de s’inscrire sur le site proposant l’API. Dans le cas de Google Maps, cependant, cela n’est pas suffisant puisque l’utilisation de l’API Google Maps est payante depuis cette année. Il faudra donc également être prêt à payer pour intégrer des cartes Google Maps.

Pour cette raison, je ne vous présenterai pas comment intégrer des cartes Google Maps dans ce cours mais cet exemple me semblait intéressant car il m’a permis d’introduire le concept d’API et également de vous expliquer les différentes contraintes auxquelles nous pouvons être soumis en tant que développeurs.

 

iframe, sécurité et performance

Il convient de faire preuve de prudence lors de l’utilisation d’un élément iframe comme pour tout autre élément faisant appel à des données externes. En effet, ce type d’élément peut potentiellement se transformer en point d’entrée pour des personnes mal intentionnées (des « hackeurs ») qui peuvent exploiter certaines failles pour dérober des informations sensibles à nos utilisateurs ou pour rendre notre site non opérationnel.

Les problématiques de sécurité sont très complexes et ne sont pas à la portée de développeurs débutants et c’est la raison pour laquelle je n’en parlerai pas en détail dans ce cours. En effet, pour en comprendre les tenants et les aboutissants, il faut comprendre comment fonctionnent les sites Internet, les réseaux, ainsi que connaitre les langages comme le JavaScript et comprendre l’interaction entre les différents langages.

Je resterai donc très superficiel ici et vais simplement vous conseiller d’ajouter des attributs allow et >sandbox dans vos éléments iframe qui vont permettre de très largement limiter les menaces entrantes.

Chacun de ces deux attributs peut prendre de nombreuses valeurs. En les utilisant sans valeur, nous désactivons la plupart des fonctionnalités liées aux iframes. A chaque fois qu’on ajoute une valeur dans ces attributs, on indique qu’on souhaite réactiver la fonctionnalité liée à la valeur en question.

Pour information, on va pouvoir passer les valeurs suivantes (et donc ativer les fonctionnalités correspondantes) à allow :

• Accelerometer ;
• Ambient light sensor ;
• Autoplay ;
• Camera ;
• Encrypted media ;
• Fullscreen ;
• Geolocation ;
• Gyroscope ;
• Lazyload ;
• Microphone ;
• Midi ;
• PaymentRequest ;
• Picture-in-picture ;
• Speaker ;
• USB ;
• VR / XR.

De même, l’attribut sandbox va nous permettre d’activer les fonctionnalités suivantes :

• allow-scripts : l’iframe peut exécuter des scripts ;
• allow-forms : l’envoi de formulaire dans l’iframe est permis ;
• allow-popups : l’iframe peut ouvrir des popup (fenêtres contextuelles) ;
• allow-modals : l’iframe peut ouvrir des fenêtres modales ;
• allow-orientation-lock ;
• allow-pointer-lock ;
• allow-popups-to-escape-sandbox ;
• allow-presentation ;
• allow-same-origin ;
• allow-top-navigation ;
• allow-top-navigation-by-user-activation.

Un autre souci lié à l’utilisation d’iframe est l’intégration du contenu de notre site sur d’autres sites. Nous pouvons appeler ça des menaces « sortantes » pour les distinguer des précédentes.

Les intentions liées à ce comportement sont généralement malveillantes : vol de contenu, tentative d’imitation de notre site ou épuisement de nos ressources.

En effet, vous devez bien comprendre que lorsque quelqu’un intègre nos contenus sur son site avec un élément iframe, l’affichage du contenu de l’iframe va puiser dans nos ressources serveur puisque le contenu va être demandé et chargé à partir de notre serveur.

Pour se prémunir contre cela, nous allons pouvoir interdire aux autres sites d’intégrer nos contenus via des éléments iframe. Pour faire cela, nous allons devoir définir une politique de sécurité de contenu ou CSP (Content Security Policy) adaptée.

A ce niveau, le sujet commence à devenir vraiment complexe puisqu’il va falloir configurer nos en-tête HTTP à partir de notre serveur. Je n’entrerai pas plus dans le détail ici car le sujet mériterait un cours à lui seul et serai bien trop complexe pour le moment.

Cependant, retenez tous ces termes pour pouvoir vous renseigner plus avant si un jour vous avez besoin d’utiliser ces objets.

 

Les autres éléments d’intégration

Pour être tout à fait exhaustif, je dois ici préciser que l’élément iframe n’est pas le seul élément d’intégration de ressources externes.

En effet, d’autres éléments comme embed et object existent et servent à intégrer des documents comment des PDF, des graphiques vectoriels (SVG) ou même des Flash.

Cependant, ces éléments sont aujourd’hui à mon sens complètement désuets et vous ne devriez jamais avoir à les utiliser. Nous ne les étudierons donc pas dans ce cours.