[Spring Security] X-Frame-Options와 정적 파일 로드 문제

1. 문제 상황

---

스프링 시큐리티를 사용하는 개발 환경에서 정적 파일을 로드하지 못하는 문제가 발생했다.

구체적인 상황은 index.html에서 내부적으로 <object> 태그를 사용하여 static.html을 불러오질 못했다.

<object type="text/html" data="static.html"></object>

 

처음에는 단순히 경로 불일치나 오탈자 문제인 줄 알았지만

그렇다면 개발자 모드에서 해당 파일에 404 에러가 발생했어야 했다.

 

404가 아닌 (차단됨:기타) 상태를 확인하고

스프링 시큐리티에서 막았구나 CORS 구성을 변경하면 되겠구나라는 생각을 했지만

아직 스프링 시큐리티를 며칠 배우지 않은 입장에서 이게 CORS 때문에 막힌건지도 확실하지 않았다.

 

심지어 같은 디렉토리, 로컬 환경에 같은 포트번호를 사용하고 있었는데도 왜 차단되는지

 

게다가 자료가 많던 WebSecurityConfigurerAdapter를 확장해서 설정하는 방식은 Deprecated 되어서

감을 잡기가 더 힘들었다.

 

CORS는 다른 브라우저나 프로토콜, 도메인 간에 리소스 공유에 관한 것인데

예전에 리액트가 3000포트로 잡히고 스프링은 8080 포트로 달라서 CORS 커스텀을 바꿨을 땐 포트번호가 다르다는게 확실했었고

스프링 시큐리티 없이는 불러오기가 잘 되었기 떄문에 디폴트로 잡히는 설정 문제에 국한해서 다른 방법을 찾아보았다.

 

시도해본 목록

• 1. 스프링 시큐리티 웹 보안 구성을 모두 허용하는 식으로 변경 (성공)
• 2. 자바스크립트(fetch)를 이용해서 불러오기 (성공)
• 3. 컨트롤러를 만들어서 static.html을 불러와서 안에 집어넣기 (성공)

 

2. 원인

---

원인은 X-Frame-Options 헤더에 있었다.

X-Frame-Options는 웹 페이지가 다른 웹 페이지에 로드되지 않도록 막는 HTTP 헤더 중 하나다.

딱 나의 상황과 맞는 상황이다. (static.html을 index.html에 로드)

 

이 헤더 설정의 종류는 deny, same origin, allow from [URI]이 있다.

• deny: 모두 거절
• sameorigin: 같은 origin이면 허용 (내가 설정한 방법)
• allow-from URI: 특정 URI면 허용

 

이제 스프링 시큐리티에서 X-Frame-Options을 sameorigin으로 설정했다.

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

 

3. 결과

---

<object> 태그를 이용해 파일을 불러오는 것에서부터 문제가 발생했다.

이 태그를 이용해서 주소를 명시하여 파일을 가져올 때

X-Frame-Option이 Deny로 설정되어 있는 경우 HTML 파일을 로드하는 것이 차단된다.

설정을 바꿔서 파일은 작동은 잘 되지만 CSP 경고가 발생한다. 클릭재킹이라는 위협에 노출될 수 있다하는데

이전에 시도했었던 자바스크립트를 사용해 가져오는 방법이 더 낫다고 한다.

 

---

도움을 받은 곳

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

X-Frame-Options - HTTP | MDN