Como definir 'X-Frame-Options' no iframe?

170

Se eu criar um iframeassim:

var dialog = $('<div id="' + dialogId + '" align="center"><iframe id="' + frameId + '" src="' + url + '" width="100%" frameborder="0" height="'+frameHeightForIe8+'" data-ssotoken="' + token + '"></iframe></div>').dialog({

Como posso corrigir o erro:

Recusou-se a exibir 'https://www.google.com.ua/?gws_rd=ssl'em um quadro porque definiu 'X-Frame-Options' como 'SAMEORIGIN'.

com JavaScript?

Darien Fawkes
fonte

Respostas:

227

Você não pode ativar X-Frame-Optionso iframe. Esse é um cabeçalho de resposta definido pelo domínio do qual você está solicitando o recurso ( google.com.uano seu exemplo). Eles definiram o cabeçalho como SAMEORIGINneste caso, o que significa que eles não permitiram o carregamento do recurso em uma parte iframeexterna de seu domínio. Para obter mais informações, consulte O cabeçalho de resposta X-Frame-Options no MDN.

Uma inspeção rápida dos cabeçalhos (mostrada aqui nas ferramentas de desenvolvedor do Chrome) revela o X-Frame-Optionsvalor retornado do host.

insira a descrição da imagem aqui

Drew Gaynor
fonte
7
Com o YouTube, você pode alterar o URL do terminal para a versão "incorporar". Veja stackoverflow.com/questions/25661182/... (eu sei que isso não é estritamente o que o OP está procurando, mas o Google dá o resultado em primeiro lugar!)
73

X-Frame-Optionsé um cabeçalho incluído na resposta à solicitação para declarar se o domínio solicitado permitirá que seja exibido dentro de um quadro. Não tem nada a ver com javascript ou HTML e não pode ser alterado pelo originador da solicitação.

Este site definiu esse cabeçalho para não permitir que ele seja exibido em um arquivo iframe. Não há nada que um cliente possa fazer para interromper esse comportamento.

Leitura adicional sobre X-Frame-Options

Rory McCrossan
fonte
É definido no cabeçalho da resposta, não no cabeçalho da solicitação. Mas de outra maneira explicação exata!
nickang
2
@nickang foi o que eu quis dizer, no entanto, concordo que a terminologia não estava clara. Eu o editei para remover qualquer confusão. Obrigado.
Rory McCrossan
31

Caso você esteja no controle do servidor que envia o conteúdo do iframe, é possível definir a configuração X-Frame-Optionsno seu servidor da web.

Configurando o Apache

Para enviar o cabeçalho X-Frame-Options para todas as páginas, adicione-o à configuração do seu site:

Header always append X-Frame-Options SAMEORIGIN

Configurando o nginx

Para configurar o nginx para enviar o cabeçalho X-Frame-Options, adicione-o à sua configuração de http, servidor ou local:

add_header X-Frame-Options SAMEORIGIN;

Nenhuma configuração

Esta opção de cabeçalho é opcional, portanto, se a opção não estiver definida, você poderá configurá-la para a próxima instância (por exemplo, o navegador de visitantes ou um proxy)

fonte: https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

rubo77
fonte
Isso me ajudou. Comento estas duas linhas: add_header Strict-Transport-Security "max-age=86400; includeSubdomains"; add_header X-Frame-Options DENY;dos nginx-snippets, e então funcionou imediatamente.
Zeth
NGINX, é importante dizer onde , dentro da localização?
22419 Peter Krauss
Peter Kraus, o que você quer?
rubo77
14

Como a solução não foi realmente mencionada no lado do servidor:

É preciso definir coisas como esta (exemplo do apache), essa não é a melhor opção, pois permite tudo, mas depois de ver o servidor funcionando corretamente, você pode alterar facilmente as configurações.

           Header set Access-Control-Allow-Origin "*"
           Header set X-Frame-Options "allow-from *"
Mike Q
fonte
5

realmente não ... eu costumava

 <system.webServer>
     <httpProtocol allowKeepAlive="true" >
       <customHeaders>
         <add name="X-Frame-Options" value="*" />
       </customHeaders>
     </httpProtocol>
 </system.webServer>
LongChalk
fonte
Parece uma solução, mas isso é uma violação de segurança?
Yogurtu
1
É não uma boa ideia política de mesma origem desativar para o seu site se você não sabe exatamente o que você está fazendo. Você não deve permitir domínios diferentes dos seus para incorporar conteúdo. Consulte codecademy.com/articles/what-is-cors e tutoriais semelhantes.
slhck
5

e se nada ajudar e você ainda quiser apresentar esse site em um iframe, considere usar o X Frame Bypass Component que utilizará um proxy.

Tomer Ben David
fonte
2

O cabeçalho de resposta HTTP X-Frame-Options pode ser usado para indicar se um navegador deve ou não ter permissão para renderizar uma página em um <frame>, <iframe>ou <object>. Os sites podem usar isso para evitar ataques de clickjacking, garantindo que seu conteúdo não seja incorporado a outros sites.

Para obter mais informações: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Eu tenho uma solução alternativa para esse problema, que vou demonstrar usando o PHP:

iframe.php:

<iframe src="target_url.php" width="925" height="2400" frameborder="0" ></iframe>

target_url.php:

<?php 
  echo file_get_contents("http://www.example.com");
?>
Shailesh Dwivedi
fonte
5
Esta é uma solução viável para usar a página após o carregamento? Serei capaz de interagir com as páginas após o carregamento inicial? Não seria necessário fazer proxy de todas as solicitações do domínio para usar o conteúdo após o carregamento?
Timothy Gonzalez
0

Para esse fim, você precisa corresponder ao local em seu apache ou qualquer outro serviço que esteja usando

Se você estiver usando o apache, no arquivo httpd.conf.

  <LocationMatch "/your_relative_path">
      ProxyPass absolute_path_of_your_application/your_relative_path
      ProxyPassReverse absolute_path_of_your_application/your_relative_path
   </LocationMatch>
Ibtesam Latif
fonte
0

A solução é instalar um plug-in do navegador.

Um site que emita o cabeçalho HTTP X-Frame-Optionscom um valor de DENY(ou SAMEORIGINcom uma origem de servidor diferente) não pode ser integrado a um IFRAME ... a menos que você altere esse comportamento instalando um plug-in do navegador que ignora o X-Frame-Optionscabeçalho (por exemplo , Ignorar cabeçalhos X-Frame do Chrome )

Observe que isso não é recomendado por razões de segurança.

Julien Kronegg
fonte
0

você pode definir a opção x-frame na configuração da web do site que deseja carregar no iframe assim

<httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="*" />
    </customHeaders>
  </httpProtocol>
Nikki
fonte
se eu quiser abrir o stackoverflow, onde posso encontrar a configuração da web? não é para o lado do servidor?
irum zahra 11/07/19
-1

Você não pode realmente adicionar o x-iframe ao seu corpo HTML, pois ele deve ser fornecido pelo proprietário do site e está dentro das regras do servidor.

O que você provavelmente pode fazer é criar um arquivo PHP que carrega o conteúdo da URL de destino e, se for o nome da URL, deve funcionar sem problemas.

Sushant Chaudhari
fonte
1
"Você provavelmente pode" então publicá-lo como um comentário, se não for uma resposta #
MK
E se ele sair para ser uma resposta MK
Sushant Chaudhari
Então é uma sugestão que funcionou, não uma solução específica, por isso deve ser colocada como um comentário #
MK8
-2

você pode fazê-lo no arquivo de configuração no nível da instância do tomcat (web.xml) e adicionar o 'filtro' e o mapeamento do filtro 'no arquivo de configuração web.xml. isso adicionará [X-frame-options = DENY] em toda a página, pois é uma configuração global.

<filter>
        <filter-name>httpHeaderSecurity</filter-name>
        <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
        <async-supported>true</async-supported>
        <init-param>
          <param-name>antiClickJackingEnabled</param-name>
          <param-value>true</param-value>
        </init-param>
        <init-param>
          <param-name>antiClickJackingOption</param-name>
          <param-value>DENY</param-value>
        </init-param>
    </filter>

  <filter-mapping> 
    <filter-name>httpHeaderSecurity</filter-name> 
    <url-pattern>/*</url-pattern>
</filter-mapping>
Rejji
fonte
-3

Se você estiver seguindo a abordagem xml, o código abaixo funcionará.

    <security:headers>
        <security:frame-options />
        <security:cache-control />
        <security:content-type-options />
        <security:xss-protection />
    </security:headers>
<security:http>
Bikash Pandit
fonte