iframe rechazó la conexión: por qué pasa y cómo arreglarlo

iframe rechazó la conexión

iframe rechazó la conexión: causas y soluciones, con comprobador | We.Inc

Por qué un iframe muestra "rechazó la conexión": X-Frame-Options o CSP frame-ancestors en la página enmarcada. Pega sus cabeceras de respuesta para ver el veredicto y copia la solución para el servidor.

El recuadro gris de "rechazó la conexión" significa que la página dentro de tu iframe le dijo al navegador que no se deja enmarcar. Lo hace con una cabecera de respuesta X-Frame-Options (DENY o SAMEORIGIN) o con una regla frame-ancestors de Content-Security-Policy. Solo el servidor del sitio enmarcado puede quitarla. Pega sus cabeceras abajo para ver qué regla te bloquea.

Qué significa cada valor de cabecera para tu iframe

Cabecera en la página enmarcada
Quién puede enmarcarla

X-Frame-Options: DENY
Nadie, ni siquiera el mismo sitio

X-Frame-Options: SAMEORIGIN
Solo las páginas del mismo origen

X-Frame-Options: ALLOW-FROM ...
Obsoleto, los navegadores modernos lo ignoran

Content-Security-Policy: frame-ancestors 'none'
Nadie

Content-Security-Policy: frame-ancestors 'self' https://a.example
El mismo origen más los sitios de la lista

Ninguna de las dos cabeceras
Cualquiera

Este error no es un fallo de red y tu etiqueta iframe no tiene nada mal. El navegador descargó la página, leyó una cabecera que prohíbe enmarcarla y sustituyó el contenido por un error. El motivo es la protección contra clickjacking: una página que cualquiera puede enmarcar puede cubrirse con botones invisibles. La solución depende de qué servidor envió la cabecera.

Abre la página que quieres enmarcar en una pestaña normal, abre las herramientas de desarrollo y selecciona la petición del documento en el panel Network.
Copia sus cabeceras de respuesta y pégalas en el comprobador, o edita el ejemplo que ya está ahí.
Introduce el origen de la página que contiene el iframe. El comprobador aplica las mismas reglas que usa el navegador e indica qué cabecera decide.
Si es tu propio servidor, copia la solución correspondiente de los ejemplos de servidor. Si es el sitio de otra persona, enlázalo en lugar de enmarcarlo.

Cuando frame-ancestors está presente en una Content-Security-Policy aplicada, los navegadores ignoran por completo X-Frame-Options. Arregla primero la CSP.
Ninguna de las dos cabeceras funciona desde una etiqueta meta. Ambas deben ser cabeceras de respuesta HTTP reales enviadas por el servidor o la CDN.
Una cabecera Content-Security-Policy-Report-Only nunca bloquea el enmarcado. Solo informa, así que busca la cabecera que aplica la política.
Si necesitas permitir unos pocos sitios asociados, usa frame-ancestors con una lista. X-Frame-Options no tiene ninguna forma funcional de nombrar otro sitio.
Muchos sitios grandes bloquean el enmarcado a propósito. Respétalo: usa su URL oficial para insertar si la ofrecen, o un simple enlace.

Preguntas frecuentes

¿Puedo saltarme el "rechazó la conexión" desde mi propia página?

No. La regla la aplica el navegador del visitante en nombre del sitio enmarcado, y ningún atributo de tu iframe puede anularla. Las únicas vías son cambiar las cabeceras del sitio enmarcado, usar una URL para insertar que el sitio ofrezca para iframes o enlazar hacia fuera.

¿Por qué mi propio sitio no carga en su propio iframe?

Comprueba si hay X-Frame-Options: DENY o frame-ancestors 'none'. Ambas bloquean a cualquier página padre, incluidas las del mismo dominio. Cambia a SAMEORIGIN o frame-ancestors 'self'. Recuerda que un subdominio o un puerto distinto es un origen distinto.

¿Debo usar X-Frame-Options o frame-ancestors?

Usa frame-ancestors, porque puede listar varias páginas padre permitidas y gana siempre que ambas están presentes. Si también envías X-Frame-Options, mantenla coherente con la regla CSP para no confundir a la próxima persona que lea la configuración.

¿Por qué un enlace de vídeo o de mapa rechaza la conexión?

