schools example ejemplo allowfullscreen html5 iframe attributes sandbox

html5 - example - iframe sandbox



Valor del atributo sandbox del iframe HTML5 (4)

He estado leyendo en el atributo sandbox de HTML5 para <iframe> s. De acuerdo con la documentación, el atributo de sandbox permite que un desarrollador restrinja de forma selectiva qué acciones se pueden realizar en un <iframe> . ¿El atributo sandbox es puramente una medida de seguridad? ¿El atributo sandbox permite a los diseñadores web implementar cualquier funcionalidad nueva y, de ser así, alguien puede señalar algún ejemplo?


Bueno, es puramente una característica de seguridad, pero también permite nuevas funcionalidades. Tomemos como ejemplo la incorporación de contenido de terceros (usuarios) (por ejemplo, archivos HTML). Tradicionalmente, necesitaría configurar un dominio separado desde el que serviría ese contenido; ahora, sin embargo, puede simplemente servirlo desde donde desee y tratarlo como si fuera un dominio separado.

Además de eso, puede evitar que este contenido de terceros haga ciertas cosas, que no podrías haber prevenido previamente, como:

  • allow-top-navigation : evitando que se rompa
  • allow-pointer-lock : evitando que tome el cursor como rehén
  • allow-popups : evitando que se rompa a través de ventanas emergentes
  • allow-scripts : simplemente bloqueando todos los scripts (también podría haberse hecho a través de CSP)

De forma realista, la combinación del atributo de sandbox de sandbox combinado con los encabezados de CSP controlados proporciona una cantidad increíble de control para ejecutar código de terceros en un entorno seguro. Todavía no está al 100%, pero nos estamos acercando bastante.


El sandbox iframe es puramente una característica de seguridad. Un buen recurso siempre es la especificación W3 HTML5 .

Cuando se establece el atributo, el contenido se trata como de un origen único, formularios, scripts y se inhabilitan varias API potencialmente molestas, se impide que los enlaces se dirijan a otros contextos de navegación y se protegen los complementos.


El atributo de recinto de seguridad no habilita ninguna funcionalidad adicional, solo restringe la funcionalidad del iframe. La única razón para usarlo es como una medida de seguridad.


La zona de pruebas puede ser realmente útil en las pruebas. Considera lo siguiente:

tester.html

<script> document.cookie=''foo=bar'' </script> <iframe src=testee.html>

testee.html

<script> console.log(document.cookie) </script>

Al cargar tester.html, verá en la consola "foo=bar" que fue descargada por testee.html.

Ahora agregue al iframe el atributo de sandbox y la cookie se ha ido: el sandbox creó un entorno de tiempo de ejecución independiente para testee.html, donde no recibe contaminación de cookies de otras páginas que estaban / están abiertas en el navegador durante el proceso de desarrollo. Entonces, cuando necesita una cama de prueba estéril pero no puede o no quiere borrar la caché del navegador, aquí hay una solución rápida y sencilla.