La balise iframe

Objectifs

  • Découvrir la balise <iframe>

  • Connaître son utilité et son utilisation

Mise en situation

Il existe une balise particulière qui permet d'inclure différents types de contenus HTML, allant du bandeau publicitaire au module de paiement bancaire, en passant par la carte de navigation : la balise <iframe>.

DéfinitionLa balise <iframe>

Cette balise <iframe> (pour inline frame) peut être paramétrée pour inclure différents types de contenu.

Pour l'utiliser, il faut tout d'abord donner un nom à l'élément afin de l'identifier : pour cela, nous utilisons l'attribut name="". Nous allons ensuite donner une taille à l'élément (par défaut en pixels) grâce à width="" et height="". L'attribut src="" sert quant à lui à indiquer la cible de l'élément que nous souhaitons intégrer dans la page.

L'utilisation de iframe doit se faire de manière maîtrisée : en effet, en intégrant un contenu externe, on ne peut savoir si son contenu restera pertinent dans le temps ni même s'il restera en ligne. L'auteur du site peut décider de couper la ressource, auquel cas elle ne sera plus disponible non plus sur notre site.

De plus, l'élément inclus depuis l'iframe est dans un autre contexte que celui de page : il ne sera pas possible d'appliquer du style CSS, ni de faire interagir notre page avec l'iframe d'aucune manière. Il faut considérer que c'est une capsule de contenu isolée du reste.

Cependant, cette propriété présente plusieurs risques. Puisque la connexion de l’utilisateur au serveur hébergeant le contenu de l’iframe s’effectue à son insu, il est facile pour un individu malveillant d’exploiter cette propriété afin de compromettre sa victime.

L’objectif de l’utilisation de la balise iframe par une personne malintentionnée est bien souvent la propagation de codes malveillants.

ExempleInclure une page web au sein d'une autre page

1
<iframe 
2
  src="http://www.site.com/iframe.html" 
3
  name="Mon Iframe"
4
  width="500"
5
  height="250">
6
</iframe>

Nous pouvons ajouter une iframe à notre blog dans le second bloc de contenu, dans lequel nous afficherons la carte du Japon. Pour cela, générons la balise contenant une carte depuis le site de génération de code Google Maps :

1
<iframe width="500" height="400" src="https://maps.google.com/maps?q=japan&t=&z=7&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <!-- ... -->
5
  </head>
6
  <body>
7
    <header>
8
      <h1>Mon premier voyage au Japon</h1>
9
    </header>
10
    <div>
11
      <!-- ... -->
12
      <h2>Au fait, voici où se trouve le Japon !</h2>
13
      <div>
14
        <iframe width="500" height="400" src="https://maps.google.com/maps?q=japan&t=&z=7&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
15
        <p>
16
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
17
          Suspendisse finibus pulvinar nisl, vehicula molestie nunc convallis nec. 
18
          Phasellus non lacinia lorem. In nec eros id lectus convallis euismod. 
19
          Nunc at felis non eros lobortis gravida.
20
        </p>
21
      </div>
22
      <!-- ... -->
23
     </div>
24
  </body>
25
</html>

SyntaxeÀ retenir

  • Pour ajouter des éléments HTML particuliers au sein d'une page, nous pouvons utiliser <iframe>, mais il faudra être conscient des risques de la difficulté de maintenir et de modifier un tel élément.

Complément

L'élément iframe accepte d'autres attributs dont la liste exhaustive est disponible sur le site du MDN.