web-dev-qa-db-ja.com

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

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

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

iframeframesx-frame-options
403
Garen Checkley

私は自分のサイトからのコンテンツを（ Colorbox を使ったライトボックススタイルのダイアログとして）iframeに表示しようとしていたところ、そしてサーバーワイドなX-Frame-Options SAMEORIGINを持っていたところと同様の問題がありました。 msgstr ""ソースサーバのヘッダがテストサーバにロードされるのを防ぎます。

これはどこにも文書化されていないようですが、もしあなたがiframeしようとしているページを編集することができれば（例えば、それらはあなた自身のページです）、単純に別のX-Frame-Optionsヘッダを送るSAMEORIGINまたはDENYコマンド.

例えば。 PHPの場合は、

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

あなたのページの一番上にあると、ブラウザは二つを結合するでしょう。

X-Frame-Options SAMEORIGIN, GOFORIT

...そしてiframeでページをロードすることができます。これは最初のSAMEORIGINコマンドがサーバレベルで設定されていたときにうまくいくようで、ページごとに上書きしたいと思います。

ではごきげんよう！

206
Sean

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にすることもできます

158
Wil

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

122
Q Studio

UPDATE 2019：You canクライアントサイドJavaScriptとmy X-Frame-Bypass Webコンポーネントを使ってX-Frame-Options内で<iframe>を迂回することができます。デモは以下のとおりです。 ハッカーニュース（X-Frame-Bypass （Chrome＆Firefoxでテスト済み）

51
niutech

を追加

  target='_top'

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

22
Kevin Vella

Chrome用のプラグインがあり、そのヘッダエントリを削除します（個人使用のみ）。

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

20
user669677

Vimeoのコンテンツを埋め込もうとしてこのエラーが発生した場合は、iframeのsrcを変更してください。

差出人： https://vimeo.com/63534746
： http://player.vimeo.com/video/63534746

19
Eric Corriel

私は、iframeにmoodle 2を埋め込んでみたときに同じ問題がありました。解決策はSite administration ► Security ► HTTP securityであり、Allow frame embeddingをチェックしてください

13
Mohammad Ali Akbari

これは解決策みんなです！

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

Facebookのアプリのために働いた唯一のもの！

7
Konst

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

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

IFrameのsrc属性は、次のような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ページにロードを開始する可能性があるため。

5
Floris

私はほとんど全ての提案を試みました。しかし、この問題を本当に解決した唯一のことは、

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

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

    Header always unset X-Frame-Options

他のドメインからのiframeでPHPを埋め込むことは、後でうまくいくはずです。

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

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

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

5
Kai Noack

X-Frame-OptionsのAllow-From https：// ... は、代わりに Content-Security-Policy headerを使用すると推奨されなくなり、置き換えられます（無視されます）。 。

完全な参照はここにあります： https://content-security-policy.com/

5
Dr. Aaron Dishno

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

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

$wgEditPageFrameOptions = "SAMEORIGIN";

mediawikiのphp設定ファイルに。

それが役に立てば幸い。

4
John White

FWIW：

この "breaker"コードが現れたときにiFrameを殺す必要があるという状況がありました。それで、私はPHP function get_headers($url);を使ってリモートURLをチェックアウトしてからそれをiFrameに表示しました。パフォーマンスを向上させるために、結果をファイルにキャッシュして、毎回HTTP接続を行わないようにしました。

3
Zane Claes

私は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を使用してリソースにアクセスします。
3
Giri

たくさんの答えがある唯一の質問。締め切り日の夜10時30分に機能するようにスクランブルしていたときに持っていたガイドにようこそ... FBはキャンバスアプリで奇妙なことをします、そして、あなたは警告されました。 youaがまだここにいて、Facebook Canvasの背後に表示されるRailsアプリがある場合、次のものが必要になります。

宝石ファイル：

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 guide 。これは、あなたがRailsに採用できるようになりました。
2
pjammer

target = '_ parent'

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

2
jiminikiz

それがどれほど関連性があるかはわかりませんが、これに対する回避策を構築しました。私のサイトでは、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";
}


?>

お役に立てれば。

1
swatkat7

私はワードプレスの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を使用する。

1
kinghenry14

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

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

[内容： 「X-Frame-Optionsで表示を禁止する」を克服する

1
Nikhil Gyan

あなたがあなたのiframeで欲しいあなたのソースのヘッダを制御しないならば、唯一の本当の答えはそれを代理することです。サーバをクライアントとして機能させ、ソースを受け取り、問題のあるヘッダを取り除き、必要に応じてCORSを追加してから、自分のサーバにpingを送信します。

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

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

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

^好まれる。あなたがまれな使用法を必要とするならば、私はあなたがちょうど彼のherokuアプリを使うことができると思います。それ以外の場合は、自分のサーバー上で自分で実行するためのコードです。制限が何であるかを確認してください。

whateverorigin.org

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

それから3番目の選択肢があります。

http://anyorigin.com/ /

これは少し無料の使用を許可するように思えますが、あなたが支払いをしないであなたが公の恥のリストに載せるとあなたが料金を払う場合にのみ削除することができます...

1
Kyle Baker

ここに誰もApacheサーバの設定（*.confファイル）または.htaccessファイル自体をこのエラーの原因として挙げていないのは驚くべきことです。次の設定がApacheになっていないことを確認して、.htaccessまたはDENY設定ファイルを検索します。

Header always set X-Frame-Options DENY

これをSAMEORIGINに変更すると、物事は期待通りに動作します。

Header always set X-Frame-Options SAMEORIGIN

1
Ilia Rostovtsev

言及されていませんが、場合によっては役立つことがあります。

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

header()関数の代わりに以下の行を使用してください。

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

私はこの問題を抱えており、編集して解決しました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に変更し、サーバーを再起動しました

0
Arthur

これを試して、私は誰もがトピックでこれを示唆しているとは思わない、これはあなたの問題の70％のように解決するでしょう

あなたのiframeに下に追加

sandbox = "許可と同じOriginの許可スクリプト、許可ポップアップ、許可フォーム"

0
Zulqurnain abbas