Mengatasi "Tampilan terlarang oleh X-Frame-Options"

420

Saya sedang menulis sebuah halaman web kecil yang tujuannya adalah untuk membingkai beberapa halaman lain, hanya untuk mengkonsolidasikannya ke dalam satu jendela browser untuk memudahkan penglihatan. Beberapa halaman yang saya coba buat bingkai dilarang dibingkai dan melemparkan "Menolak untuk menampilkan dokumen karena tampilan dilarang oleh X-Frame-Options." kesalahan di Chrome. Saya mengerti bahwa ini adalah batasan keamanan (untuk alasan yang baik), dan tidak memiliki akses untuk mengubahnya.

Apakah ada metode framing alternatif atau non-framing untuk menampilkan halaman dalam satu jendela yang tidak akan tersandung oleh header X-Frame-Options?

Garen Checkley
sumber
117
Jika itu adalah halaman Anda, maka hapus pembatas bingkai. Jika tidak, hormati keinginan penulis halaman dan JANGAN BINGKAI MEREKA.
Marc B
Jika Anda mendapatkan kesalahan ini untuk Aplikasi Facebook dan menggunakan panggilan AJAX, saya membaca di suatu tempat bahwa Facebook sangat suka menggunakan tag # untuk itu kontak ajax jadi cobalah mengubah tautan, bekerja untuk saya.
eric.itzhak
28
@MarcB Chrome dan Firefox secara etis membingkai situs web yang tidak dimiliki di chrome UI asli. Program-program ini juga memungkinkan kebijakan asal yang sama santai untuk pemiliknya, FWIW. Seperti yang dikatakan garen-checkly, "Saya sedang menulis sebuah halaman web kecil yang tujuannya adalah untuk membingkai beberapa halaman lain, hanya untuk mengkonsolidasikannya ke dalam satu jendela browser agar mudah dilihat." Itu pada dasarnya memperluas browser web dan akan sepenuhnya etis. Maksud yang disebutkan tidak berbeda dengan menulis skrip bash untuk membuka dan mengatur jendela peramban.
Samuel Danielson
1
Periksa Surfly . Itu dapat melakukan apa yang Anda butuhkan.
muodov
1
@ MarcB Itu tidak membantu. OP mungkin tidak peduli dengan keinginan penulis halaman.
flarn2006

Jawaban:

211

Saya memiliki masalah serupa, di mana saya mencoba untuk menampilkan konten dari situs kami sendiri dalam iframe (sebagai dialog gaya lightbox dengan Colorbox ), dan di mana kami memiliki header "X-Frame-Options SAMAORIGIN" pada server di server sumber mencegahnya memuat di server pengujian kami.

Tampaknya ini tidak didokumentasikan di mana pun, tetapi jika Anda dapat mengedit halaman yang ingin Anda buka iframe (mis., Itu adalah halaman Anda sendiri), cukup kirim tajuk X-Frame-Options lain dengan string apa saja di semua string nonaktifkan perintah SAMAORIGIN atau DENY.

misalnya. untuk PHP, menempatkan

<?php
    header('X-Frame-Options: GOFORIT'); 
?>

di bagian atas halaman Anda akan membuat browser menggabungkan keduanya, yang menghasilkan tajuk

X-Frame-Options SAMEORIGIN, GOFORIT

... dan memungkinkan Anda memuat halaman dalam iframe. Ini tampaknya berfungsi ketika perintah SAMAORIGIN awal ditetapkan pada tingkat server, dan Anda ingin menimpanya pada kasus halaman-demi-halaman.

Semua yang terbaik!

