「X-Frame-Optionsによって禁止された表示」を克服する

私は小さなウェブページを書いています。その目的は、他のいくつかのページをフレーミングすることです。それらを単一のブラウザウィンドウに統合して、見やすくすることです。フレームを作成しようとしているページのいくつかは、フレーム化を禁止し、「X-Frame-Optionsによって表示が禁止されているため、ドキュメントの表示を拒否しました」をスローします。Chromeのエラー。これはセキュリティ上の制限であり（正当な理由による）、変更するためのアクセス権がないことを理解しています。

X-Frame-Optionsヘッダーによってつまずかない単一のウィンドウ内にページを表示するための代替のフレーミングまたは非フレーミングの方法はありますか？

同様の問題がありました。自分のサイトのコンテンツをiframeに（Colorboxのライトボックススタイルのダイアログとして）表示しようとしていて、サーバー全体に "X-Frame-Options SAMEORIGIN"ヘッダーがソースサーバーがテストサーバーへの読み込みを妨げています。

これはどこにも文書化されていないようですが、iframeしようとしているページを編集できる場合（たとえば、自分のページである場合）、すべての文字列を含む別のX-Frame-Optionsヘッダーを送信するだけで無効になりますSAMEORIGINまたはDENYコマンド。

例えば。PHPの場合、

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

ページの上部で、ブラウザは2つを結合し、その結果、

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マップをに埋め込もうとしたときにこのエラーが発生した場合は、ソースリンクiframeに追加&output=embedする必要があります。

UPDATE 2019：あなたができるバイパスX-Frame-Optionsで<iframe>使用するだけで、クライアント側のJavaScriptと私のX-フレームバイパス Webコンポーネント。ここにデモがあります：のハッカーニュースX-Frame-Bypass。（ChromeおよびFirefoxでテスト済み。）

追加

  target='_top'

Facebookタブの私のリンクに問題を修正しました...

そのヘッダーエントリをドロップするChromeのプラグインがあります（個人使用のみ）。

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

あなたは埋め込むVimeoのコンテンツにしようと、このエラーを取得している場合は、IFRAMEのSRCを変更

：からhttps://vimeo.com/63534746
へ：http://player.vimeo.com/video/63534746

私は、iframe内に埋め込むのmoodle 2を試したとき、私は、同じ問題を持っていたソリューションですSite administration ► Security ► HTTP securityチェックAllow frame embedding

これが解決策です!!

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

facebookアプリで機能した唯一のもの！

代わりにContent-Security-Policyヘッダーを使用すると、X-Frame-Options Allow-From https：// ...が廃止され、置き換えられた（そして無視された）ようです。

以下が完全なリファレンスです：https : //content-security-policy.com/

x-frameオプションが外部Webサイトで拒否するように設定されている場合でも、外部WebサイトをiFrameにロードするためのソリューション。

他のWebサイトをiFrameにロードしてDisplay forbidden by X-Frame-Options”エラーが発生した場合は、サーバー側のプロキシスクリプトを作成することで、これを実際に解決できます。

srciFrame の属性には、次のような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リクエストだからです。

注意：このスクリプトのセキュリティを向上させることができます。ハッカーがプロキシスクリプトを介してWebページの読み込みを開始する可能性があるためです。

私はほとんどすべての提案を試みました。ただし、問題を本当に解決したのは次の点のみです。

1. .htaccessPHPファイルと同じフォルダにを作成します。

2. 次の行をhtaccessに追加します。

   Header always unset X-Frame-Options

別のドメインからのiframeによるPHPの埋め込みは、後で機能するはずです。

さらに、PHPファイルの先頭に追加できます。

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

しかし、それは私の場合には必要ありませんでした。

mediawikiでも同じ問題がありました。これは、サーバーがセキュリティ上の理由からiframeへのページの埋め込みを拒否したためです。

私はそれを書いて解決しました

$wgEditPageFrameOptions = "SAMEORIGIN"; 

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はキャンバスアプリでいくつかの奇妙なことを行いますが、警告されました。あなたがまだここにいて、Facebook Canvasの背後に表示されるRailsアプリがある場合は、次のものが必要です。

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

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

出典

• 私が思う構成はomniauthの例から来ました。
• Gemファイル（これが重要です!!!）は次の場所から取得されました。
• このスタックの質問にはXframeの角度全体が含まれていたため、このヘッダーをアプリコントローラーに配置しないと、空白が表示されます。
• そして、私の男@rafmaganaがこのherokuガイドを書いた。これで、この答えと一緒に歩く巨人の肩をレールに採用できるようになった。

target = '_ parent'

Kevin Vellaのアイデアを使用して、PayPalのボタンジェネレーターによって作成されたフォーム要素にその属性を追加してみました。Paypalが新しいブラウザウィンドウ/タブで開かないように私のために働きました。

それがどれほど関連しているかはわかりませんが、これに対する回避策を作成しました。私のサイトでは、URLをロードするiframeを含むモーダルウィンドウにリンクを表示したいと思っていました。

私がしたことは、リンクのクリックイベントをこのJavaScript関数にリンクしたことです。これは、モーダルウィンドウ内にURLをロードするか、リダイレクトするかを決定する前に、X-FRAME-OptionsのURLヘッダーをチェックするPHPファイルに要求を行うだけです。

これが関数です：

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


?>

お役に立てれば。

ワードプレスのWebサイトを実行しているときにこの問題に遭遇しました。私はそれを修正するためにあらゆる種類のことを試みましたが、最終的にはマスキング付きのDNS転送を使用していて、外部サイトへのリンクが適切にアドレス指定されていなかったことが原因であるかどうかはわかりませんでした。つまり、私のサイトがでホストされたのhttp：//123.456.789/index.htmlしかしで実行するようにマスクされたhttp://somewebSite.com/index.html。私がhttp：//123.456.789/index.htmlを入力したときブラウザと入力して同じリンクをクリックしても、JSコンソールでX-frame-originsの問題は発生しませんでしたが、 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を実行します。

そのようなプロキシを作成する方法を説明するもう1つの答えがあります。難しいことではありませんが、誰かが以前にこれをしなければならなかったと確信しています。どういうわけかそれを見つけるのは困難でした。

私は最終的にいくつかの情報源を見つけました：

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

^推奨。珍しい使い方が必要なら、彼のherokuアプリを使うだけでいいと思う。それ以外の場合は、自分のサーバーで自分で実行するためのコードです。限界が何であるかを確認してください。

whateverorigin.org

^ 2番目の選択肢ですが、かなり古いものです。おそらくPythonの新しい選択：https : //github.com/Eiledon/alloworigin

次に3番目の選択肢があります。

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-scripts allow-popups allow-forms"

ディレクトリ全体からX-Frame-Optionsを削除する場合は、.htaccessを編集します。

次の行を追加します：ヘッダーは常にX-Frame-Optionsの設定を解除します

[からのコンテンツ：「X-Frame-Optionsによって禁止された表示」を克服する