Sécuriser les iframes avec l'attribut sandbox

L'attribut sandbox de l'élément iframe en HTML est utilisé pour restreindre les actions qui peuvent être effectuées dans l'iframe. Son rôle est d'améliorer la sécurité et la stabilité de la page web, surtout lorsque l'iframe est fournie par un service tiers que l'on ne contrôle pas, et qui pourrait être abandonné, détourné, voire hacké à l'avenir. Limiter les fonctionnalités à risque d'un iframe provenant d'un domaine tiers aide à prévenir les attaques de type clickjacking ou cross-site scripting (XSS).

Dans le document ou l'application web, on ajoute une balise <iframe> à l'endroit où l'on souhaite inclure le contenu d'un autre site. Par exemple :

<iframe src="https://www.example.org/contenu.html"></iframe>

• L'absence de l'attribut sandbox, signifie par défaut que tout est permis : attention dino danger.
• La présence de sandbox ou sandbox="" (sans valeur) signifie que toutes les restrictions sont appliquées par défaut : sécurité maximum.
• L'énumération d'une ou plusieurs valeurs préfixées par allow va lever les restrictions une par une.

Par exemple, pour autoriser l'exécution de JavaScript, l'ouverture de pop-up et l'accès aux éléments de la page parente, on va utiliser la syntaxe suivante :

<iframe src="https://www.example.org/contenu.html" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>

Voici d'autres autorisations possibles :

• allow-same-origin : permet au contenu de l'iframe d'être traité comme provenant de la même origine que la page parent (alors que par défaut le navigateur considère qu'il s'agit d'une autre origine, apportant de ce fait des restrictions, même si la source de l'iframe provient du même domaine).
• allow-downloads : autorise les téléchargements.
• allow-scripts : autorise l'exécution de JavaScript dans l'iframe.
• allow-popups : autorise l'ouverture de pop-up à partir de l'iframe avec window.open.
• allow-forms : autorise l'utilisation de formulaires dans l'iframe.
• allow-top-navigation : autorise le contenu de l'iframe à charger une nouvelle page dans la fenêtre du navigateur par parent.location par exemple.
• allow-pointer-lock : autorise l'utilisation de la fonctionnalité de verrouillage du curseur/pointeur.
• allow-orientation-lock : autorise le blocage de l'orientation de l'écran (sur smartphone/tablette notamment).
• allow-presentation : autorise le lancement d'une session de présentation.

Cet attribut est épaulé par une directive CSP (Content-Security-Policy) qui définit ces valeurs au niveau des en-têtes HTTP renvoyées par le serveur, par exemple Content-Security-Policy: sandbox; ou Content-Security-Policy: sandbox allow-downloads;