Sean
sumber
3
Saya memiliki bingkai di situs web. Di situs web saya, saya mengarahkan ulang ke Instagram untuk OAUTH. Sejak Instagram mengirim X-Frame-Options: SAMEORIGINtidak ada cara untuk melakukan ini di dalam bingkai. Anda harus menggunakan sembulan.
Steve Tauber
16
Dengan PHP, mungkin lebih baik menggunakan header_removefungsi baru , asalkan Anda memilikinya (> = 5.3.0).
kucing
11
Atau Anda dapat mengedit .htaccess jika Anda ingin menghapus X-Frame-Options dari seluruh direktori. Cukup tambahkan baris:Header always unset X-Frame-Options
Jay
4
@cawecoy: Ya, intinya adalah tidak valid. Itu bergantung pada browser mengabaikan header yang tidak valid dan 'gagal terbuka', yang merupakan perilaku yang tidak ditentukan dan cukup cerdik untuk diandalkan. GOFORIT(atau token acak sembarang acak lainnya) dengan sengaja melanggar tindakan pengamanan yang diterapkan oleh server; jika Anda memiliki kontrol server sendiri (yang harus Anda lakukan untuk layanan publik nyata) maka hal yang benar untuk dilakukan adalah hanya mengatur server untuk tidak mengatur header di tempat pertama.
bobince
31
Ini sepertinya tidak berfungsi lagi di Chrome. Nilai tidak valid menyebabkan nilai default ke DENY.
jamesfm
159

Jika Anda mendapatkan kesalahan ini untuk video YouTube, daripada menggunakan url lengkap gunakan url embed dari opsi bagikan. Akan terlihat sepertihttp://www.youtube.com/embed/eCfDxZxTBW4

Anda juga dapat mengganti watch?v=dengan embed/begitu http://www.youtube.com/watch?v=eCfDxZxTBW4menjadihttp://www.youtube.com/embed/eCfDxZxTBW4

Wil
sumber
14
Oh, kemajuan ... Saya berharap mereka hanya akan mengarahkan kita ke halaman sematan alih-alih menyebabkan kesalahan untuk dibuang, dan membuat saya menulis ulang skrip saya!
joeytwiddle
122

Jika Anda mendapatkan kesalahan ini saat mencoba menyematkan Google Map ke dalam iframe, Anda perlu menambahkan &output=embedke tautan sumber.

Q Studio
sumber
120
Itu hanya berlaku untuk menanamkan peta google di iframe, dan bukan "solusi" umum.
Benjamin Wohlwend
17
Saya perlu menyematkan peta google di lightbox, jadi "solusi" ini sempurna
yitwail
5
Jika Anda mencoba melakukan ini dengan maksud web Twitter, lupakan saja. Kehilangan sepanjang hari karena mencoba berbagai plugin lightbox hanya untuk mengetahui hal ini "Meskipun Anda dapat memberikan tautan ke maksud dalam IFRAME dan widget, halaman yang dihasilkan tidak dapat dimuat dalam IFRAME." Sumber: situs web Twitter.
Gubatron
6
Ini tidak berfungsi jika Anda mencoba memuat iframe src setelah sisa halaman dimuat bahkan jika Anda menambahkan&output=embed
pathfinder
1
@ pathfinder Ini bekerja untuk saya ketika saya mengalami masalah memuat iframe src setelah halaman dimuat
David Sykes
61

UPDATE 2019: Anda dapat memotong X-Frame-Optionsdengan <iframe>menggunakan JavaScript hanya sisi klien dan Komponen Web X-Frame-Bypass saya . Berikut ini demo: Berita Peretas dalam sebuahX-Frame-Bypass . (Diuji di Chrome & Firefox.)

niutech
sumber
3
Itu solusi yang menarik. Bekerja dengan baik di FF / Chrome / Opera tetapi tidak bekerja di IE / Edge. Adakah yang tahu sesuatu yang bisa?
Kolektor
7
Ini tidak berfungsi lagi. Ini memberi "Menolak untuk menampilkan ' news.ycombinator.com ' dalam bingkai karena mengatur 'X-Frame-Options' ke 'DENY'." seperti yang diharapkan
g.pickardou
2
@ g.pickardou Ini berfungsi untuk saya di Google Chrome 46, saya bisa melihat Hacker News di iframe.
niutech
1
@niutech biola itu berfungsi setelah memuat ulang laman di Chrome 64, tetapi pertama kali saya memuat laman itu tidak berfungsi. (Coba dalam mode penyamaran.)
Carl Walsh
1
Terima kasih, ini luar biasa!
Andrew Gans
23

