環境
- 言語 kotlin (framework：spring)
- ブラウザ GoogleChrome
事象
先日、モーダル画面の実装で動作確認をしていた際、以下の画面が表示された。
F12でコンソールログを見ると表題のエラーが出力されていた。
調査結果
・X-Frame-Optionsとは
HTTP のレスポンスヘッダーで、ブラウザーがページを <frame>、<iframe>、<embed>、<object> の中に表示することを許可するかどうかを指定するために使用するもの。
自分の Web サイトを上記のタグで埋め込むことができるようにしていると、XSSやクリックジャッキング攻撃を受ける危険性がある。
X-Frame-Options には 2 つの有効なディレクティブがある。
有効ディレクティブ
// すべてのサイトからの埋め込みを拒否
X-Frame-Options: DENY
// 同じオリジン（スキーム・ホスト・ポートの組み合わせ）のみ許可
X-Frame-Options: SAMEORIGIN
・事象原因
Spring Securityではデフォルトで上記の値がDENYとなっている。
→これを許可にしてあげればOK！
解決策
X-Frame-OptionsをSAMEORIGINに変更する。
SecurityConfig.kt
@Configuration
@EnableWebSecurity
class SecurityConfig() {
@Bean
fun fiilterChain(http: HttpSecurity): SecurityFilterChain {
// 以下を追加
http {
headers {
frameOptions {
sameOrigin = true
}
}
}
}
→ 再度ビルド後、正常に表示されました。