iframe sandbox: todos los tokens, con demo interactiva | We.Inc
Activa y desactiva cada token de iframe sandbox y observa cómo scripts, formularios, ventanas emergentes y alertas funcionan o dejan de hacerlo. Cada token, explicado.
Un atributo sandbox vacío bloquea un iframe por completo: sin scripts, sin envío de formularios, sin ventanas emergentes, sin alertas y con un origen opaco que falla todas las comprobaciones de mismo origen. Cada token allow- que añades devuelve un permiso concreto. Activa los tokens de abajo para ver exactamente qué se rompe y luego copia el conjunto mínimo que necesita tu inserción.
Casos habituales y los tokens que necesitan
Contenido insertado
Valor de sandbox recomendado
Vista previa de HTML estático que generaste
sandbox (vacío)
Demo interactiva o salida de un editor de código
sandbox="allow-scripts"
Formulario de terceros que envía sus respuestas
sandbox="allow-scripts allow-forms allow-same-origin" (solo para un origen distinto)
Widget con enlaces que se abren en una pestaña nueva
añade allow-popups allow-popups-to-escape-sandbox
Juego que captura el ratón
añade allow-pointer-lock
El atributo sandbox es la mejora de seguridad más barata que puedes añadir a un iframe que muestra contenido que no escribiste tú: HTML de usuarios, un espacio publicitario, la vista previa de una página generada. Lo difícil es saber qué tokens necesita cada inserción, porque cuando falta uno lo normal es que falle sin avisar. El marco en vivo de abajo ejecuta pruebas reales, así que ves cada fallo en lugar de adivinarlo. Para lo básico sobre insertar contenido, empieza por nuestra guía de iframe HTML y vídeo.
Marca tokens en la lista. El marco de la derecha se recarga con exactamente ese valor de sandbox, que aparece encima como código listo para copiar.
Con allow-scripts desactivado, el marco solo muestra su línea de respaldo, porque nada de su interior puede ejecutarse.
Activa allow-scripts y el marco informa de su propio origen; después ofrece botones para enviar un formulario, abrir una ventana emergente y mostrar una alerta.
Cada botón indica si el navegador lo permitió. Añade el token correspondiente y vuelve a pulsarlo para comparar.
Empieza con un sandbox vacío y añade tokens de uno en uno hasta que la inserción funcione. Quitarlos de una lista larga es más difícil de razonar.
Nunca combines allow-scripts y allow-same-origin para contenido servido desde tu propio origen. La página enmarcada podría entonces eliminar su propio sandbox.
Para HTML escrito por usuarios, usa srcdoc o un subdominio aparte, así ni siquiera un error en los tokens puede alcanzar las cookies de tu sitio principal.
El sandbox por sí solo no limita la cámara, el micrófono ni funciones similares. Usa junto a él el atributo allow para la política de permisos.
Si los enlaces dentro del marco deben abrir pestañas normales, añade allow-popups-to-escape-sandbox; de lo contrario, la pestaña nueva hereda las mismas restricciones.
Preguntas frecuentes
¿Qué hace un atributo sandbox vacío?
Aplica todas las restricciones a la vez. El documento enmarcado no puede ejecutar scripts, enviar formularios, abrir ventanas emergentes ni modales, navegar la ventana superior, bloquear el puntero ni la orientación, ni iniciar descargas, y se trata como si viniera de un origen único que nunca coincide con nadie.
¿Por qué es peligroso allow-scripts con allow-same-origin?
Cuando el documento enmarcado está en el mismo origen que tu página, esos dos tokens juntos permiten que su script suba y elimine el atributo sandbox, de modo que acaba sin ser más seguro que un iframe normal. La combinación está bien para contenido de un origen realmente distinto, que de todas formas no puede tocar tu página.
Mi formulario en sandbox no hace nada al pulsar enviar. ¿Por qué?
Sin allow-forms el formulario se sigue mostrando, pero al enviarlo no se lanza ninguna validación ni se mandan datos a un servidor. Añade allow-forms. Si el formulario también depende de cookies o almacenamiento de su propio sitio, necesitará además allow-same-origin.
¿Puede un iframe en sandbox redirigir toda mi página?
No, salvo que añadas allow-top-navigation o allow-top-navigation-by-user-activation, que solo lo permite después de que la persona haga clic dentro del marco. Si dejas fuera ambos, una inserción no puede sustituir tu página por otro sitio.
¿Basta con sandbox para mostrar HTML no confiable de forma segura?
Es la capa principal, no la única. Sirve el contenido no confiable desde un origen aparte o con srcdoc, mantén allow-same-origin desactivado cuando los scripts estén activos y añade una Content-Security-Policy al documento enmarcado si controlas cómo se sirve.
Cómo cambia las cosas el origen opaco
Sin allow-same-origin, el documento enmarcado recibe un origen especial que siempre falla la política de mismo origen. Su self.origin se lee como la cadena "null".
Esa sola regla desactiva muchas cosas, porque la página enmarcada deja de contar como parte de su propio sitio. Los widgets que dependen de sus propias cookies o de su estado guardado suelen romperse aquí, y por eso tantos piden allow-same-origin.
Los fallos silenciosos son lo normal
Una ventana emergente bloqueada no lanza ningún error; window.open simplemente devuelve null. Una alerta bloqueada vuelve al instante sin mostrar nada. Un formulario bloqueado se queda quieto. Cuando una inserción se comporta mal, revisa la consola del navegador para ese marco antes de culpar al código de la propia inserción.
Por eso la demo de esta página informa de los resultados dentro del marco: ves el mismo comportamiento silencioso con el que se toparía una inserción real.
sandbox, allow y CSP hacen trabajos distintos
sandbox limita lo que puede hacer el documento enmarcado. El atributo allow define una política de permisos para funciones como la cámara, la pantalla completa o la geolocalización. Content-Security-Policy, enviada por el servidor de la página enmarcada, limita qué scripts y recursos carga.
Una inserción cuidadosa de contenido no confiable usa las tres, y la parte frame-ancestors de CSP decide la pregunta inversa: quién puede enmarcar una página.
Todos los tokens de sandbox
Los tokens van separados por espacios y no distinguen mayúsculas de minúsculas. Todo lo que no aparezca sigue bloqueado.
Tokens de sandbox y lo que permite cada uno
Token
Permite
Ejecutar scripts, pero no abrir ventanas emergentes
Conservar el origen real del documento en lugar de uno opaco
Enviar formularios (si no, se muestran pero no envían nada)
Usar alert(), confirm(), print() y prompt()
Abrir ventanas con window.open() o target="_blank"
Dejar que esas ventanas nuevas se abran sin el sandbox
Descargar archivos desde enlaces o navegación
Navegar la página de nivel superior
Navegar la página de nivel superior, solo después de un clic
Abrir protocolos que no son http, como mailto:
Usar la API Pointer Lock
Bloquear la orientación de la pantalla
Iniciar una sesión de presentación
Solicitar cookies sin particionar mediante la API Storage Access
Patrones para copiar
Vista previa de HTML de usuario con scripts desactivados
El botón dentro del marco tiene un manejador onclick, pero con un sandbox vacío nunca se ejecuta.
Widget de terceros en otro origen
El widget ejecuta su propio script y envía su formulario, y los enlaces pueden abrir pestañas reales. No puede redirigir tu página.
Las mismas restricciones enviadas como cabecera de respuesta
Un servidor puede aplicar sandbox a su propia página con CSP, que se aplica incluso cuando la página se abre directamente en lugar de dentro de un marco.
Activa tokens y prueba el marco
El marco de abajo es un documento srcdoc. Aquí no se ofrece allow-same-origin, porque un marco srcdoc compartiría entonces el origen de esta página, justo la combinación sobre la que advierten los consejos.
Los scripts están bloqueados, así que nada en este marco puede ejecutarse.
Tokens
Atributo actual
Ejecutar scripts, pero no abrir ventanas emergentes
Conservar el origen real del documento en lugar de uno opaco
Enviar formularios (si no, se muestran pero no envían nada)
Usar alert(), confirm(), print() y prompt()
Abrir ventanas con window.open() o target="_blank"
Dejar que esas ventanas nuevas se abran sin el sandbox
Descargar archivos desde enlaces o navegación
Navegar la página de nivel superior
Navegar la página de nivel superior, solo después de un clic
Abrir protocolos que no son http, como mailto:
Usar la API Pointer Lock
Bloquear la orientación de la pantalla
Iniciar una sesión de presentación
Solicitar cookies sin particionar mediante la API Storage Access
Marco de prueba de sandbox
Los scripts se ejecutaron. El origen de este marco es: {v}