Menambahkan a

  target='_top'

ke tautan saya di tab facebook memperbaiki masalah untuk saya ...

Kevin Vella
sumber
1
Saya memiliki masalah yang sama dengan iframe Paypal yang terkandung dalam iframe lain. Berhasil sekarang! Terima kasih
Fabrizio Fortino
4
Saya juga menambahkan target = '_ top', tetapi masalah dengan solusi ini adalah, tautannya sekarang terbuka di luar iframe di tab baru tanpa kanvas facebook.
sumitkanoje
13

Saya memiliki masalah yang sama ketika saya mencoba menanamkan moodle 2 di iframe, solusinya Site administration ► Security ► HTTP securitydan periksaAllow frame embedding

Mohammad Ali Akbari
sumber
dilakukan dengan baik untuk metode moodle, karena metode lain gagal / ditimpa.
ericosg
7

Ini solusinya kawan !!

FB.Event.subscribe('edge.create', function(response) {
    window.top.location.href = 'url';
});

Satu-satunya hal yang berfungsi untuk aplikasi facebook!

Konst
sumber
6

Tampaknya X-Frame-Options Allow-From https: // ... disusutkan dan diganti (dan diabaikan) jika Anda menggunakan tajuk Kebijakan-Keamanan-Konten .

Berikut ini adalah referensi lengkapnya: https://content-security-policy.com/

Aaron Dishno
sumber
6

Solusi untuk memuat situs web eksternal ke dalam iFrame walaupun sulit, opsi x-frame diatur untuk ditolak di situs web eksternal.

Jika Anda ingin memuat situs web lain ke dalam iFrame dan Anda mendapatkan Display forbidden by X-Frame-Options” kesalahan maka Anda sebenarnya dapat mengatasinya dengan membuat skrip proxy sisi server.

Itu src atribut dari iFrame bisa memiliki url tampak seperti ini:/proxy.php?url=https://www.example.com/page&key=somekey

Maka proxy.php akan terlihat seperti:

if (isValidRequest()) {
   echo file_get_contents($_GET['url']);
}

function isValidRequest() {
    return $_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['key']) && 
    $_GET['key'] === 'somekey';
}

Ini dengan melewati blok, karena itu hanya permintaan GET yang mungkin juga merupakan kunjungan halaman browser biasa.

Berhati-hatilah: Anda mungkin ingin meningkatkan keamanan dalam skrip ini. Karena peretas dapat mulai memuat di laman web melalui skrip proxy Anda.

Floris
sumber
Saya melakukan ini beberapa minggu yang lalu dan setiap URL relatif yang digunakan di halaman eksternal tidak berfungsi saat menggunakan gema. (Biasanya CSS dan / atau JS, jadi Anda mungkin tidak mendapatkan fungsionalitas penuh kecuali Anda memodifikasi URL sebelum menggemakan.) Kecuali saya telah melewatkan sesuatu ...,
ultrageek
Tidak yakin mengapa ini terjadi untuk Anda ... Itu harus berfungsi seperti permintaan HTTP normal, seperti yang dilakukan pengguna akhir saat mengunjungi URL. Jadi, hasil dari get_file_contents () harus berupa halaman HTML yang benar-benar berfungsi.
Floris
5

Saya mencoba hampir semua saran. Namun, satu-satunya hal yang benar-benar menyelesaikan masalah adalah:

  1. Buat .htaccessdi dalam folder yang sama di mana file PHP Anda berada.

  2. Tambahkan baris ini ke htaccess:

    Header always unset X-Frame-Options

Menyematkan PHP dengan iframe dari domain lain akan berfungsi setelahnya.

Selain itu Anda dapat menambahkan di awal file PHP Anda:

header('X-Frame-Options: ALLOW');

Namun, yang tidak perlu dalam kasus saya.

Kai Noack
sumber
Header selalu menghapus X-Frame-Options di htaccess melakukan trik untuk saya
ujwal dhakal
4

