はじめに
本記事は、特定のドメインのコンテンツをiframeで読み込みを許可する設定を実装していた際に、なかなか辿り着かなったX-Frame-Optionsの設定方法のメモです。
メモ
Content Security Policyのframe-ancestorsを設定することがありますが、Internet Explorerは、frame-ancestorsは非対応のため、X-Frame-Optionsで同様の設定が可能です。
Railsアプリにおいて、当初下記のように設定しました。
config.action_dispatch.default_headers['X-Frame-Options'] = 'ALLOW-FROM https://test.jp'
config.action_dispatch.default_headers['Content-Security-Policy'] = 'frame-ancestors https://test.jp'
IE以外のブラウザでは、frame-ancestorsの設定が効きましたが、IEのみ下図のエラーが出てX-Frame-Optionsが効かない状況でした。
最終的にRFC7034に辿り着き、2.2.1項に設定例を見つけました。
2.2.1. Examples of X-Frame-Options
X-Frame-Options: ALLOW-FROM https://example.com/ 👈 スラッシュが付いている
スラッシュ付きに修正すると上手くiframeで表示されました。
config.action_dispatch.default_headers['X-Frame-Options'] = 'ALLOW-FROM https://test.jp/'
config.action_dispatch.default_headers['Content-Security-Policy'] = 'frame-ancestors https://test.jp'
まとめ
IE対応が必要で、X-Frame-Options ALLOW-FROMを設定する場合には、uriにはスラッシュを付けよう。