X-Frame-Options 설정

X-Frame-Options란?

• HTTP Rseponse Header 의 하나로, 브라우저가 해당 사이트를 <frame>, <iframe>, <embed>, <object> 태그 내부에서 렌더링해도 되는지를 설정할 수 있는 헤더이다.
• 서버 측에서 악의적인 사용자의 Click-jacking 공격을 막기 위해 사용할 수 있다.

Syntax

• X-Frame-Options의 종류에는 3가지가 있다.
  • DENY: 어떤 사이트에서도 이 사이트를 렌더링할 수 없다.
  • SAMEORIGIN: 같은 origin을 가진 사이트에서만 이 사이트를 렌더링할 수 있다.
  • ALLOW-FROM origin: 허용한 origin에서만 이 사이트를 렌더링할 수 있다.
• 헤더가 별도로 설정되지 않은 경우에는 모든 사이트에서의 렌더링을 허용한다.

Nginx

add_header X-Frame-Options SAMEORIGIN always;
# OR
add_header X-Frame-Options ALLOW-FROM "https://permitted-site.example.com" always;

Spring

// Java
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
  @Override
  protected void configure(HttpSecurity http) throws Exception {
    http.headers().frameOptions.disable()  // X-Frame-Options DISABLE(기본값은 DENY이다)
        .addHeaderWriter(new StaticHeadersWriter("X-FRAME-OPTIONS", "ALLOW-FROM https://permitted-site.example.com")  // X-Frame-Options ALLOW-FROM
        ...
  }
}

// Kotlin
@Configuration
@EnableWebSecurity
@EnableMethodSecurity(securedEnabled = true)
class WebSecurityConfig() {
    @Bean
    fun frameOptionsfilterChain(
        http: HttpSecurity
    ): SecurityFilterChain {
        http.invoke {
            ...
            headers {
                frameOptions {
                    disable()
                }
            }
        }
        return http.build()
    }
}

⚠️주의사항⚠️

X-Frame-Options의 속성에 따라 브라우저 지원 여부가 달라진다.
예를 들어, ALLOW-FROM 같은 경우에는 대부분의 브라우저에서 지원하지 않는다.
이런 경우에는 Content-Security-Policy 헤더를 사용한다.

---

Reference

• MDN: X-Frame-Options
• Spring Security X-Frame-Options 설정
• StackOverflow - how do I set X-Frame-Options response header...