L'attribut sandbox pour sécuriser une iframe

L'élément HTML iframe permet d'imbriquer un contenu extérieur dans votre page courante. C'est utilisé notamment pour intégrer une vidéo provenant de Youtube ou Vimeo, et pour bien d'autres usages. Mais savez-vous que cela constitue une faille de sécurité ?

C'est une blague ?

Et non ce n'est pas une blague, en intégrant un contenu extérieur à votre site par l'intermédiaire d'une iframe, il est possible d'exécuter sur votre site du javascript, d'ouvrir des popups et bien d'autres choses. Mais l'attribut sandbox, pour "bac à sable", est la pour vous aider :

<iframe sandbox src="..."></iframe>

Dès que vous ajoutez cet attribut, les restrictions suivantes se mettent en place sur l'url intégrée :

• Aucun code javascript ne peut s'exécuter
• Aucune requête AJAX ne peut fonctionner
• Limitation des capacités de stockage du navigateur
• Pas de popup (ouverture en nouvelle fenêtre)
• Pas d'envoi de formulaire
• Aucun chargement de plugins tiers comme Flash, Silverlight ou applet Java
• Aucune information disponible pour les mouvements de souris (API Pointer Lock)

Un peu contraignant tout ça... Et si vous avez besoin d'exécuter un peu de javascript ou lancer des requêtes AJAX ou autres ?

L'attribut sandbox accepte différentes valeurs

<iframe sandbox="..." src="..."></iframe>

• allow-forms : L'envoi de formulaire est autorisé
• allow-scripts : Le javascript est autorisé
• allow-same-origin : Les requêtes AJAX sont autorisées (et plus largement les restrictions liées au mécanisme CORS sont levées)
• allow-top-navigation : L'iframe a le droit d'accéder à la page parente
• allow-popups : L'ouverture en nouvelle fenêtre (popup) est autorisé
• allow-pointer-lock : L'API Pointer Lock est utilisable
• allow-orientation-lock : L'orientation de l'écran peut être dévérouillé

Concernant une intégration d'une vidéo Youtube il faudra faire confiance à Google et ajouter allow-scripts allow-same-origin si vous souhaitez utiliser l'attribut sandbox