Comprobador de iframes

¿Qué determina si una página puede incrustarse?

Guía rápida: configuración de encabezados de respuesta

Si eres el propietario del sitio, controla su incrustación directamente mediante los encabezados de respuesta.

Nota: `frame-ancestors` de CSP ha sustituido a `X-Frame-Options`. Si ambos están presentes, prevalece CSP; se recomienda usar `frame-ancestors`.

¿Cómo detecta el servidor que una solicitud proviene de un iframe?

• `Sec-Fetch-Dest: document` — navegación de nivel superior, fuera de cualquier marco.
• `Sec-Fetch-Dest: iframe` — la petición se carga dentro de un elemento `<iframe>`.
• `Sec-Fetch-Dest: frame` — carga dentro de un `<frame>` (frameset) heredado.
• `Sec-Fetch-Dest: embed / object` — carga dentro de un elemento `<embed>` o `<object>`.

Ejemplos de configuración del servidor: bloqueo de incrustación en iframe

Los siguientes ejemplos muestran cómo configurar cada servidor o framework para bloquear por completo la incrustación en `<iframe>` (X-Frame-Options: DENY + CSP `frame-ancestors 'none'`), que representa la opción más estricta de la guía rápida anterior.

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

¿Necesitas permitir únicamente tu propio sitio o una lista breve de permitidos para incrustar la página, en lugar de bloquearlo todo? Sustituye `DENY` por `SAMEORIGIN`, y `'none'` por `'self'` o una lista explícita de orígenes; el resto de la configuración se mantiene igual.

Limitaciones conocidas por plataforma

Además de las reglas generales sobre cabeceras, algunas plataformas muy conocidas presentan particularidades propias; es importante conocerlas antes de dar por hecho que algo está «bloqueado» o es «incrustable» solo con base en las cabeceras.

Casos de uso comunes

• Determina si un componente de terceros, panel de control o documento puede integrarse en tu producto antes de comenzar a desarrollar el código de integración.
• Verifica que tu propio sitio envíe la política de `X-Frame-Options` o `CSP frame-ancestors` que habías configurado.
• Soluciona problemas con la protección contra clickjacking: comprende por qué una página muestra `about:blank` o un mensaje de rechazo dentro de un iframe.
• Revisa por lotes las URLs candidatas durante la agregación de contenido o la integración de portales; usa el historial de la sesión para rehacer las consultas.
• Prepárate para revisiones de seguridad o pruebas de penetración documentando la política de incrustación (`iframe`) de las dependencias externas.

Preguntas frecuentes