การเอาชนะ“ แสดงผลต้องห้ามโดย X-Frame-Options”

ฉันกำลังเขียนเว็บเพจเล็ก ๆ ที่มีวัตถุประสงค์เพื่อวางกรอบหน้าอื่น ๆ เพียงไม่กี่หน้าเพื่อรวมไว้ในหน้าต่างเบราว์เซอร์เดียวเพื่อให้ดูง่ายขึ้น หน้าไม่กี่หน้าที่ฉันพยายามจะใส่เฟรมให้ถูกกรอบและโยน "ปฏิเสธที่จะแสดงเอกสารเพราะห้ามแสดงผลโดย X-Frame-Options" ข้อผิดพลาดใน Chrome ฉันเข้าใจว่านี่เป็นข้อ จำกัด ด้านความปลอดภัย (สำหรับเหตุผลที่ดี) และไม่สามารถเข้าถึงเพื่อเปลี่ยนแปลงได้

มีวิธีการกำหนดกรอบหรือไม่กำหนดกรอบวิธีอื่นในการแสดงหน้าภายในหน้าต่างเดียวที่จะไม่สะดุดโดยส่วนหัว X-Frame-Options หรือไม่?

ฉันมีปัญหาที่คล้ายกันซึ่งฉันพยายามแสดงเนื้อหาจากเว็บไซต์ของเราเองใน iframe (เป็นกล่องโต้ตอบแบบ lightbox พร้อมColorbox ) และที่เรามีส่วนหัว "X-Frame-Options SAMEORIGIN" บนเซิร์ฟเวอร์ เซิร์ฟเวอร์ต้นทางป้องกันไม่ให้โหลดบนเซิร์ฟเวอร์ทดสอบของเรา

สิ่งนี้ดูเหมือนจะไม่ถูกบันทึกไว้ที่ใดก็ได้ แต่หากคุณสามารถแก้ไขหน้าที่คุณพยายาม iframe (เช่นพวกเขาเป็นหน้าของคุณเอง) เพียงแค่ส่งส่วนหัว X-Frame-Options อื่นพร้อมสตริงใด ๆ ที่ปิดการใช้งานทั้งหมด คำสั่ง SAMEORIGIN หรือ DENY

เช่น. สำหรับ PHP วาง

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

ที่ด้านบนของหน้าจะทำให้เบราว์เซอร์รวมสองเบราว์เซอร์ซึ่งทำให้ส่วนหัวของ

X-Frame-Options SAMEORIGIN, GOFORIT

... และอนุญาตให้คุณโหลดหน้าเว็บใน iframe สิ่งนี้ดูเหมือนว่าจะทำงานได้เมื่อคำสั่ง SAMEORIGIN เริ่มต้นถูกตั้งค่าที่ระดับเซิร์ฟเวอร์และคุณต้องการแทนที่ในกรณีแบบหน้าต่อหน้า

ดีที่สุด!

หากคุณได้รับข้อผิดพลาดนี้สำหรับวิดีโอ YouTube แทนที่จะใช้ URL แบบเต็มให้ใช้ URL แบบฝังจากตัวเลือกการแชร์ มันจะมีลักษณะhttp://www.youtube.com/embed/eCfDxZxTBW4

นอกจากนี้คุณยังสามารถแทนที่watch?v=ด้วยembed/ดังนั้นhttp://www.youtube.com/watch?v=eCfDxZxTBW4กลายเป็นhttp://www.youtube.com/embed/eCfDxZxTBW4

หากคุณได้รับข้อผิดพลาดนี้ในขณะที่พยายามฝัง Google Map ไว้ในระบบiframeคุณจะต้องเพิ่ม&output=embedไปยังลิงก์ต้นทาง

ปรับปรุง 2019:คุณสามารถเลี่ยงผ่านX-Frame-Optionsการ<iframe>ใช้ JavaScript ฝั่งไคลเอ็นต์และX-Frame-Bypass Web Component ของฉัน นี่คือการสาธิต: ข่าว Hacker X-Frame-Bypassใน (ทดสอบใน Chrome & Firefox)

กำลังเพิ่ม

  target='_top'

ไปที่ลิงก์ของฉันในแท็บ facebook แก้ไขปัญหาสำหรับฉัน ...

มีปลั๊กอินสำหรับ Chrome ที่จะปล่อยรายการส่วนหัวนั้น (สำหรับใช้ส่วนตัวเท่านั้น):

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe/reviews

