--- title: X-Frame-Options slug: Web/HTTP/Headers/X-Frame-Options tags: - Cabeçalho de Resposta - Express - Gecko - HAProxy - HTTP - IIS - Segurança - nginx translation_of: Web/HTTP/Headers/X-Frame-Options --- <div>{{HTTPSidebar}}</div> <p>O cabeçalho de resposta <a href="/en-US/docs/Web/HTTP">HTTP</a> <strong><code>X-Frame-Options</code></strong> pode ser usado para indicar se o navegador deve ou não renderizar a página em um {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} ou {{HTMLElement("object")}}. Sites podem usar isso para evitar ataques <em><a href="/en-US/docs/Web/Security/Types_of_attacks#Click-jacking">click-jacking</a></em>, assegurando que seus conteúdos não sejam embebedados em outros sites.</p> <p>A segurança adicionada é provida somente se o usuário acessando o documento está usando o navegador que suporte <code>X-Frame-Options</code>.</p> <div class="note"> <p><strong>Nota:</strong> O cabeçalho HTTP {{HTTPHeader("Content-Security-Policy")}}possui uma diretiva <code><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors">frame-ancestors</a></code> que torna este cabeçalho obsoleto para navegadores que o suportam.</p> </div> <table class="properties"> <tbody> <tr> <th scope="row">Tipo de cabeçalho</th> <td>{{Glossary("Response header")}}</td> </tr> <tr> <th scope="row">{{Glossary("Forbidden header name")}}</th> <td>não</td> </tr> </tbody> </table> <h2 id="Sintaxe">Sintaxe</h2> <p>Existem duas diretivas possíveis para <code>X-Frame-Options</code>:</p> <pre class="syntaxbox notranslate">X-Frame-Options: DENY X-Frame-Options: SAMEORIGIN </pre> <h3 id="Diretivas">Diretivas</h3> <p>Se você especifica <code>DENY</code>, 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 <code>SAMEORIGIN</code>, 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.</p> <dl> <dt><code>DENY</code></dt> <dd>A página não pode ser mostrada em um enquadramento, independente do site que esteja tentando fazer isso.</dd> <dt><code>SAMEORIGIN</code></dt> <dd>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 {{anch("Browser compatibility")}} para mais detalhes de suporte.</dd> <dt><code>ALLOW-FROM <em>uri</em></code><em> </em>{{obsolete_inline()}}</dt> <dd>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 <code>SAMEORIGIN</code> sofreu — ela não checa se os enquadramentos ancestrais para ver se eles são da mesma origem. O cabeçalho HTTP {{HTTPHeader("Content-Security-Policy")}} tem a diretiva <code>frame-ancestors</code> que você pode usar ao invés disso.</dd> </dl> <h2 id="Exemplos">Exemplos</h2> <div class="note"> <p><strong>Nota:</strong> Colocar X-Frame-Options dentro de um elemento {{HTMLElement("meta")}} é inútil! Por enquanto, <code><meta http-equiv="X-Frame-Options" content="deny"></code> não tem nenhum efeito. Não o utilize! <code>X-Frame-Options</code> funciona somenete colocando a configuração através do cabeçalho HTTP, como nos exemplos abaixo.</p> </div> <h3 id="Configurando_o_Apache">Configurando o Apache</h3> <p>Para configurar o Apache para que ele envie o cabeçalho <code>X-Frame-Options</code> para todas as páginas, adicione isto nas configurações do seu site:</p> <pre class="notranslate">Header always set X-Frame-Options "SAMEORIGIN" </pre> <p>Para configurar o Apache para colocar o <code>X-Frame-Options</code> como DENY, adicione isto nas configurações do seu site:</p> <pre class="notranslate">Header set X-Frame-Options "DENY" </pre> <h3 id="Configurando_o_nginx">Configurando o nginx</h3> <p>Para configurar o nginx para enviar o cabeçalho <code>X-Frame-Options</code>, adicione isto na configuração do seu http, servidor ou localização:</p> <pre class="notranslate">add_header X-Frame-Options SAMEORIGIN always; </pre> <h3 id="Configurando_o_IIS">Configurando o IIS</h3> <p>Para configurar o IIS para enviar o cabeçalho <code>X-Frame-Options</code>, adicione isto no arquivo <code>Web.config</code> do seu site:</p> <pre class="brush: xml notranslate"><system.webServer> ... <httpProtocol> <customHeaders> <add name="X-Frame-Options" value="SAMEORIGIN" /> </customHeaders> </httpProtocol> ... </system.webServer> </pre> <p>Ou veja este <a href="https://support.office.com/en-us/article/Mitigating-framesniffing-with-the-X-Frame-Options-header-1911411b-b51e-49fd-9441-e8301dcdcd79">artigo de suporte de configuração da Microsoft utilizando a interface de usuário IIS Manager</a>.</p> <h3 id="Configurando_o_HAProxy">Configurando o HAProxy</h3> <p>Para configurar o HAProxy para enviar o cabeçalho <code>X-Frame-Options</code>, adicione isto na sua configuração do seu <em>front-end</em>, <em>listen</em>, ou <em>backend</em>:</p> <pre class="notranslate">rspadd X-Frame-Options:\ SAMEORIGIN </pre> <p>Alternativamente, em versões mais novas:</p> <pre class="notranslate">http-response set-header X-Frame-Options SAMEORIGIN </pre> <h3 id="Configurando_o_Express">Configurando o Express</h3> <p>Para configurar o Express para enviar o cabeçalho <code>X-Frame-Options</code>, você pode usar o <a href="https://helmetjs.github.io/">helmet</a> que utiliza o <a href="https://helmetjs.github.io/docs/frameguard/">frameguard</a> para colocar o cabeçalho. Adicione isto na configuração do seu servidor:</p> <pre class="brush: js notranslate">const helmet = require('helmet'); const app = express(); app.use(helmet.frameguard({ action: 'SAMEORIGIN' })); </pre> <p>Alternativamente, você pode usar o <em>frameguard</em> diretamente:</p> <pre class="brush: js notranslate">const frameguard = require('frameguard') app.use(frameguard({ action: 'SAMEORIGIN' })) </pre> <h2 id="Especificações">Especificações</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Especificação</th> <th scope="col">Título</th> </tr> </thead> <tbody> <tr> <td>{{RFC("7034")}}</td> <td>HTTP Header Field X-Frame-Options</td> </tr> </tbody> </table> <h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> <p>{{Compat("http.headers.X-Frame-Options")}}</p> <h2 id="Veja_também">Veja também</h2> <ul> <li><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors"><code>frame-ancestors</code> (CSP)</a></li> <li><a href="https://tools.ietf.org/html/rfc7034">Cabeçalho HTTP X-Frame-Options (HTTP Header Field X-Frame-Options) - RFC 7034</a></li> <li><a class="external" href="https://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx">Defesas contra ClickJacking (ClickJacking Defenses) - IEBlog</a></li> <li><a href="https://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx">Combatendo ClickJacking com X-Frame-Options (Combating ClickJacking with X-Frame-Options) - IEInternals</a></li> </ul>