質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20449questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Apache

    2109questions

    Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

  • nginx

    1035questions

    nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

  • Firefox

    242questions

    Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

  • iframe

    145questions

    HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

全ドメインにiframe読み込みを許可したい

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 3,203

terumin

score 1

 困っていること

Youtubeのように、他のサイトにiframeで埋め込まれることを
前提としたサイト(= http://hoge.com )を作っています。

これを別ドメインから以下のように読み込もうとすると、
読み込みエラーとなってしまいます。

// 別ドメインの http://foo.com/ にiframeで埋め込みたい
<iframe src="http://hoge.com">

 質問したいこと

X-Frame-OptionsのALLOW-FROMを以下のように設定したところ、
http://foo.comではiframe表示ができました。

add_header X-Frame-Options "ALLOW-FROM http://foo.com/";

しかし実現したいのはドメイン毎の設定を入れる必要なく、
Youtubeのようにどんなサイトにも埋め込めるようにしたいです。

どのような設定を入れれば良いでしょうか?

 補足

ALLOW-FROMを空で設定した場合、
Chromeでは全ドメイン許可の挙動となるようですが、
Firefoxにおいても全ドメイン許可する方法を探しております。

add_header X-Frame-Options "ALLOW-FROM";

どなたかご有識の方いらっしゃいましたら、どうぞ宜しくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2018/01/30 21:18

    add_header X-Frame-Options の行自体をコメントアウトしてみてはどうでしょうか?

    キャンセル

  • terumin

    2018/01/30 23:21 編集

    デフォルトで全拒否となっているものを、
    サーバー側のX-Frame-Optionsでホワイトリスト的に許可設定していくものっぽいので、設定しない場合は拒否されてしまうようです..orz

    実際、何も設定いれない状態では表示されませんでした。
    (Firefox)

    キャンセル

回答 2

0

ちょっと質問内容とずれた回答になりますが、
ヘッダーに
Access-Control-Allow-Origin:*
を追加すると表示されませんか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/01 08:52 編集

    はい。。CORS問題は対応済みで、そのレスポンスヘッダが含まれていても問題が発生しています。。

    ```
    < HTTP/1.1 200 OK
    * Server nginx/1.10.1 is not blacklisted
    < Server: nginx/1.10.1
    < Date: Wed, 31 Jan 2018 23:47:01 GMT
    < Content-Type: text/html; charset=utf-8
    < Transfer-Encoding: chunked
    < Connection: keep-alive
    < X-Frame-Options: SAMEORIGIN
    < X-XSS-Protection: 1; mode=block
    < X-Content-Type-Options: nosniff
    < ETag: W/"e6b8437a9182bbdd07dc8e4af6c827e6"
    < Cache-Control: max-age=0, private, must-revalidate
    < X-Request-Id: a84c2cc2-81e4-4cba-a5fa-194fe59394ba
    < X-Runtime: 0.031399
    < Access-Control-Allow-Origin: *
    < Access-Control-Allow-Methods: POST, GET, OPTIONS
    < Access-Control-Allow-Headers: Origin, Authorization, Accept
    < Access-Control-Allow-Credentials: true
    < X-Frame-Options: ALLOW-FROM http://yahoo.co.jp
    < X-Frame-Options: ALLOW-FROM
    ```

    Firefoxのエラー
    ```
    Load denied by X-Frame-Options: http://hoge.com does not permit framing by http://foo.com.
    ```

    キャンセル

  • 2018/02/01 16:09

    X-Frame-Options自体はむしろあってはだめで、HTTPSサイトでiframeを使ってhttpのサイトを読み込むことが問題だと思っているので、証明書をとってSSLに対応するのがよいかと思います。

    キャンセル

  • 2018/02/01 19:09

    すみません、自己解決しました!

    >Access-Control-Allow-Headers: Origin, Authorization, Accept
    をコメントアウトしたうえで、
    >add_header X-Frame-Options "ALLOW";
    を付け足す、が正解でした。

    ------
    正解レスポンスヘッダ
    -----

    < Access-Control-Allow-Origin: *
    < Access-Control-Allow-Methods: POST, GET, OPTIONS
    < Access-Control-Allow-Credentials: true
    < X-Frame-Options: ALLOW

    キャンセル

check解決した方法

-1

>Access-Control-Allow-Headers: Origin, Authorization, Accept
をコメントアウトしたうえで、
>add_header X-Frame-Options "ALLOW";
を付け足す、が正解でした。

正解レスポンスヘッダ

< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: POST, GET, OPTIONS
< Access-Control-Allow-Credentials: true
< X-Frame-Options: ALLOW

nginx.conf

    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
#        add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
        add_header Access-Control-Allow-Credentials true;

        add_header X-Frame-Options "ALLOW";

アプリケーションとのコンフリクトに注意

アプリケーション側でX-Frame-Optionsを付け足す設定になっている場合があり、
自分の場合はRuby on RailsがデフォルトでSAMEORIGINを返すようになっていたため、
Chromeではコンフリクトエラーが発生。

>エラー

Refused to display 'https://hoge.com' in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('SAMEORIGIN, ALLOW'). Falling back to 'deny'

>ヘッダ

* Server nginx/1.10.1 is not blacklisted
< Server: nginx/1.10.1
< Date: Thu, 01 Feb 2018 23:59:11 GMT
< Content-Type: text/html; charset=utf-8
< Transfer-Encoding: chunked
< Connection: keep-alive
< X-Frame-Options: SAMEORIGIN
< X-XSS-Protection: 1; mode=block
< X-Content-Type-Options: nosniff
< ETag: W/"460d2cbdc5ecf1d7417e99fc879fd127"
< Cache-Control: max-age=0, private, must-revalidate
< X-Request-Id: 5c24d399-9c62-4ffe-b4fa-47caed6409e9
< X-Runtime: 0.013970
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: POST, GET, OPTIONS
< Access-Control-Allow-Headers: *
< Access-Control-Allow-Credentials: true
< X-Frame-Options: ALLOW

今回のケースでは結局、nginxの設定を削除し、rails側の設定でALLOWとする。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/01 20:19

    nullbot さんが指摘されたように「X-Frame-Options」で許可する手法は一般には推奨されない方法だと思いましたので、マイナス評価に投じました。
    誤解を恐れずにざっくりいえば、それは「私のサイトはクリックジャッキングされても、痛くもかゆくもないぜ」とふんぞり返っていられるスタンスの人が使う方法です。
    https://www.ipa.go.jp/files/000026479.pdf

    > X-Frame-Options: ALLOW
    IETFを読む限りでは、"DENY", "SAMEORIGIN", "ALLOW-FROM" の3つだけですが、"ALLOW" はどこから出てきたのでしょうか。
    https://tools.ietf.org/html/draft-ietf-websec-x-frame-options-00#section-2.1

    キャンセル

  • 2018/02/02 09:29

    >"ALLOW" はどこから出てきたのでしょうか

    海外の野良サイトを徘徊している中で見つけたものです

    >「X-Frame-Options」で許可する手法

    ちなみにYoutubeは設定されていなくても埋め込めるので、
    他に何か方法があるのかもしれません

    ```
    // curl -v https://www.youtube.com/embed/TiSPhFCQnG0

    < HTTP/1.1 200 OK
    < Cache-Control: no-cache
    < Strict-Transport-Security: max-age=31536000
    < X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube
    < Expires: Tue, 27 Apr 1971 19:44:06 EST
    < P3P: CP="This is not a P3P policy! See http://support.google.com/accounts/answer/151657?hl=ja for more info."
    < Content-Type: text/html; charset=utf-8
    < X-Content-Type-Options: nosniff
    < Date: Fri, 02 Feb 2018 00:20:23 GMT
    * Server YouTube Frontend Proxy is not blacklisted
    < Server: YouTube Frontend Proxy
    < Set-Cookie: VISITOR_INFO1_LIVE=cYzJXt3gye4; path=/; domain=.youtube.com; expires=Wed, 03-Oct-2018 12:13:23 GMT; httponly
    < Set-Cookie: YSC=4ufRCHnpTGI; path=/; domain=.youtube.com; httponly
    < Set-Cookie: VISITOR_INFO1_LIVE=cYzJXt3gye4; path=/; domain=.youtube.com; expires=Wed, 03-Oct-2018 12:13:23 GMT; httponly
    < Set-Cookie: PREF=f1=50000000; path=/; domain=.youtube.com; expires=Wed, 03-Oct-2018 12:13:23 GMT
    < Alt-Svc: hq=":443"; ma=2592000; quic=51303431; quic=51303339; quic=51303338; quic=51303337; quic=51303335,quic=":443"; ma=2592000; v="41,39,38,37,35"
    < Accept-Ranges: none
    < Vary: Accept-Encoding
    < Transfer-Encoding: chunked
    ```

    キャンセル

  • 2018/02/02 13:16

    To: terumin さん
    > 海外の野良サイトを徘徊している中で見つけたものです
    そうですか。
    それは標準外の動作なので、特定のブラウザの特定のバージョンでは有効かもしれませんが、ブラウザがバージョンアップしたり、あなたが確認していないブラウザでは動作しない可能性があります。

    > ちなみにYoutubeは設定されていなくても埋め込めるので、
    > 他に何か方法があるのかもしれません
    憶測で物事を判断するのは好ましくないと思います。
    YouTubeが本当にクリックジャッキング対策がされているのか、は確認してみるまでは分かりません。
    仮に対策されていたとして、その対策の全容まで把握して、初めて意味があります。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20449questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Apache

    2109questions

    Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

  • nginx

    1035questions

    nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

  • Firefox

    242questions

    Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

  • iframe

    145questions

    HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。