หากคุณได้รับข้อผิดพลาดนี้พยายามฝังเนื้อหา Vimeo ให้เปลี่ยน src ของ iframe

จาก: https://vimeo.com/63534746
เป็น: http://player.vimeo.com/video/63534746

ฉันมีปัญหาเดียวกันเมื่อฉันพยายามฝัง moodle 2 ใน iframe วิธีแก้ปัญหาคือSite administration ► Security ► HTTP securityและตรวจสอบAllow frame embedding

นี่คือวิธีการแก้ปัญหา !!

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

สิ่งเดียวที่ใช้ได้กับแอพ facebook!

ดูเหมือนว่าX-Frame-Options Allow-from https: // ...จะถูกคิดค่าเสื่อมราคาและถูกแทนที่ (และถูกเพิกเฉย) หากคุณใช้Content-Security-Policyส่วนหัวของแทน

นี่คือการอ้างอิงแบบเต็ม: https://content-security-policy.com/

โซลูชันสำหรับการโหลดเว็บไซต์ภายนอกเข้าสู่ iFrame แม้ตัวเลือก x-frame ที่ยากจะกำหนดให้ปฏิเสธในเว็บไซต์ภายนอก

หากคุณต้องการโหลดเว็บไซต์อื่นลงใน iFrame และคุณจะได้รับ Display forbidden by X-Frame-Options”ข้อผิดพลาดคุณสามารถเอาชนะมันได้โดยสร้างสคริปต์พร็อกซีฝั่งเซิร์ฟเวอร์

srcแอตทริบิวต์ของ iFrame อาจมี URL มองเช่นนี้/proxy.php?url=https://www.example.com/page&key=somekey

จากนั้น proxy.php จะมีลักษณะดังนี้:

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

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

สิ่งนี้โดยผ่านบล็อกเพราะมันเป็นเพียงคำขอ GET ที่อาจเป็นเวลที่ได้รับการเยี่ยมชมหน้าเบราว์เซอร์ธรรมดา

ระวัง: คุณอาจต้องการปรับปรุงความปลอดภัยในสคริปต์นี้ เพราะแฮกเกอร์สามารถเริ่มโหลดในหน้าเว็บผ่านสคริปต์พร็อกซีของคุณ

ฉันพยายามแนะนำเกือบทั้งหมด อย่างไรก็ตามสิ่งเดียวที่แก้ไขปัญหาได้จริงคือ:

1. สร้าง.htaccessในโฟลเดอร์เดียวกับที่ไฟล์ PHP ของคุณอยู่

2. เพิ่มบรรทัดนี้ใน htaccess:

   Header always unset X-Frame-Options

การฝัง PHP ด้วย iframe จากโดเมนอื่นควรใช้งานได้ในภายหลัง

นอกจากนี้คุณสามารถเพิ่มในตอนต้นของไฟล์ PHP ของคุณ:

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

ซึ่งเป็นสิ่งที่ไม่จำเป็นในกรณีของฉัน

ฉันมีปัญหาเดียวกันกับ mediawiki นี่เป็นเพราะเซิร์ฟเวอร์ปฏิเสธการฝังหน้าลงใน iframe ด้วยเหตุผลด้านความปลอดภัย

ฉันแก้ไขมันเขียน

$wgEditPageFrameOptions = "SAMEORIGIN"; 

ลงในไฟล์ config ของ mediawiki php

หวังว่ามันจะช่วย

FWIW:

เรามีสถานการณ์ที่เราต้องฆ่าiFrameเมื่อรหัส "เบรกเกอร์" ปรากฏขึ้น ดังนั้นฉันจึงใช้ภาษา PHP function get_headers($url);ในการตรวจสอบ URL iFrameที่ระยะไกลก่อนที่จะแสดงไว้ใน เพื่อประสิทธิภาพที่ดีขึ้นฉันแคชผลลัพธ์ไปยังไฟล์ดังนั้นฉันจึงไม่ได้ทำการเชื่อมต่อ HTTP ทุกครั้ง

ฉันใช้ Tomcat 8.0.30 ไม่มีข้อเสนอแนะใดที่เหมาะกับฉัน ในขณะที่เรากำลังมองหาที่จะอัปเดตX-Frame-Optionsและตั้งค่าเป็นALLOWนี่คือวิธีที่ฉันกำหนดค่าให้อนุญาตการฝัง iframe:

