Jak ustawić „X-Frame-Options” w iframe?

170

Jeśli utworzę iframetaki:

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

Jak mogę naprawić błąd:

Odmówił wyświetlenia 'https://www.google.com.ua/?gws_rd=ssl'w ramce, ponieważ ustawił „X-Frame-Options” na „SAMEORIGIN”.

z JavaScriptem?

Darien Fawkes
źródło

Odpowiedzi:

227

Nie możesz ustawić X-Frame-Optionsna iframe. To jest nagłówek odpowiedzi ustawiony przez domenę, z której żądasz zasobu ( google.com.uaw Twoim przykładzie). W SAMEORIGINtym przypadku ustawili nagłówek na , co oznacza, że ​​nie zezwolili na ładowanie zasobu iframespoza ich domeny. Aby uzyskać więcej informacji, zobacz nagłówek odpowiedzi X-Frame-Options na MDN.

Szybka inspekcja nagłówków (pokazanych tutaj w narzędziach programistycznych Chrome) ujawnia X-Frame-Optionswartość zwróconą przez hosta.

wprowadź opis obrazu tutaj

Drew Gaynor
źródło
7
W YouTube możesz zmienić adres URL punktu końcowego na wersję „osadzoną”. Zobacz stackoverflow.com/questions/25661182/ ... (Wiem, że nie jest to dokładnie to, czego szuka OP, ale Google podaje ten wynik jako pierwszy!)
73

X-Frame-Optionsjest nagłówkiem zawartym w odpowiedzi na żądanie, aby stwierdzić, czy żądana domena pozwoli się wyświetlić w ramce. Nie ma to nic wspólnego z javascript lub HTML i nie może zostać zmienione przez osobę, która wysłała żądanie.

Ta witryna ustawiła ten nagłówek, aby uniemożliwić wyświetlanie go w formacie iframe. Klient nie może nic zrobić, aby powstrzymać to zachowanie.

Dalsze czytanie na temat opcji X-Frame

Rory McCrossan
źródło
Jest ustawiony w nagłówku odpowiedzi, a nie w nagłówku żądania. Ale poza tym dokładne wyjaśnienie!
nickang,
2
@nickang to miałem na myśli, jednak zgadzam się, że terminologia nie była jasna. Zmodyfikowałem go, aby usunąć wszelkie nieporozumienia. Dzięki.
Rory McCrossan
31

Jeśli kontrolujesz serwer, który wysyła zawartość elementu iframe, możesz ustawić to ustawienie na X-Frame-Optionsswoim serwerze internetowym.

Konfigurowanie Apache

Aby wysłać nagłówek X-Frame-Options dla wszystkich stron, dodaj to do konfiguracji swojej witryny:

Header always append X-Frame-Options SAMEORIGIN

Konfigurowanie nginx

Aby skonfigurować nginx do wysyłania nagłówka X-Frame-Options, dodaj to do konfiguracji http, serwera lub lokalizacji:

add_header X-Frame-Options SAMEORIGIN;

Brak konfiguracji

Ta opcja nagłówka jest opcjonalna, więc jeśli opcja nie jest w ogóle ustawiona, dasz opcję skonfigurowania tego do następnej instancji (np. Przeglądarka odwiedzających lub proxy)

źródło: https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

rubo77
źródło
To mi pomogło. Komentuję te dwie linie: add_header Strict-Transport-Security "max-age=86400; includeSubdomains"; add_header X-Frame-Options DENY;z fragmentów nginx-snippetów, a potem od razu zadziałało.
Zeth
NGINX, ważne jest, aby powiedzieć, gdzie , w środku?
Peter Krauss
Peter Kraus, czego chcesz?
rubo77
14

Ponieważ rozwiązanie nie było tak naprawdę wspomniane po stronie serwera:

Trzeba ustawić takie rzeczy (przykład z apache), nie jest to najlepsza opcja, bo na wszystko pozwala, ale gdy zobaczysz, że serwer działa poprawnie, możesz łatwo zmienić ustawienia.

           Header set Access-Control-Allow-Origin "*"
           Header set X-Frame-Options "allow-from *"
Mike Q
źródło
5

