
Plaire aux robots de Google
> Optimisez les performances de votre site Web
> Séduire les algorithmes des moteurs de recherche
Contentsquare conclut un accord définitif pour l'acquisition de Heap -> Découvrir l'annonce
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 performances, 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 <iframe>, et doivent faire l’objet d’une attention particulière en termes de sécurité. Pour limiter les risques, le W3C a ainsi ajouté l’attribut sandbox dans sa spécification du HTML5, qui permet de restreindre les actions possibles dans l’iframe sur les principaux navigateurs récents.
En terme de sécurité, une bonne habitude lorsqu’on fait appel à des éléments qu’on ne contrôle pas, consiste à “cloisonner” l’environnement de ces éléments : on n’autorise si possible que ce qui va être strictement nécessaire, de façon à limiter les impacts éventuels .
L’attribut sandbox a été créé en ce sens, pour limiter les interactions possibles depuis une iframe insérée sur votre page.
Dès lors que vous utilisez cet attribut sur sur une iframe :
<iframe sandbox src=”…”></iframe>
les restrictions suivantes vont s’appliquer :
Plaire aux robots de Google > Optimisez les performances de votre site Web
> Séduire les algorithmes des moteurs de recherche
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) :
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 :
<iframe sandbox=”allow-same-origin allow-forms allow-popups” src=”…”></iframe>
À 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 !
Speed Analysis en vidéo Plongez dans les pages et les parcours pour obtenir des informations et des alertes approfondies sur les performances Web !
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.
Speed Analysis en vidéo Plongez dans les pages et les parcours pour obtenir des informations et des alertes approfondies sur les performances Web !
3 minutes - Temps de lecture
3 minutes - Temps de lecture