0Pricing
HTML Academy · Lección

Seguridad de iframe: clickjacking y X-Frame-Options

Evite ataques de clickjacking con X-Frame-Options y CSP

Seguridad de iframe: clickjacking y X-Frame-Options es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué es el clickjacking?

El clickjacking (redressing de la interfaz de usuario) incrusta un sitio objetivo en un iframe transparente situado sobre una página señuelo. El usuario cree que está haciendo clic en el señuelo, pero en realidad hace clic en la página autenticada oculta que está debajo, ejecutando acciones en el sitio objetivo sin saberlo.

Mecánica de un ataque de clickjacking

El atacante carga victim.com en un iframe transparente colocado sobre un botón «¡Haga clic para ganar!». Cuando el usuario hace clic, en realidad hace clic en el botón «Eliminar cuenta» de victim.com, autenticado como él mismo mediante la cookie de sesión de victim.com. No se requiere phishing.

Encabezado X-Frame-Options

X-Frame-Options: DENY impide que la página se cargue en cualquier iframe. X-Frame-Options: SAMEORIGIN permite la incrustación únicamente por parte de páginas del mismo origen. Configure este encabezado en el servidor para todas las páginas autenticadas a fin de prevenir el clickjacking.

Content-Security-Policy frame-ancestors

Content-Security-Policy: frame-ancestors 'none' es el reemplazo moderno y más flexible de X-Frame-Options: DENY. frame-ancestors 'self' reemplaza a SAMEORIGIN. frame-ancestors también puede permitir orígenes de confianza específicos: frame-ancestors https://trusted.example.com.

Frame busting con JavaScript

El frame busting heredado utilizaba JavaScript para salir de los frames. El atributo sandbox lo derrota fácilmente, ya que bloquea el script de frame busting. Utilice siempre encabezados del servidor (X-Frame-Options o CSP frame-ancestors); el frame busting mediante JavaScript no es fiable.

Cuándo permitir la incrustación

Casos de uso legítimos para la incrustación: incrustar contenido propio en su propio origen (SAMEORIGIN) o permitir que un socio específico incruste su widget (frame-ancestors con un origen específico). Diseñe la política para permitir estos casos y denegar todos los demás.

Enfoque combinado

Configure tanto X-Frame-Options (para navegadores antiguos) como CSP frame-ancestors (para navegadores modernos) para obtener la máxima cobertura. Cuando ambos están presentes, frame-ancestors tiene prioridad en los navegadores compatibles con CSP. Enviar ambos garantiza la protección contra el clickjacking en todos los agentes de usuario.

Riesgos de los iframe same-origin

Incluso los iframe same-origin pueden plantear riesgos: un XSS almacenado en una página incrustada podría acceder a la página principal mediante parent.document si comparten el mismo origen. Utilice sandbox sin allow-same-origin en los iframe same-origin que no necesiten acceder a la página principal, para limitar los daños provocados por vulnerabilidades del contenido incrustado.

Prueba de su protección

Verifique la protección contra el clickjacking: utilice la pestaña de red del navegador para comprobar si los encabezados de respuesta incluyen X-Frame-Options o CSP frame-ancestors. Herramientas como securityheaders.com analizan los encabezados. Cree una página HTML de prueba con un iframe que apunte a su sitio y compruebe que no se carga.

Incrustaciones de terceros

Al incrustar contenido de terceros (YouTube, Google Maps), usted es el sitio que realiza la incrustación; asegúrese de que el servicio incrustado permita la incrustación en su propia política de X-Frame-Options. No puede incrustar un sitio que impida la incrustación; esto es intencionado y protege a los usuarios del servicio incrustado.

CSP frame-ancestors en etiquetas meta

A diferencia de la mayoría de las directivas CSP, frame-ancestors no puede configurarse mediante una etiqueta meta HTTP-equiv; debe enviarse como un encabezado de respuesta HTTP. Esto garantiza que los atacantes no puedan eliminar la protección manipulando el HTML incrustado antes de que el navegador lea las etiquetas meta.

Comprobación de conocimientos

¿Por qué el código de frame busting mediante JavaScript es una defensa poco fiable contra el clickjacking?

Resumen

El clickjacking incrusta páginas autenticadas en iframe transparentes para secuestrar los clics. La defensa consiste en utilizar los encabezados del servidor X-Frame-Options: DENY o CSP frame-ancestors: none. Configure ambos para obtener cobertura entre navegadores. El frame busting mediante JavaScript no es fiable; utilice siempre encabezados HTTP. frame-ancestors ofrece una lista detallada de orígenes de confianza que X-Frame-Options no puede proporcionar.

Preguntas frecuentes

¿La lección «Seguridad de iframe: clickjacking y X-Frame-Options» es gratis?

Sí — el texto completo de «Seguridad de iframe: clickjacking y X-Frame-Options» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Seguridad de iframe: clickjacking y X-Frame-Options»?

Evite ataques de clickjacking con X-Frame-Options y CSP Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Seguridad de iframe: clickjacking y X-Frame-Options»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. El elemento iframe: src y sandbox
  2. Seguridad de iframe: clickjacking y X-Frame-Options
  3. Los elementos embed y object
  4. Carga diferida de iframes
← Volver a HTML Academy