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

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

新規登録して質問してみよう
ただいま回答率
85.50%
iframe

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

Firefox

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

Apache

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

nginx

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

JavaScript

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

Q&A

解決済

2回答

6369閲覧

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

terumin

総合スコア17

iframe

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

Firefox

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

Apache

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

nginx

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

JavaScript

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

0グッド

1クリップ

投稿2018/01/30 12:05

困っていること

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2018/01/30 12:18

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

2018/01/30 14:24 編集

デフォルトで全拒否となっているものを、 サーバー側のX-Frame-Optionsでホワイトリスト的に許可設定していくものっぽいので、設定しない場合は拒否されてしまうようです..orz 実際、何も設定いれない状態では表示されませんでした。 (Firefox)
guest

回答2

0

自己解決

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

編集2018/02/02 00:13
terumin

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2018/02/01 11: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
terumin

2018/02/02 00: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 ```
think49

2018/02/02 04:16

To: terumin さん > 海外の野良サイトを徘徊している中で見つけたものです そうですか。 それは標準外の動作なので、特定のブラウザの特定のバージョンでは有効かもしれませんが、ブラウザがバージョンアップしたり、あなたが確認していないブラウザでは動作しない可能性があります。 > ちなみにYoutubeは設定されていなくても埋め込めるので、 > 他に何か方法があるのかもしれません 憶測で物事を判断するのは好ましくないと思います。 YouTubeが本当にクリックジャッキング対策がされているのか、は確認してみるまでは分かりません。 仮に対策されていたとして、その対策の全容まで把握して、初めて意味があります。
guest

0

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

投稿2018/01/30 23:23

nullbot

総合スコア910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

terumin

2018/01/31 23:57 編集

はい。。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. ```
nullbot

2018/02/01 07:09

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

2018/02/01 10: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
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問