• นำทางไปยังไดเรกทอรี Tomcat conf แก้ไขไฟล์ web.xml
• เพิ่มตัวกรองด้านล่าง:

<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> 

• เริ่มบริการ Tomcat ใหม่
• เข้าถึงทรัพยากรโดยใช้ iFrame

คำถามเดียวที่มีคำตอบมากมาย เราขอแนะนำที่ฉันหวังว่าฉันจะได้เมื่อฉันกำลังดิ้นรนเพื่อให้มันทำงานเวลา 10:30 น. ในเวลากลางคืนในวันที่กำหนด ... FB ทำสิ่งแปลก ๆ ด้วยแอพผ้าใบและคุณได้รับคำเตือน หากคุณยังอยู่ที่นี่และคุณมีแอพ Rails ที่จะปรากฏอยู่ด้านหลัง Facebook Canvas คุณจะต้อง:

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

คุณต้องใช้คอนโทรลเลอร์ในการโทรจากการตั้งค่า Canvas ของ Facebook ฉันใช้/canvas/และทำให้เส้นทางเป็นหลักSiteControllerสำหรับแอพนี้:

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 %>

แหล่งที่มา

• config ที่ฉันคิดว่ามาจากตัวอย่างของ omniauth
• ไฟล์อัญมณี (ซึ่งเป็นกุญแจสำคัญ !!!) มาจาก: สไลด์โชว์สิ่งที่ฉันเรียนรู้ ...
• คำถามสแต็กนี้มีมุม Xframe ทั้งหมดดังนั้นคุณจะได้พื้นที่ว่างถ้าคุณไม่ใส่ส่วนหัวนี้ในแอปคอนโทรลเลอร์
• และ @rafmagana คนของฉันเขียนคำแนะนำ herokuซึ่งตอนนี้คุณสามารถรับรางได้ด้วยคำตอบนี้และไหล่ของยักษ์ใหญ่ที่คุณเดินไปด้วย

target = '_ ผู้ปกครอง

ด้วยความคิดของ Kevin Vella ฉันพยายามเพิ่มแอตทริบิวต์นั้นเพื่อสร้างองค์ประกอบที่สร้างโดยตัวสร้างปุ่มของ PayPal ทำงานให้ฉันเพื่อไม่ให้ Paypal เปิดในหน้าต่าง / แท็บเบราว์เซอร์ใหม่

ฉันไม่แน่ใจว่ามันมีความเกี่ยวข้องเพียงใด แต่ฉันได้สร้างสิ่งนี้ขึ้นมา ในเว็บไซต์ของฉันฉันต้องการแสดงลิงค์ในหน้าต่างโมดัลที่มี iframe ซึ่งโหลด URL

สิ่งที่ฉันทำคือฉันเชื่อมโยงเหตุการณ์คลิกของลิงก์ไปยังฟังก์ชันจาวาสคริปต์นี้ สิ่งทั้งหมดนี้เป็นการร้องขอไปยังไฟล์ PHP ที่ตรวจสอบส่วนหัว URL สำหรับ X-FRAME-Options ก่อนตัดสินใจว่าจะโหลด URL ภายในหน้าต่างโมดัลหรือเปลี่ยนเส้นทาง

นี่คือฟังก์ชั่น:

  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);
  }
});


        }

นี่คือรหัสไฟล์ PHP ที่ตรวจสอบ:

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


?>

หวังว่านี่จะช่วยได้

ฉันเจอปัญหานี้เมื่อใช้งานเว็บไซต์เวิร์ดเพรส ฉันลองทุกสิ่งเพื่อแก้ไขและไม่แน่ใจว่าท้ายที่สุดปัญหาคือเพราะฉันใช้การส่งต่อ DNS ด้วยการปิดบังและลิงก์ไปยังไซต์ภายนอกไม่ได้รับการแก้ไขอย่างถูกต้อง เช่นเว็บไซต์ของฉันเป็นเจ้าภาพที่http: //123.456.789/index.htmlแต่ถูกหลอกลวงเพื่อให้ทำงานที่http://somewebSite.com/index.html เมื่อฉันป้อนhttp: //123.456.789/index.htmlในเบราว์เซอร์ที่คลิกที่ลิงก์เดียวกันทำให้ไม่มีปัญหา X-frame-origins ในคอนโซล JS แต่ใช้งานhttp://somewebSite.com/index.htmlเคยทำ. ในการปิดบังอย่างถูกต้องคุณต้องเพิ่มเซิร์ฟเวอร์ชื่อโฮสต์ของ DNS ของคุณในบริการโดเมนของคุณเช่น godaddy.com ควรมีเซิร์ฟเวอร์ชื่อตัวอย่างเช่น ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com ถ้าคุณเป็น ใช้ digitalocean.com เป็นบริการโฮสติ้งของคุณ

