multiple 'X-Frame-Options' headers with conflicting 에러

multiple 'X-Frame-Options' headers with conflicting 이슈 해결

동일 도메인에서 <iframe>을 통해 접근하는 경우 X-Frame-Options을 DENY로 설정하면 최신(?) 브라우저에서는 접근할 수 없는 문제가 발생할 수 있다. 이 경우 동일 도메인에서는 <iframe> 접근이 가능하도록 X-Frame-Options를 SAMEORIGIN으로 설정해줘야 한다.

<iframe>을 사용하는 부분이 있어 기존에 아래와 같이 SAMEORIGIN으로 설정해서 잘 사용하고 있었다.

http.headers().addHeaderWriter(new XFrameOptionsHeaderWriter(XFrameOptionsHeaderWriter.XFrameOptionsMode.SAMEORIGIN));

그런데 스프링 시큐리티 버전(3.2.3 -> 4.0.4)을 올리면서 동작에 문제가 생겼다. 브라우저에서 아래와 같은 에러가 발생했다.

이슈

[Chrome]
in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('DENY, SAMEORIGIN'). Falling back to 'deny'

http 응답 헤더를 보니 DENY와 SAMEORIGIN 설정이 중첩되는 문제가 발생했다.
스프링 시큐리티 버전이 올라가면서 default 값인 DENY에 SAMEORIGIN이 추가되어 충돌난 듯하다.

해결방안

내용을 찾아보니 스프링 시큐리티 4.x 부터 설정하는 방식이 변경되었다.

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

위와 같이 설정하니 문제없이 잘 동작하는 것을 확인했다.