[ Project · ArtMarket ] X-Frame-Options 트러블 슈팅

 

채팅 기능 구현을 완료하고 프론트 담당자 분이 프론트와 연결하는 작업을 진행하다가 ` X-Frame-Options ` 오류를 발견해서 이슈 해결 방법을 찾아보게 되었다. 

 

 

 

 01 . X-Frame-Options 오류

` X-Frame-Options `  오류는 처음 보는데  클릭재킹 공격을 막기 위한 설정이라고 한다. 

frame과 iframe, object 태그 에서의 참조를 제한하는 X-Frame-Options 라는 사양을 제안하고 있다. 주요 브라우저의 최신 버전에 모두 적용이 되어 있다. 위의 태그들을 렌더링 해야하는지 막아야하는지를 알려준다.

X-Frame-Options의 값은 3가지가 있다.

• DENY : 해당 페이지는 frame 내에 표시할 수 없다.
• SAMEORIGIN : 해당 페이지와 동일한 orgin(주소) 에 해당하는 frame 내에서 표시를 허용한다.
• ALLOW-FROM uri : 해당 페이지는 지정된 orgin에 해당하는 frame 내에서 표시할 수 있다.

X-Frame-Options 응답 헤더를 포함하려면 반드시 sameorigin 이거나 allow-from <origin>에 SockJS 클라이언트 도메인을 지정해야 한다.  즉 스프링 서버의 SockJs가 클라이언트의 위치를 알아야한다.

 

 

---

 

 

02.  X-Frame-Options  해결 방법

 

2-1 . SecurityConfig.java  : X-Frame-Options 값 설정

이를 바꾸기 위해 Spring Security 설정 파일인 SecurityConfig 에서 변경하였다.

스프링 부트의 설정파일인 properties에서도 변경이 가능하다.

security.headers.frame=false

 

1) 프론트 도메인 주소 같을 시 

http.headers().frameOptions().sameOrigin();

 

2)  프론트 도메인 주소 다를 시
        http.headers().frameOptions().disable()
        .addHeaderWriter(new StaticHeadersWriter("X-FRAME-OPTIONS", "ALLOW-FROM " + /* 허용할 URL */))

 

package llustmarket.artmarket.config;

@Log4j2
@Configuration
@RequiredArgsConstructor
public class SecurityConfig {
 

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
      
                ...
        http.headers().frameOptions().sameOrigin();
        
        return http.build();
    }
}

 

 

 

2-2. StompWebSocketConfig.java

Spring Boot에서 CORS 설정 시  모든 주소를 허용하는 대신 특정 패턴만 허용하는 것으로 적용해야한다고 변동되었다고 한다. ( setAllowedOrigins => setAllowedOriginPatterns )

이전 설정에서는 아래와 같이 모든 패턴에서  접속을 허용하게 설정해두었다. 

 [ 변경 전 ]

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/stomp/chat")
            .setAllowedOriginPatterns("*")
            .addInterceptors(new WebSocketConnectHandler(httpSession))
            .withSockJS();
}

 

1) 특정 패턴 허용

 프로젝트에서 사용하는 localhost 주소로 수정했다. 아직 서버가 없는데 서버에 올릴때 주소와 도메인도 후에 추가 해야 할 것 같다.

 

2)  SockJs 클라이언트 위치 추가

`setClientLibraryUrl` 을 추가했다. 프로젝트 내에 파일이 있을경우 파일의 경로, 외부 JS를 사용했을 경우 cdn 경로를 바로 적어주어도 가능하다.

 [ 변경 후 ]

public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/stomp/chat")
            .setAllowedOriginPatterns("http://localhost:8070")
            .addInterceptors(new WebSocketConnectHandler(httpSession))
            .withSockJS()
            .setClientLibraryUrl("https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"); //sock-client.js 의 위치
}