iframe sandbox : chaque jeton, avec une démo à bascules | We.Inc
Activez et désactivez chaque jeton sandbox d'une iframe et voyez scripts, formulaires, popups et alertes marcher ou s'arrêter. Chaque jeton expliqué.
Un attribut sandbox vide verrouille fortement une iframe : pas de scripts, pas d'envoi de formulaire, pas de popups, pas d'alertes, et une origine opaque qui échoue à toute vérification de même origine. Chaque jeton allow- que vous ajoutez rend un pouvoir. Basculez les jetons ci-dessous pour voir exactement ce qui casse, puis copiez le plus petit ensemble dont votre intégration a besoin.
Cas courants et jetons nécessaires
Intégration
Valeur sandbox conseillée
Aperçu HTML statique que vous avez généré
sandbox (vide)
Démo interactive ou sortie d'un bac à sable de code
sandbox="allow-scripts"
Formulaire tiers qui envoie ses réponses
sandbox="allow-scripts allow-forms allow-same-origin" (uniquement pour une autre origine)
Widget avec des liens qui s'ouvrent dans un nouvel onglet
L'attribut sandbox est le gain de sécurité le moins coûteux que vous puissiez ajouter à une iframe qui affiche du contenu que vous n'avez pas écrit : du HTML d'utilisateur, un emplacement publicitaire, l'aperçu d'une page générée. Le plus difficile est de savoir de quels jetons une intégration donnée a besoin, car un jeton manquant échoue généralement en silence. Le cadre en direct ci-dessous exécute de vrais tests, pour que vous voyiez chaque échec au lieu de deviner. Pour les bases de l'intégration, commencez par notre guide sur les iframes HTML et la vidéo.
Cochez des jetons dans la liste. Le cadre de droite se recharge avec exactement cette valeur sandbox, affichée au-dessus sous forme de code à copier.
Avec allow-scripts désactivé, le cadre n'affiche que sa ligne de secours, car rien à l'intérieur ne peut s'exécuter.
Activez allow-scripts et le cadre indique sa propre origine, puis propose des boutons pour envoyer un formulaire, ouvrir une popup et afficher une alerte.
Chaque bouton indique si le navigateur l'a laissé faire. Ajoutez le jeton correspondant et appuyez à nouveau pour comparer.
Partez d'un sandbox vide et ajoutez les jetons un par un jusqu'à ce que l'intégration fonctionne. En retirer d'une longue liste est plus difficile à raisonner.
Ne combinez jamais allow-scripts et allow-same-origin pour du contenu servi depuis votre propre origine. La page encadrée peut alors retirer son propre sandbox.
Préférez srcdoc ou un sous-domaine séparé pour le HTML écrit par les utilisateurs, afin que même une erreur de jetons ne puisse pas atteindre les cookies de votre site principal.
Le sandbox ne limite pas à lui seul la caméra, le micro ou les fonctionnalités similaires. Utilisez en complément l'attribut allow pour la permissions policy.
Si les liens dans le cadre doivent ouvrir des onglets normaux, ajoutez allow-popups-to-escape-sandbox, sinon le nouvel onglet hérite des mêmes restrictions.
Questions fréquentes
Que fait un attribut sandbox vide ?
Il applique toutes les restrictions à la fois. Le document encadré ne peut pas exécuter de scripts, envoyer de formulaires, ouvrir de popups ni de fenêtres modales, naviguer dans la fenêtre principale, verrouiller le pointeur ou l'orientation, lancer de téléchargements, et il est considéré comme venant d'une origine unique qui ne correspond jamais à aucune autre.
Pourquoi allow-scripts avec allow-same-origin est-il dangereux ?
Quand le document encadré est sur la même origine que votre page, ces deux jetons ensemble permettent à son script de remonter et de supprimer l'attribut sandbox, si bien qu'il n'est finalement pas plus sûr qu'une iframe ordinaire. L'association convient pour du contenu provenant d'une origine réellement différente, qui ne peut de toute façon pas toucher votre page.
Mon formulaire en sandbox ne fait rien quand j'appuie sur envoyer. Pourquoi ?
Sans allow-forms, le formulaire s'affiche toujours, mais l'envoyer ne déclenche aucune validation et n'envoie aucune donnée à un serveur. Ajoutez allow-forms. Si le formulaire dépend aussi des cookies ou du stockage de son propre site, il aura également besoin de allow-same-origin.
Une iframe en sandbox peut-elle rediriger toute ma page ?
Non, sauf si vous ajoutez allow-top-navigation, ou allow-top-navigation-by-user-activation, qui ne le permet qu'après un clic de la personne dans le cadre. Laisser les deux de côté empêche une intégration de remplacer votre page par un autre site.
Le sandbox suffit-il pour afficher du HTML non fiable en toute sécurité ?
C'est la couche principale, pas la seule. Servez le contenu non fiable depuis une origine séparée ou via srcdoc, laissez allow-same-origin désactivé quand les scripts sont activés, et ajoutez une Content-Security-Policy au document encadré si vous contrôlez la façon dont il est servi.
Ce que change l'origine opaque
Sans allow-same-origin, le document encadré reçoit une origine spéciale qui échoue toujours à la politique de même origine. Son self.origin vaut la chaîne "null".
Cette seule règle désactive beaucoup de choses, car la page encadrée ne compte plus comme faisant partie de son propre site. Les widgets qui dépendent de leurs propres cookies ou de leur état enregistré cassent souvent ici, c'est pourquoi tant d'entre eux demandent allow-same-origin.
Les échecs silencieux sont la norme
Une popup bloquée ne lève pas d'erreur : window.open renvoie simplement null. Une alerte bloquée revient immédiatement sans rien afficher. Un formulaire bloqué reste là sans rien faire. Quand une intégration se comporte mal, vérifiez la console du navigateur pour ce cadre avant d'accuser le code de l'intégration.
C'est pourquoi la démo de cette page affiche les résultats à l'intérieur du cadre : vous voyez le même comportement discret que rencontrerait une vraie intégration.
sandbox, allow et CSP ont des rôles différents
sandbox limite ce que le document encadré peut faire. L'attribut allow définit une permissions policy pour des fonctionnalités comme la caméra, le plein écran ou la géolocalisation. La Content-Security-Policy, envoyée par le serveur de la page encadrée, limite les scripts et ressources qu'elle charge.
Une intégration soignée de contenu non fiable utilise les trois, et la directive frame-ancestors de la CSP tranche la question inverse : qui a le droit d'encadrer une page.
Tous les jetons sandbox
Les jetons sont séparés par des espaces et insensibles à la casse. Tout ce qui n'est pas listé reste bloqué.
Jetons sandbox et ce que chacun autorise
Jeton
Autorise
Exécuter des scripts, mais pas ouvrir de fenêtres popup
Garder l'origine réelle du document au lieu d'une origine opaque
Envoyer des formulaires (sinon ils s'affichent mais n'envoient rien)
Utiliser alert(), confirm(), print() et prompt()
Ouvrir des fenêtres avec window.open() ou target="_blank"
Laisser ces nouvelles fenêtres s'ouvrir sans le sandbox
Télécharger des fichiers via des liens ou la navigation
Naviguer dans la page de premier niveau
Naviguer dans la page de premier niveau, seulement après un clic
Ouvrir des protocoles non http comme mailto:
Utiliser la Pointer Lock API
Verrouiller l'orientation de l'écran
Démarrer une session de présentation
Demander des cookies non partitionnés via la Storage Access API
Modèles à copier
Aperçu de HTML utilisateur avec les scripts désactivés
Le bouton dans le cadre a un gestionnaire onclick, mais avec un sandbox vide il ne s'exécute jamais.
Widget tiers sur une autre origine
Le widget exécute son propre script et envoie son formulaire, et les liens peuvent ouvrir de vrais onglets. Il ne peut pas rediriger votre page.
Les mêmes restrictions envoyées dans un en-tête de réponse
Un serveur peut mettre sa propre page en sandbox avec la CSP, ce qui s'applique même quand la page est ouverte directement plutôt qu'encadrée.
Basculez les jetons et testez le cadre
Le cadre ci-dessous est un document srcdoc. allow-same-origin n'est pas proposé ici, car un cadre srcdoc partagerait alors l'origine de cette page, précisément l'association contre laquelle les conseils mettent en garde.
Les scripts sont bloqués, donc rien dans ce cadre ne peut s'exécuter.
Jetons
Attribut actuel
Exécuter des scripts, mais pas ouvrir de fenêtres popup
Garder l'origine réelle du document au lieu d'une origine opaque
Envoyer des formulaires (sinon ils s'affichent mais n'envoient rien)
Utiliser alert(), confirm(), print() et prompt()
Ouvrir des fenêtres avec window.open() ou target="_blank"
Laisser ces nouvelles fenêtres s'ouvrir sans le sandbox
Télécharger des fichiers via des liens ou la navigation
Naviguer dans la page de premier niveau
Naviguer dans la page de premier niveau, seulement après un clic
Ouvrir des protocoles non http comme mailto:
Utiliser la Pointer Lock API
Verrouiller l'orientation de l'écran
Démarrer une session de présentation
Demander des cookies non partitionnés via la Storage Access API
Cadre de test sandbox
Les scripts se sont exécutés. L'origine de ce cadre est : {v}
Envoyer le formulaire
Ouvrir une popup
Afficher une alerte
Formulaire envoyé.
Le formulaire n'a pas été envoyé.
Popup ouverte (puis refermée).
Popup bloquée : window.open a renvoyé null.
L'alerte a été affichée.
Alerte bloquée : elle est revenue aussitôt sans s'afficher.