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

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

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

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

nginx

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

Q&A

1回答

2102閲覧

同一ドメイン内で、特定のURLのみiframeを許可、その他では拒否する方法は?

Mues

総合スコア0

iframe

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

nginx

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

0グッド

3クリップ

投稿2021/03/25 23:36

前提・実現したいこと

同一ドメイン内で、埋め込み用のURLを用意して、
その埋め込み用URLは第3者が自由にiframeで埋め込みできるようにして、
その許可URL以外のURLでは埋め込み拒否したいです。

e.g.
https://example.com の埋め込みは拒否
https://example.com/embed/ 以下のURLの埋め込みは許可

前提

Nginx + React.jsでの配信

試したこと

nginxのconf設定で、
・add_header X-Frame-Options
・add_header Content-Security-Policy
が関連項目かと思い、調べましたが、
どれも設定単位がオリジンかドメインまたはサブドメイン単位であって、
同一ドメインの個別パスに対して設定できる感じではないと認識しています。

Youtubeの例を見ると、
埋め込み用URLはサブドメインでもなく同一ドメインのURL単位で制御しているようなので
方法をご存知の方、どうぞ助けていただけると幸いです。

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

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

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

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

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

ockeghem

2021/03/25 23:55

もうちょっと想定を書いていただかないと回答は難しいです。iframeタグのあるページ、埋め込まれる方のページ、それぞれのページはどのように生成するのでしょうか。質問は編集できるので本文の方に追記してください。
guest

回答1

0

どれも設定単位がオリジンかドメインまたはサブドメイン単位であって、

同一ドメインの個別パスに対して設定できる感じではないと認識しています。

いえ、add_headerは「同一ドメインの個別パスに対して設定」できます。

Context: http, server, location, if in location (nginx公式より)

投稿2021/03/26 00:02

maisumakun

総合スコア145184

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

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

Mues

2021/03/26 00:28 編集

はい、add_header自体は、location単位で設定できます。 locationを分ければ、locationごとにadd_headerを設定できます。 しかし、locationディレクティブに記載したX-Frame-OptionsやContent-Security-Policyのframe-ancestorsディレクティブは、個別パスの設定はできないと認識しています。 おそらく私はlocationを許可・非許可URLごとに分けるべきなのか、location / {} を1つだけ用意して、add_header内のCSP設定によって、私の課題が解決できるのか分かっていません。
maisumakun

2021/03/26 00:43

> locationを分ければ、locationごとにadd_headerを設定できます。 そうしてください。
maisumakun

2021/03/26 03:31

location{}は複数書けます。
Mues

2021/03/26 05:41

具体的なディレクティブの例を教えていただけますか?try_filesのファイルも別に用意して処理を分ける必要があるのでしょうか?
maisumakun

2021/03/26 06:10

> try_filesのファイルも別に用意して処理を分ける必要があるのでしょうか? その必要はありません。切り分ける箇所にadd_headerだけ書けばいいです(locationはネストできます)。
Mues

2021/03/26 08:05

う~ん。locationの切り分けを以下でやってみてたんですが、CSPは効きます。効きますが、/embed/の方にも効いてしまってる状態で完全にスタック中でした。もしかしたらnginxのレスポンスヘッダーのキャッシュのようなものが残ってしまってると思い、proxy_hide_headerしてみましたが意味なかったです。 困りました。 location ^~ /embed/ { proxy_hide_header Content-Security-Policy; try_files $uri $uri/ /index.html; } location / { add_header Content-Security-Policy "default-src 'self'; connect-src 'self'; frame-src https://example.com/;"; try_files $uri $uri/ /index.html; }
maisumakun

2021/03/26 08:08

> locationの切り分けを以下でやってみてたんですが どう見てもadd_headerを切り分けているようには見えないのですが。
Mues

2021/03/26 08:11

たとえばどうすれば切り分けになりますか? 例を教えてくれると助かります。
maisumakun

2021/03/26 08:14 編集

「/embed/以外」というlocationを作って、そこにだけadd_headerを書く
Mues

2021/03/26 08:18

location ^~ /embed/ で一致したら下のlocation / {}には行かないので、ヘッダーなし。 それ以外なら、location / {}にHITするのでヘッダーあり になりませんか?
maisumakun

2021/03/26 08:22

別なところでContent-Security-Policyが追加されている、ということではないですか?
Mues

2021/03/26 08:49

そうだと思います。調べたのが下記です。 ・includeでなんかあるかな?と思い調べましたがコメントアウトしているのでincludeは関係ないと思います。 ・locationも2つ以外にないです。 ・念のため、location / {}もコメントアウトしてlocation1個だけで実行、chromeのキャッシュも削除しても、「Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.」となって、一体どこから混入あるいはキャッシュされているCSPなのか分かりません。 ・nginxのキャッシュか?と思いproxy_hide_header Content-Security-Policy;を追記しても意味なし でした。 何かほかに調べるべきポイントはありますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問