Saya memiliki masalah yang sama dengan mediawiki, ini karena server menolak menanamkan halaman ke iframe untuk alasan keamanan.

Saya menyelesaikannya menulis

$wgEditPageFrameOptions = "SAMEORIGIN"; 

ke dalam file konfigurasi php mediawiki.

Semoga ini bisa membantu.

John White
sumber
3

FWIW:

Kami memiliki situasi di mana kami harus membunuh kami iFrameketika kode "breaker" ini muncul. Jadi, saya menggunakan PHP function get_headers($url);untuk memeriksa URL jarak jauh sebelum menampilkannya di iFrame. Untuk kinerja yang lebih baik, saya menyalin hasil ke file jadi saya tidak membuat koneksi HTTP setiap kali.

Zane Claes
sumber
3

Saya menggunakan Tomcat 8.0.30, tidak ada saran yang bekerja untuk saya. Saat kami ingin memperbarui X-Frame-Optionsdan mengaturnya ALLOW, berikut adalah cara saya mengonfigurasi untuk mengizinkan iframe embed:

  • Arahkan ke direktori conf Tomcat, edit file web.xml
  • Tambahkan filter di bawah ini:
<filter>
            <filter-name>httpHeaderSecurity</filter-name>
            <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
                   <init-param>
                           <param-name>hstsEnabled</param-name>
                           <param-value>true</param-value>
                   </init-param>
                   <init-param>
                           <param-name>antiClickJackingEnabled</param-name>
                           <param-value>true</param-value>
                   </init-param>
                   <init-param>
                           <param-name>antiClickJackingOption</param-name>
                           <param-value>ALLOW-FROM</param-value>
                   </init-param>
            <async-supported>true</async-supported>
       </filter>

       <filter-mapping>
                   <filter-name>httpHeaderSecurity</filter-name>
                   <url-pattern>/*</url-pattern>
                   <dispatcher>REQUEST</dispatcher>
       </filter-mapping> 
  • Mulai kembali layanan Tomcat
  • Akses sumber daya menggunakan iFrame.
Giri
sumber
2

Satu-satunya pertanyaan yang memiliki banyak jawaban. SELAMAT DATANG di panduan ini saya berharap saya punya ketika saya berjuang untuk ini untuk membuatnya bekerja pada 10:30 malam pada hari batas waktu ... FB melakukan beberapa hal aneh dengan aplikasi kanvas, dan baik, Anda telah diperingatkan. Jika Anda masih di sini dan Anda memiliki aplikasi Rails yang akan muncul di balik Facebook Canvas, maka Anda perlu:

Gemfile:

gem "rack-facebook-signed-request", :git => 'git://github.com/cmer/rack-facebook-signed-request.git'

config / facebook.yml

facebook:
  key: "123123123123"
  secret: "123123123123123123secret12312"

config / application.rb

config.middleware.use Rack::Facebook::SignedRequest, app_id: "123123123123", secret: "123123123123123123secret12312", inject_facebook: false

config / initializers / omniauth.rb

OmniAuth.config.logger = Rails.logger
SERVICES = YAML.load(File.open("#{::Rails.root}/config/oauth.yml").read)
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, SERVICES['facebook']['key'], SERVICES['facebook']['secret'], iframe:   true
end

application_controller.rb

before_filter :add_xframe
def add_xframe
  headers['X-Frame-Options'] = 'GOFORIT'
end

Anda memerlukan pengontrol untuk menelepon dari pengaturan kanvas Facebook, saya menggunakan /canvas/dan membuat rute menjadi utama SiteControlleruntuk aplikasi ini:


class SiteController < ApplicationController
  def index
    @user = User.new
  end
  def canvas
    redirect_to '/auth/failure' if request.params['error'] == 'access_denied'
    url = params['code'] ? "/auth/facebook?signed_request=#{params['signed_request']}&state=canvas" : "/login"
    redirect_to url
  end
  def login
  end
end

login.html.erb


<% content_for :javascript do %>
  var oauth_url = 'https://www.facebook.com/dialog/oauth/';
  oauth_url += '?client_id=471466299609256';
  oauth_url += '&redirect_uri=' + encodeURIComponent('https://apps.facebook.com/wellbeingtracker/');
  oauth_url += '&scope=email,status_update,publish_stream';
console.log(oauth_url);
  top.location.href = oauth_url;
<% end %>

Sumber

  • Konfigurasi yang saya pikir berasal dari contoh omniauth.
  • File permata (yang merupakan kunci !!!) berasal dari: slideshare hal yang saya pelajari ...
  • Pertanyaan tumpukan ini memiliki seluruh sudut Xframe, jadi Anda akan mendapatkan ruang kosong, jika Anda tidak meletakkan header ini di pengontrol aplikasi.
  • Dan teman saya @rafmagana menulis panduan heroku ini , yang sekarang bisa Anda adopsi untuk rel dengan jawaban ini dan bahu raksasa di mana Anda berjalan.
pamammer
sumber
2

target = '_ parent'

Menggunakan ide Kevin Vella, saya mencoba menambahkan atribut itu untuk membentuk elemen yang dibuat oleh generator tombol PayPal. Berfungsi untuk saya sehingga Paypal tidak terbuka di jendela / tab browser baru.

Jiminikiz
sumber
Sayangnya ini sepertinya tidak bekerja untuk safari juga.
Wtower
1

Saya tidak yakin seberapa relevan itu, tetapi saya membangun solusi untuk ini. Di situs saya, saya ingin menampilkan tautan di jendela modal yang berisi iframe yang memuat URL.

Apa yang saya lakukan adalah, saya menautkan acara klik tautan ke fungsi javascript ini. Semua ini dilakukan adalah membuat permintaan ke file PHP yang memeriksa header URL untuk X-FRAME-Options sebelum memutuskan apakah akan memuat URL dalam jendela modal atau untuk mengarahkan ulang.

Inilah fungsinya:

  function opentheater(link, title){
        $.get( "url_origin_helper.php?url="+encodeURIComponent(link), function( data ) {
  if(data == "ya"){
      $(".modal-title").html("<h3 style='color:480060;'>"+title+"&nbsp;&nbsp;&nbsp;<small>"+link+"</small></h3>");
        $("#linkcontent").attr("src", link);
        $("#myModal").modal("show");
  }
  else{
      window.location.href = link;
      //alert(data);
  }
});


        }

Berikut kode file PHP yang memeriksanya:

<?php
$url = rawurldecode($_REQUEST['url']);
$header = get_headers($url, 1);
if(array_key_exists("X-Frame-Options", $header)){
    echo "nein";
}
else{
    echo "ya";
}


?>

Semoga ini membantu.

swatkat7
sumber
1

Saya menemukan masalah ini ketika menjalankan situs web wordpress. Saya mencoba segala macam hal untuk memperbaikinya dan tidak yakin bagaimana, pada akhirnya masalahnya adalah karena saya menggunakan penerusan DNS dengan masking, dan tautan ke situs eksternal tidak ditangani dengan baik. yaitu situs saya di-host di http: //123.456.789/index.html tetapi ditutup untuk dijalankan di http://somewebSite.com/index.html . Ketika saya memasukkan http: //123.456.789/index.html di browser mengklik tautan yang sama menghasilkan tidak ada masalah X-frame-asal di konsol JS, tetapi menjalankan http://somewebSite.com/index.htmlmelakukan. Untuk menutupi dengan benar Anda harus menambahkan server nama DNS host Anda ke layanan domain Anda, yaitu godaddy.com harus memiliki server nama misalnya, ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com, jika Anda menggunakan digitalocean.com sebagai layanan hosting Anda.

kinghenry14
sumber
1
Saya akhirnya melakukan: remove_action( 'admin_init', 'send_frame_options_header',10);untuk mem-bypass masalah ini ...
Majick
1

Mengejutkan bahwa tidak ada seorang pun di sini yang pernah menyebut Apachepengaturan server ( *.conffile) atau .htaccessfile itu sendiri sebagai penyebab kesalahan ini. Cari melalui file konfigurasi .htaccessatau Anda Apache, pastikan Anda tidak memiliki set berikut ini untuk DENY:

Header always set X-Frame-Options DENY

Mengubahnya menjadi SAMEORIGIN, membuat hal-hal berfungsi seperti yang diharapkan:

Header always set X-Frame-Options SAMEORIGIN

Ilia Rostovtsev
sumber
itu disebutkan sebelumnya - lihat komentar dari @Jay pada jawaban stackoverflow.com/a/6767901/1875965
Sandra
Saya mengkonfigurasi .conf file Header selalu mengatur X-Frame-Options SAMAORIGIN!
GeekHades
Tapi bagaimana ini relevan dengan pertanyaan di sini, di mana header berasal dari server asing , langsung ke klien , TKI server Anda sendiri bahkan tidak terlibat? Apakah saya melewatkan sesuatu?
Sz.
1

Satu-satunya jawaban nyata, jika Anda tidak mengontrol tajuk pada sumber yang Anda inginkan di iframe Anda, adalah dengan mem-proxy-nya. Minta server bertindak sebagai klien, terima sumbernya, hapus header yang bermasalah, tambahkan CORS jika perlu, lalu ping server Anda sendiri.

Ada satu jawaban lain yang menjelaskan cara menulis proxy semacam itu. Itu tidak sulit, tetapi saya yakin seseorang harus melakukan ini sebelumnya. Sulit menemukannya, karena suatu alasan.

Saya akhirnya menemukan beberapa sumber:

https://github.com/Rob--W/cors-anywhere/#documentation

^ disukai. Jika Anda membutuhkan penggunaan yang langka, saya pikir Anda bisa menggunakan aplikasi heroku-nya. Kalau tidak, itu kode untuk menjalankannya sendiri di server Anda sendiri. Perhatikan dengan pasti apa batasannya.

whateverorigin.org

^ pilihan kedua, tetapi cukup tua. seharusnya pilihan yang lebih baru dengan python: https://github.com/Eiledon/alloworigin

lalu ada pilihan ketiga:

http://anyorigin.com/

Yang tampaknya memungkinkan penggunaan gratis sedikit, tetapi akan menempatkan Anda pada daftar rasa malu publik jika Anda tidak membayar dan menggunakan sejumlah yang tidak ditentukan, yang hanya dapat Anda hapus jika Anda membayar biaya ...

Kyle Baker
sumber
0

Tidak disebutkan tetapi dapat membantu dalam beberapa kasus:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState !== 4) return;
    if (xhr.status === 200) {
        var doc = iframe.contentWindow.document;
        doc.open();
        doc.write(xhr.responseText);
        doc.close();
    }
}
xhr.open('GET', url, true);
xhr.send(null);
mattdlockyer
sumber
0

Gunakan baris yang diberikan di bawah ini sebagai ganti header()fungsi.

echo "<script>window.top.location = 'https://apps.facebook.com/yourappnamespace/';</script>";
Hemanta Nandi
sumber
0

Saya punya masalah ini, dan mengatasinya dengan mengedit httd.conf

<IfModule headers_module>
    <IfVersion >= 2.4.7 >
        Header always setifempty X-Frame-Options GOFORIT
    </IfVersion>
    <IfVersion < 2.4.7 >
        Header always merge X-Frame-Options GOFORIT
    </IfVersion>
</IfModule>

Saya mengubah SAMAORIGIN menjadi GOFORIT dan memulai kembali server

Arthur Tsidkilov
sumber
-1

Cobalah hal ini, saya rasa tidak ada orang yang menyarankan hal ini dalam Topik, ini akan menyelesaikan seperti 70% dari masalah Anda, untuk beberapa halaman lain, Anda harus memo, saya punya solusi lengkap tetapi tidak untuk umum,

Tambahkan di bawah ini ke iframe Anda

sandbox = "allow-same-origin allow-scripts allow-popups allow-form"

Zulqurnain abbas
sumber
1
sandboxing mengurangi hak istimewa, itu tidak menambahkannya. lihat html5rocks.com/en/tutorials/security/sandboxed-iframes
Kyle Baker