nie bardzo ... użyłem

 <system.webServer>
     <httpProtocol allowKeepAlive="true" >
       <customHeaders>
         <add name="X-Frame-Options" value="*" />
       </customHeaders>
     </httpProtocol>
 </system.webServer>
LongChalk
źródło
To wygląda na rozwiązanie, ale czy jest to naruszenie bezpieczeństwa?
Yogurtu
1
To nie jest dobry pomysł, aby wyłączyć samej polityki pochodzenia na swojej stronie, chyba że dokładnie wiesz co robisz. Nie należy zezwalać domenom innym niż Twoja na umieszczanie treści. Zobacz codecademy.com/articles/what-is-cors i podobne samouczki.
slhck
5

a jeśli nic nie pomaga i nadal chcesz prezentować tę witrynę w ramce iframe, rozważ użycie komponentu X Frame Bypass Component, który będzie wykorzystywał proxy.

Tomer Ben David
źródło
2

X-Frame-Options HTTP nagłówek odpowiedzi może być używany do wskazania, czy dana przeglądarka powinna mieć prawo do renderowania strony w sposób <frame>, <iframe>lub<object> . Witryny mogą to wykorzystać, aby uniknąć ataków typu clickjacking, zapewniając, że ich zawartość nie jest osadzana w innych witrynach.

Po więcej informacji: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Mam alternatywne rozwiązanie tego problemu, które mam zamiar zademonstrować za pomocą 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
źródło
5
Czy jest to opłacalne rozwiązanie do korzystania ze strony po jej załadowaniu? Czy będę mógł wchodzić w interakcje ze stronami po ich pierwszym załadowaniu? Czy każde żądanie dotyczące domeny nie musiałoby być przekazywane przez serwer proxy, aby móc korzystać z treści po jej załadowaniu?
Timothy Gonzalez
0

W tym celu musisz dopasować lokalizację w swoim Apache lub jakiejkolwiek innej usłudze, z której korzystasz

Jeśli używasz apache, to w pliku 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
źródło
0

Rozwiązaniem jest instalacja wtyczki do przeglądarki.

Witryna internetowa, która wysyła nagłówek HTTP X-Frame-Optionso wartościDENYSAMEORIGIN wysyła (lub z innym pochodzeniem serwera) nie może być zintegrowana z ramką IFRAME ... chyba że zmienisz to zachowanie, instalując wtyczkę przeglądarki, która ignoruje X-Frame-Optionsnagłówek (np. Chrome's Ignore X-Frame Headers ).

Zauważ, że nie jest to zalecane ze względów bezpieczeństwa.

Julien Kronegg
źródło
0

możesz ustawić opcję x-frame-w konfiguracji internetowej witryny, którą chcesz załadować w ramce iframe, w ten sposób

<httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="*" />
    </customHeaders>
  </httpProtocol>
Nikki
źródło
jeśli chcę otworzyć stackoverflow, gdzie mogę znaleźć konfigurację internetową? czy to nie jest po stronie serwera?
irum zahra
-1

Nie możesz tak naprawdę dodać elementu x-iframe w treści HTML, ponieważ musi być dostarczony przez właściciela witryny i podlega regułom serwera.

To, co prawdopodobnie możesz zrobić, to utworzyć plik PHP, który ładuje zawartość docelowego adresu URL i ramkę iframe tego adresu URL php, powinno to działać płynnie.

Sushant Chaudhari
źródło
1
„Prawdopodobnie”, a następnie opublikuj jako komentarz, jeśli nie jest to odpowiedź
MK
A co jeśli okaże się odpowiedzią MK
Sushant Chaudhari
W takim razie jest to sugestia, która się sprawdziła, a nie konkretne rozwiązanie, więc należy to umieścić w komentarzu
MK
-2

możesz to zrobić w pliku konfiguracyjnym instancji Tomcat (web.xml), musisz dodać „filtr” i mapowanie filtrów ”w pliku konfiguracyjnym web.xml. spowoduje to dodanie [X-frame-options = DENY] na całej stronie, ponieważ jest to ustawienie globalne.

<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
źródło
-3

Jeśli stosujesz podejście XML, poniższy kod będzie działał.

    <security:headers>
        <security:frame-options />
        <security:cache-control />
        <security:content-type-options />
        <security:xss-protection />
    </security:headers>
<security:http>
Bikash Pandit
źródło