X-Frame-Options

Uso

Los ataques de clickjacking engañan a los usuarios para que hagan clic en elementos ocultos superpuestos sobre una página legítima. El atacante incrusta el sitio objetivo en un iframe transparente, coloca encima una interfaz engañosa y captura los clics destinados al contenido enmarcado. X-Frame-Options lo impide indicando al navegador si la respuesta puede aparecer o no dentro de un marco.

Nota

X-Frame-Options está obsoleta en favor de frame-ancestors de CSP. Todos los navegadores modernos admiten frame-ancestors, que ofrece un control más granular, incluidos varios orígenes y la coincidencia de esquema. X-Frame-Options sigue estando ampliamente desplegada por compatibilidad con navegadores antiguos.

La cabecera acepta dos valores activos: DENY y SAMEORIGIN. Un tercer valor, ALLOW-FROM, se definió en implementaciones anteriores, pero hoy está obsoleto y los navegadores modernos lo ignoran.

DENY

El valor DENY impide que la página se muestre en cualquier marco, sea cual sea el sitio que la solicita. No se permite el enmarcado bajo ninguna circunstancia.

SAMEORIGIN

El valor SAMEORIGIN permite que la página sea enmarcada únicamente por páginas que compartan el mismo origen. Una página de https://example.re puede enmarcar otra página de https://example.re, pero una página de un origen distinto queda bloqueada.

ALLOW-FROM (obsoleto)

El valor ALLOW-FROM uri indicaba en su momento al navegador que permitiera el enmarcado solo desde el URI especificado. Los navegadores modernos ya no admiten esta directiva. La funcionalidad equivalente está disponible mediante la directiva frame-ancestors de CSP:

Content-Security-Policy: frame-ancestors https://trusted.example.re

Ejemplo

Bloquear todo enmarcado de una página, la protección más estricta frente al clickjacking:

X-Frame-Options: DENY

Permitir el enmarcado del mismo origen y bloquear a la vez que sitios externos incrusten la página:

X-Frame-Options: SAMEORIGIN

Una configuración de defensa en profundidad que combina X-Frame-Options con la directiva frame-ancestors de CSP para lograr una amplia cobertura de navegadores:

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

Diagnóstico

Los problemas de enmarcado se manifiestan como iframes en blanco o errores en la consola cuando una página se niega a renderizarse dentro de otro documento.

Error de consola “Refused to display in a frame”. El navegador bloquea la página enmarcada y registra Refused to display ‘https://example.re/’ in a frame because it set ‘X-Frame-Options’ to ‘DENY’ (o ‘SAMEORIGIN’). Revise las cabeceras de respuesta del URL enmarcado en la pestaña Network de DevTools. Si la página necesita incrustarse, cambie el valor de la cabecera de DENY a SAMEORIGIN, o elimine la cabecera por completo y utilice frame-ancestors de CSP para un control más fino.

ALLOW-FROM no funciona en los navegadores modernos. La directiva ALLOW-FROM está obsoleta. Chrome, Firefox y Safari la ignoran por completo y tratan la cabecera como si no tuviera ningún valor válido. Sustituya ALLOW-FROM por la directiva frame-ancestors de CSP, que admite varios orígenes: Content-Security-Policy: frame-ancestors https://trusted.example.re https://other.example.re.

Conflicto entre X-Frame-Options y frame-ancestors de CSP. Cuando ambas cabeceras están presentes, los navegadores compatibles con CSP Level 2 y posteriores ignoran X-Frame-Options y siguen únicamente frame-ancestors. Los navegadores antiguos que carecen de soporte para CSP recurren a X-Frame-Options. Confirme que la política prevista sea coherente en ambas cabeceras. Enviar X-Frame-Options: DENY junto con frame-ancestors ‘self’ genera una discrepancia en la que los navegadores modernos permiten el enmarcado del mismo origen, mientras que los antiguos bloquean todo enmarcado.

Incrustaciones legítimas bloqueadas (formularios de pago, widgets, aplicaciones incrustadas). Los servicios de terceros que requieren incrustación en iframe fallan cuando la página anfitriona envía X-Frame-Options: DENY. Utilice frame-ancestors de CSP para añadir a la lista de permitidos los orígenes concretos que necesitan acceso de incrustación: Content-Security-Policy: frame-ancestors ‘self’ https://payments.provider.example.re.

Migrar de X-Frame-Options a frame-ancestors de CSP. Despliegue ambas cabeceras durante el periodo de transición. Configure frame-ancestors para que coincida con la política de enmarcado prevista. Conserve X-Frame-Options para los navegadores sin soporte de CSP. Cuando el tráfico de navegadores antiguos caiga por debajo de umbrales aceptables, elimine X-Frame-Options y apóyese solo en frame-ancestors. Pruebe la migración incrustando la página en un iframe desde un origen permitido y verificando que el marco se carga en varios navegadores.