HTTP 헤더 X-Frame-Options 설정하기

웹 브라우저는 서버와 통신할 때 Header를 요청하고 전달 받는데요 ~ 이를 통해 쿠키 및 기타 중요한 정보를 교환할 수 있습니다. 혹시 설정 값 중에서 X-Frame-Options를 보신 적이 있으신가요? 오늘 이에 대하여 알아보려고 합니다.

X-Frame-Options는?

여러가지 Http 헤더 옵션들이 존재하는데 이 중에서 X-Frame-Options에 대하여 간략히 알아보겠습니다. 이 옵션은 페이지를 불러올 때 <frame> <iframe> <embed> 그리고 <object> 형태로 불러오는 것을 허용할 것인지를 결정할 수 있습니다. 즉 만약 자신의 웹서버가 다른 곳의 <frame> 형태로 불려오는 것을 원치 않는다면 헤더에 DENY 또는 SAMEORIGIN 값을 설정해 가능하죠.

이때 사용 가능한 옵션 값은 아래와 같이 3가지가 있습니다.

- DENY // 프레임, 임베트 형태의 렌더링 금지
- SAMEORIGIN // 같은 Origin인 경우에만 허용하기
- ALLOW-FROM uri // 특정 URI만 허용할 수 있는 방법(단, 모든 브라우저에서 지원되지 않음)

이 중에서도 가장 많이 사용되는 값들이 바로 SAMEORIGIN입니다. 해당 헤더 옵션이 사용되었는지를 확인하는 방법은 브라우저의 문서 정보(Document)를 개발자 도구에서 확인하면 빠르고 쉽게 알 수 있습니다. 대표적으로 구글 웹사이트의 경우 아래의 스크린샷처럼 해당 값이 설정된 것을 알 수 있죠.



보시는 것처럼 구글의 경우 SAMEORIGIN으로 설정되어 있습니다. 이 외에도 애플 등 많은 사이트에서 해당 헤더 옵션을 사용한 것을 알 수 있는데요 ~ 그 이유는 무엇일까요?

# X-Frame-Options 헤더 옵션을 사용하는 이유

해당 옵션을 사용하면 위에 언급한 것처럼 <frame>과 같은 방식으로 렌더링 할 수 없습니다. 위와 같은 렌더링 방식은 악의적인 사용 목적으로 사용되기도 하는데 대표적으로 아래와 같은 공격의 수단으로 사용될 수 있습니다.

• 다수의 <frame> 내부 호출을 통해 DDoS 공격 유도
• 같은 사이트처럼 속여 클릭을 유도하는 Clickjacking

즉 보안 및 공격에 대한 위험을 줄이기 위해서 사용하는 것이 더 나은 경우가 되겠습니다. 구글, 애플처럼 대규모 트래픽과 중요 콘텐츠를 가지고 있는 경우 보안 등에 더욱 신경써야하겠죠. 물론 반드시 필요한 것은 아니지만 웹사이트의 제공하는 서비스에 따라 해당 헤더 옵션은 좋은 선택이 될 수 있습니다.

! nuxt 서버에 해당 헤더 설정하기

아래는 만약 nuxt 서버를 사용하는 경우 헤더에 추가하는 방법을 알아봅니다. nuxt 서버의 경우 SSR 방식으로 서버사이드 렌더링이 가능하므로 헤더값을 브라우저에 전송할 수 있습니다. 이때 nuxt의 middleware 폴더에 아래 파일을 추가하여 사용할 수 있겠습니다.

@ set-header.js

nuxt는 서버사이드, 클라이언트 사이드 둘 다 사용이 가능하므로 위와 같이 process.server가 true인 경우에만 헤더를 설정하였습니다. 이제 위의 파일을 nuxt.config.js 내부에 설정하도록 합니다.

@ nuxt.config.js

간단하게 nuxt 서버에 설정이 완료되었습니다. 값을 SAMEORIGIN으로 설정하였기 때문에 다른 호스트에서는 <frame> 등의 방식으로 렌더링이 불가능하게 됩니다. 여기까지 HTTP에서 X-Frame-Options 옵션에 대하여 간략히 알아보았습니다.