1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

X-Frame-OptionsにALLOW-FROMを設定するときはスラッシュを忘れずに

Last updated at Posted at 2021-08-18

はじめに

本記事は、特定のドメインのコンテンツを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が効かない状況でした。

unnamed.jpeg

最終的に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にはスラッシュを付けよう。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?