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

Question

前提・実現したいこと

同一ドメイン内で、埋め込み用のURLを用意して、
その埋め込み用URLは第３者が自由に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単位で制御しているようなので
方法をご存知の方、どうぞ助けていただけると幸いです。

Comments

[ockeghem]

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

Answer 1

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

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

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

Context: http, server, location, if in location （nginx公式より）

Comments

[Mues]

はい、add_header自体は、location単位で設定できます。
locationを分ければ、locationごとにadd_headerを設定できます。

しかし、locationディレクティブに記載したX-Frame-OptionsやContent-Security-Policyのframe-ancestorsディレクティブは、個別パスの設定はできないと認識しています。

おそらく私はlocationを許可・非許可URLごとに分けるべきなのか、location / {} を１つだけ用意して、add_header内のCSP設定によって、私の課題が解決できるのか分かっていません。

[maisumakun]

> locationを分ければ、locationごとにadd_headerを設定できます。

そうしてください。

[maisumakun]

location{}は複数書けます。

[Mues]

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

[maisumakun]

> try_filesのファイルも別に用意して処理を分ける必要があるのでしょうか？

その必要はありません。切り分ける箇所にadd_headerだけ書けばいいです（locationはネストできます）。

[Mues]

う～ん。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]

> locationの切り分けを以下でやってみてたんですが

どう見てもadd_headerを切り分けているようには見えないのですが。

[Mues]

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

[maisumakun]

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

[Mues]

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

[maisumakun]

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

[Mues]

そうだと思います。調べたのが下記です。
・includeでなんかあるかな？と思い調べましたがコメントアウトしているのでincludeは関係ないと思います。
・locationも２つ以外にないです。
・念のため、location / {}もコメントアウトしてlocation１個だけで実行、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;を追記しても意味なし
でした。
何かほかに調べるべきポイントはありますでしょうか？