Verificador de iframe

O que determina se uma página pode ser incorporada?

Guia rápido: configuração dos cabeçalhos de resposta

Se você controla o site, gerencie a incorporação diretamente pelos cabeçalhos de resposta.

Nota: O X-Frame-Options foi substituído pelo CSP frame-ancestors. Quando ambos estão presentes, o CSP prevalece — prefira frame-ancestors.

Como o servidor detecta se uma solicitação vem de um iframe?

• Sec-Fetch-Dest: document — navegação de nível superior, fora de qualquer frame.
• Sec-Fetch-Dest: iframe — a solicitação é carregada dentro de um elemento <iframe>.
• Sec-Fetch-Dest: frame — carregado dentro de um <frame> legado (frameset).
• Sec-Fetch-Dest: embed \/ object — carregado dentro de um elemento <embed> ou <object>.

Exemplos de configuração de servidor: bloquear incorporação em iframe

Os trechos abaixo mostram como configurar cada servidor ou framework para bloquear totalmente a incorporação por <iframe> (X-Frame-Options: DENY + CSP frame-ancestors 'none') — a configuração mais rigorosa do guia rápido acima.

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 });
  },
};

Precisa permitir apenas seu próprio domínio, ou uma lista reduzida de permitidos, para incorporar a página em vez de bloquear todos? Troque DENY por SAMEORIGIN e 'none' por 'self' ou uma lista explícita de origens — o restante da configuração permanece igual.

Pontos de atenção em plataformas conhecidas

Deixando as regras gerais de cabeçalhos de lado, algumas plataformas bem conhecidas têm particularidades próprias — vale a pena saber disso antes de assumir que algo está \"bloqueado\" ou \"incorporável\" só com base nos cabeçalhos.

Casos de uso comuns

• Defina se um widget, painel ou documento de terceiros pode ser incorporado ao seu produto antes de escrever o código de integração.
• Verifique se o seu próprio site está enviando a política de `X-Frame-Options` ou `CSP frame-ancestors` desejada.
• Depurar a proteção contra clickjacking: entenda por que uma página exibe `about:blank` ou uma mensagem de bloqueio dentro de um iframe.
• Validar em lote URLs candidatas durante a agregação de conteúdo ou integração com portais, utilizando o histórico da sessão para revisar os resultados.
• Prepare-se para auditorias de segurança ou testes de penetração documentando a política de incorporação de dependências externas.

Perguntas frequentes