Sécuriser une iframe avec l’attribut sandbox

Au fil du temps, nous intégrons de plus en plus de contenus, provenant parfois de partis tiers (widgets pour les réseaux sociaux, publicités, etc). Deux conséquences en découlent : les pages web ne cessent de s’alourdir (mauvais pour les indicateurs de web performance, et nous affichons aux internautes des contenus que nous ne pouvons pas maîtriser complètement.

Certains de ces contenus externes sont intégrés par l’intermédiaire de la balise

les restrictions suivantes vont s’appliquer :

• Aucun script n’est exécuté, le navigateur se comporte comme s’il ne supportait pas le JavaScript

• les requêtes AJAX ne peuvent être lancées (elle dispose de sa propre “origine”, différente de celle de votre page, et enfreint donc le mécanisme standard CORS respecté par les navigateurs web)

• Vous limitez les capacités de stockage sur le navigateur (utilisation de cookies ou du localStorage impossibles par exemple)

• Il est impossible de créer un nouvelle fenêtre, une popup

• L’envoi de formulaire est interdit

• Les plugins Flash, Silverlight ou encore les applets Java ne sont pas chargés

• L’API Pointer lock, qui renvoie des informations liées aux mouvements de la souris, est bloquée

Lever une partie des restrictions avec sandbox attribute

L’attribut sandbox accepte plusieurs valeurs qui vont vous permettre d’assouplir la politique par défaut selon vos besoins, avec par exemple (la liste est non-exhaustive) :

• allow-downloads: le téléchargement est autorisé d’un simple geste

• allow-forms : l’envoi de formulaire est autorisé

• allow-scripts : les scripts sont exécutés

• allow-same-origin : l’iframe reprend la même “origine” que la page, et ne fait plus face aux restrictions liées au mécanisme CORS (autorisation des requêtes AJAX, de l’utilisation du localStorage, de cookies…)

• allow-top-navigation : l’iframe peut à nouveau accéder à la page parente

• allow-popups : l’ouverture d’une nouvelle fenêtre/d’une popup est possible

• allow-orientation-lock : permet à l’iframe de se bloquer le mode portrait ou paysage

Notez que vous ne pouvez pas autoriser de nouveau l’exécution de plugins.

Prenons le cas de l’intégration d’une iframe qui souhaite ouvrir une popup vers un service tiers, et demander une authentification pour accéder à ce service. Les attributs à ajouter seront :

• allow-popup pour autoriser l’ouverture de la popup

• allow-same-origin pour permettre l’authentification et le stockage de cookies

• allow-forms pour autoriser l’envoi du formulaire d’authentification au sein de la popup (car la restriction s’applique à l’iframe, mais aussi aux éléments qui en découlent)

À noter qu’il est déconseillé d’ajouter à la fois les valeurs allow-scripts et allow-same-origin : en autorisant ces 2 valeurs, vous permettez à l’iframe d’accéder et de modifier votre arborescence DOM. Dans ce cas, une iframe malveillante pourra effectuer toutes sortes d’opérations, pouvant même supprimer son propre attribut sandbox !

La Content-Security sandbox, côté contenu

Si vous êtes vous-même éditeur d’un contenu intégré en iframe, vous pouvez définir une Content-Security-Policy sur ce contenu afin d’en limiter la portée et l’impact sur les sites hébergeurs, même en l’absence d’un attribut sandbox de leur côté.

Cette directive de Content-Security-Policy accepte des valeurs similaires à l’attribut sandbox, et est massivement supportée par les navigateurs actuels. N’hésitez cependant pas à conseiller l’utilisation de l’attribut sandbox aux sites utilisateurs, en cas de faille de sécurité, cela leur servira de rempart supplémentaires contre une attaque XSS.