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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
X-Frame-OptionsChrome Full support 4Edge Full support 12Firefox Full support 3.6.9IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ALLOW-FROMChrome No support NoEdge No support 12 — 79Firefox No support 18 — 70IE Full support 8Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 18Opera Android ? Safari iOS No support NoSamsung Internet Android No support No
SAMEORIGINChrome Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Chrome 61, this applies to all of a frame's ancestors.
Edge Full support 12Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Firefox 59, this applies to all of a frame's ancestors.
IE Full support 8Opera Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Opera 48, this applies to all of a frame's ancestors.
Safari Full support YesWebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Chrome 61, this applies to all of a frame's ancestors.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Chrome 61, this applies to all of a frame's ancestors.
Firefox Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Firefox 59, this applies to all of a frame's ancestors.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes Starting in Opera 48, this applies to all of a frame's ancestors.
Safari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

Veja também