X-Frame-Options

O cabeçalho de resposta HTTP X-Frame-Options pode ser usado para indicar se o navegador deve ou não renderizar a página em um <frame>, <iframe>, <embed> ou <object>. Sites podem usar isso para evitar ataques click-jacking, assegurando que seus conteúdos não sejam embebedados em outros sites.

A segurança adicionada é provida somente se o usuário acessando o documento está usando o navegador que suporte X-Frame-Options.

Nota: O cabeçalho HTTP Content-Security-Policypossui uma diretiva frame-ancestors que torna este cabeçalho obsoleto para navegadores que o suportam.

Tipo de cabeçalho Response header
Forbidden header name não

Sintaxe

Existem duas diretivas possíveis para X-Frame-Options:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

Diretivas

Se você especifica DENY, não somente tentativas em carregar a página em um enquadramento irão falhar quando carregadas de outros sites, mas irão falhar também se forem carregadas do mesmo site. Por outro lado, se você especifica SAMEORIGIN, você ainda pode usar a página em um enquadramento enquanto o site que o está incluindo no enquadramento seja o mesmo servindo a página.

DENY
A página não pode ser mostrada em um enquadramento, independente do site que esteja tentando fazer isso.
SAMEORIGIN
A página só pode ser exibida em um enquadramento se for da mesma origem da página em si. A especificação deixa a cargo do navegador para decidir se esta opção se aplica ao nível mais alto, ao parente, ou à cadeia inteira, entretanto é discutido se a opção não é muito útil a não ser que todos os ancestrias estejam na mesma origem (veja bug 725490). Veja também Browser compatibility para mais detalhes de suporte.
ALLOW-FROM uri
Esta é uma diretiva obsoleta que não funciona mais em navegadores modernos. Não a utilize. Em navegadores legado que a suportam, a página pode ser mostrada em um enquadramento somente na URI de origem especificada. Note que implementação legada do Firefox isso ainda sofria do mesmo problema que a SAMEORIGIN sofreu — ela não checa se os enquadramentos ancestrais para ver se eles são da mesma origem. O cabeçalho HTTP Content-Security-Policy tem a diretiva frame-ancestors que você pode usar ao invés disso.

Exemplos

Nota: Colocar X-Frame-Options dentro de um elemento <meta> é inútil! Por enquanto, <meta http-equiv="X-Frame-Options" content="deny"> não tem nenhum efeito. Não o utilize!  X-Frame-Options funciona somenete colocando a configuração através do cabeçalho HTTP, como nos exemplos abaixo.

Configurando o Apache

Para configurar o Apache para que ele envie o cabeçalho X-Frame-Options para todas as páginas, adicione isto nas configurações do seu site:

Header always set X-Frame-Options "SAMEORIGIN"

Para configurar o Apache para colocar o X-Frame-Options como DENY, adicione isto nas configurações do seu site:

Header set X-Frame-Options "DENY"

Configurando o nginx

Para configurar o nginx para enviar o cabeçalho X-Frame-Options, adicione isto na configuração do seu http, servidor ou localização:

add_header X-Frame-Options SAMEORIGIN always;

Configurando o IIS

Para configurar o IIS para enviar o cabeçalho X-Frame-Options, adicione isto no arquivo Web.config do seu site:

<system.webServer>
  ...

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>

  ...
</system.webServer>

Ou veja este artigo de suporte de configuração da Microsoft utilizando a interface de usuário IIS Manager.

Configurando o HAProxy

Para configurar o HAProxy para enviar o cabeçalho X-Frame-Options, adicione isto na sua configuração do seu front-end, listen, ou backend:

rspadd X-Frame-Options:\ SAMEORIGIN

Alternativamente, em versões mais novas:

http-response set-header X-Frame-Options SAMEORIGIN

Configurando o Express

Para configurar o Express para enviar o cabeçalho X-Frame-Options, você pode usar o helmet que utiliza o frameguard para colocar o cabeçalho. Adicione isto na configuração do seu servidor:

const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: 'SAMEORIGIN' }));

Alternativamente, você pode usar o frameguard diretamente:

const frameguard = require('frameguard')
app.use(frameguard({ action: 'SAMEORIGIN' }))

Especificações

Especificação Título
RFC 7034 HTTP Header Field X-Frame-Options

Compatibilidade de navegador

BCD tables only load in the browser

Veja também