La página normal de reproducción o del lugar suele enviar una cabecera contra el enmarcado, mientras que el servicio publica una dirección aparte para insertar pensada para iframes, a menudo en Compartir y luego Insertar. Nuestro generador de código para insertar convierte los enlaces compatibles en esas direcciones por ti.

¿frame-ancestors comprueba todos los marcos padre?

Sí. Si tu iframe está dentro de otro iframe, todos los ancestros hasta la página superior deben cumplir la política, no solo el padre directo.

Lee la cabecera, no el error

Los navegadores muestran el mismo recuadro gris sea cual sea la regla que se activó, pero la consola la nombra. Busca un mensaje que mencione X-Frame-Options o frame-ancestors y luego abre el panel Network para ver el valor exacto que envió el servidor.
Las redirecciones también importan. Si la dirección del iframe redirige a una página de inicio de sesión, la cabecera que cuenta es la de la respuesta final, que a menudo es más estricta que la de la página que esperabas.

Cómo arreglarlo en un servidor que controlas

Decide quién debe poder enmarcar la página y exprésalo una sola vez, idealmente como directiva frame-ancestors en tu Content-Security-Policy. Si un framework o un middleware de seguridad añade X-Frame-Options por defecto, cambia su configuración en lugar de añadir una segunda cabecera que entre en conflicto.
Después de desplegar, limpia la caché de la CDN y vuelve a comprobar las cabeceras de respuesta en vivo, porque muchos hostings añaden sus propias cabeceras de seguridad en el edge.

Cuando no es tu sitio

Un sitio que bloquea el enmarcado ha decidido que no quiere aparecer dentro de otras páginas. Un enlace, una captura con un enlace o el widget para insertar del propio sitio son las alternativas honestas.
Pasar las páginas de otro sitio por tu servidor como proxy para quitar la cabecera suele romper sus inicios de sesión y puede incumplir sus condiciones de uso, así que no es una solución que valga la pena publicar.

Soluciones de servidor que puedes copiar

Cada ejemplo permite el mismo sitio más un sitio asociado. Sustituye https://partner.example por el origen que debe poder enmarcarte, o usa 'none' para bloquear a todos.

always mantiene la cabecera también en las páginas de error. Elimina cualquier línea antigua de X-Frame-Options para que las dos reglas no se desincronicen.

Apache (.htaccess o virtual host)

Necesita mod_headers. Header always set sustituye cualquier valor anterior de la misma cabecera.

Express con Helmet

Helmet establece X-Frame-Options en SAMEORIGIN por defecto. Desactivarlo y definir frame-ancestors mantiene una única fuente de verdad.

Next.js (next.config.js)

headers() añade cabeceras de respuesta a cada ruta que coincide. Las plataformas de hosting pueden añadir las suyas, así que revisa después la respuesta en vivo.

Comprobador de cabeceras de respuesta

Pega las cabeceras de respuesta de la página que va dentro del iframe. Todo se ejecuta en esta página; no se descarga nada.

Cabeceras de respuesta de la página enmarcada

Origen de la página que contiene el iframe

Origen de la página enmarcada

Restaurar las cabeceras de ejemplo

Veredicto

Esta página padre puede enmarcar la página.

El navegador se negará a mostrar esta página en el iframe.

Todavía no hay un veredicto claro.

Bloqueado por Content-Security-Policy: frame-ancestors 'none'.

Permitido por frame-ancestors: {v} coincide con el origen padre.

Bloqueado por frame-ancestors: ninguna fuente de la lista coincide con {v}.

X-Frame-Options está presente pero se ignora, porque decide frame-ancestors.

Bloqueado por X-Frame-Options: DENY.

Permitido por X-Frame-Options: SAMEORIGIN, y los orígenes coinciden.

Bloqueado por X-Frame-Options: SAMEORIGIN, y {v} es un origen distinto.

ALLOW-FROM está obsoleto y se ignora, así que no bloquea.

X-Frame-Options tiene varios valores distintos. Envía exactamente uno.

Content-Security-Policy-Report-Only nunca bloquea; se ha omitido.

No se encontró ninguna cabecera contra el enmarcado, así que cualquier sitio puede enmarcar esta página.

iframe rechazó la conexión: por qué pasa y cómo arreglarlo