El Atributo SANDBOX

Se utiliza con la etiqueta iframe para restringir las capacidades del contenido incrustado, mejorando la seguridad al aislarlo del documento principal.

El atributo sandbox en HTML se utiliza con la etiqueta <iframe> para restringir las capacidades del contenido incrustado, mejorando la seguridad al aislarlo del documento principal. Este tutorial explica cómo implementarlo, sus valores y casos de uso comunes.

1. Introducción al atributo sandbox

  • Propósito:
    Limitar las acciones que el contenido dentro de un <iframe> puede realizar, evitando riesgos como:

    • Ejecución de scripts maliciosos.

    • Envío de formularios no autorizados.

    • Acceso al DOM del documento padre.

  • Contexto:
    Esencial al incrustar contenido de terceros no confiable (ej.: comentarios de usuarios, widgets externos).

2. Sintaxis básica

El atributo se agrega a la etiqueta <iframe>.
Puede estar vacío (aplica todas las restricciones) o permitir ciertas funcionalidades mediante valores específicos:

html
Copy
<!-- Bloquea todas las capacidades -->
<iframe src="url" sandbox></iframe>

<!-- Permite algunas capacidades -->
<iframe src="url" sandbox="allow-forms allow-scripts"></iframe>
 
Run HTML

3. Valores del atributo sandbox

Valor Descripción
allow-forms Permite el envío de formularios dentro del iframe.
allow-scripts Permite la ejecución de scripts (pero bloquea APIs peligrosas como eval).
allow-same-origin Permite que el contenido se trate como del mismo origen que el documento padre.
allow-popups Permite ventanas emergentes (ej.: window.open()).
allow-modals Permite diálogos como alert() o confirm().
allow-orientation-lock Permite bloquear la orientación de la pantalla (útil en móviles).
allow-pointer-lock Permite capturar el puntero del mouse (ej.: en juegos).
allow-presentation Permite el modo de presentación (como Pantalla Completa).
allow-popups-to-escape-sandbox Permite que las ventanas emergentes hereden el sandbox del padre.
allow-top-navigation Permite que el iframe navegue en la ventana superior (peligroso).
allow-top-navigation-by-user-activation Permite navegación superior solo si el usuario la activa (ej.: clic).

4. Ejemplos prácticos

Ejemplo 1: Iframe con restricciones totales

html
Copy
<iframe 
  src="https://ejemplo-externo.com" 
  sandbox
></iframe>
 
Run HTML

  • Bloquea scripts, formularios, APIs y acceso al DOM padre.

Ejemplo 2: Permitir formularios y scripts

html
Copy
<iframe 
  src="formulario.html" 
  sandbox="allow-forms allow-scripts"
></iframe>
 
Run HTML

  • El iframe puede ejecutar scripts y enviar formularios, pero no acceder al DOM padre.

Ejemplo 3: Contenido del mismo origen con scripts

html
Copy
<iframe 
  src="widget-interno.html" 
  sandbox="allow-scripts allow-same-origin"
></iframe>
 
Run HTML

  • Útil para aislar componentes internos sin exponer el documento principal.

5. Buenas prácticas

  1. Usa el sandbox incluso para contenido confiable: Minimiza riesgos de ataques.

  2. Habilita solo lo necesario: Evita valores como allow-scripts allow-same-origin si no son esenciales.

  3. Combina con CSP (Content Security Policy): Refuerza la seguridad con políticas HTTP.

  4. Prueba en diferentes navegadores: Algunas restricciones pueden variar.

6. Casos de uso comunes

  • Widgets de terceros: Incrustar mapas o reproductores sin exponer datos sensibles.

  • Editores de texto enriquecido: Aislar el contenido editable para evitar XSS.

  • Demostraciones de código: Ejecutar ejemplos de código de forma segura.

7. Errores comunes

  • Permitir allow-same-origin sin necesidad: Expone el documento padre a ataques.

  • Olvidar sandbox en iframes externos: Riesgo de scripts maliciosos.

  • Habilitar demasiados permisos: Anula el propósito de seguridad del sandbox.

8. Compatibilidad

  • Navegadores modernos: Chrome, Firefox, Safari y Edge soportan sandbox.

  • Navegadores antiguos: IE 10+ soporta la versión básica, pero algunos valores (como allow-modals) son más recientes.

  • Ver detalles en Can I use.

9. Conclusión

El atributo sandbox es clave para:

  • Proteger tu sitio de contenido incrustado no confiable.

  • Controlar permisos de forma granular en iframes.

  • Equilibrar funcionalidad y seguridad.

Ejemplo final:

html
Copy
<iframe 
  src="https://formulario-externo.com" 
  sandbox="allow-forms allow-scripts allow-same-origin"
  title="Formulario seguro"
></iframe>
 
Run HTML

Recuerda:

  • Nunca confíes únicamente en sandbox; combínalo con otras prácticas de seguridad.

  • Actualiza los permisos según las necesidades específicas de tu proyecto.

  • ¡Prueba siempre en entornos reales antes de desplegar!

Con este tutorial, podrás implementar iframes más seguros y controlados en tus aplicaciones web. ????