เป็นเรื่องน่าแปลกใจที่ไม่มีใครพูดถึงApacheการตั้งค่าเซิร์ฟเวอร์ ( *.confไฟล์) หรือ.htaccessไฟล์ของตัวเองว่าเป็นสาเหตุของข้อผิดพลาดนี้ ค้นหาไฟล์.htaccessหรือApacheไฟล์กำหนดค่าของคุณตรวจสอบให้แน่ใจว่าคุณไม่ได้ตั้งค่าต่อไปนี้เป็นDENY:

Header always set X-Frame-Options DENY

เปลี่ยนเป็นSAMEORIGINทำให้งานเป็นไปตามที่คาดไว้:

Header always set X-Frame-Options SAMEORIGIN

คำตอบที่แท้จริงเพียงข้อเดียวหากคุณไม่ได้ควบคุมส่วนหัวของแหล่งที่มาที่คุณต้องการใน iframe ของคุณคือการใช้พร็อกซี ให้เซิร์ฟเวอร์ทำหน้าที่เป็นไคลเอนต์รับแหล่งดึงส่วนหัวที่มีปัญหาเพิ่ม CORS หากจำเป็นแล้วทำการ ping เซิร์ฟเวอร์ของคุณเอง

มีคำตอบอีกข้อหนึ่งอธิบายวิธีเขียนพร็อกซีดังกล่าว มันไม่ใช่เรื่องยาก แต่ฉันมั่นใจว่าต้องมีคนทำเช่นนี้มาก่อน มันเป็นเรื่องยากที่จะหามันด้วยเหตุผลบางอย่าง

ในที่สุดฉันก็ได้พบแหล่งข้อมูลบางอย่าง:

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

เป็นที่ต้องการ ^ หากคุณต้องการการใช้งานที่หายากฉันคิดว่าคุณสามารถใช้แอพ heroku ของเขาได้ มิฉะนั้นมันเป็นรหัสที่จะรันด้วยตัวเองบนเซิร์ฟเวอร์ของคุณเอง โปรดทราบว่าขีด จำกัด คืออะไร

whateverorigin.org

ตัวเลือกที่สอง ^ แต่ค่อนข้างเก่า ทางเลือกที่ใหม่กว่าที่คาดคะเนใน python: https://github.com/Eiledon/alloworigin

จากนั้นมีตัวเลือกที่สาม:

http://anyorigin.com/

ซึ่งดูเหมือนว่าจะอนุญาตให้ใช้งานฟรีเพียงเล็กน้อย แต่จะทำให้คุณอยู่ในรายชื่ออัปยศสาธารณะถ้าคุณไม่จ่ายเงินและใช้จำนวนเงินที่ไม่ระบุซึ่งคุณสามารถลบออกได้เฉพาะเมื่อคุณชำระค่าธรรมเนียม ...

ไม่ได้กล่าวถึง แต่สามารถช่วยได้ในบางกรณี:

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);

ใช้บรรทัดนี้ด้านล่างแทนheader()ฟังก์ชั่น

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

ฉันมีปัญหานี้และแก้ไขการแก้ไข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>

ฉันเปลี่ยน SAMEORIGIN เป็น GOFORIT และรีสตาร์ทเซิร์ฟเวอร์

ลองสิ่งนี้ฉันไม่คิดว่ามีใครแนะนำสิ่งนี้ในหัวข้อซึ่งจะแก้ปัญหาของคุณได้ 70% สำหรับหน้าอื่น ๆ คุณต้องทำให้เสียฉันมีวิธีแก้ปัญหาอย่างสมบูรณ์ แต่ไม่ใช่เพื่อสาธารณะ

เพิ่มด้านล่างเพื่อ iframe ของคุณ

sandbox = "allow-same-origin allow-สคริปต์ allow-popups allow-forms"

แก้ไข. htaccess หากคุณต้องการลบ X-Frame-Options จากไดเรกทอรีทั้งหมด

และเพิ่มบรรทัด: ส่วนหัวจะยกเลิกการตั้งค่า X-Frame-Options เสมอ

[เนื้อหาจาก: การเอาชนะ "Display forbidden โดย X-Frame-Options"