iframe으로 youtube동영상을 호출하여 재생하는 작업을 하다가 동영상이 재생되지 않아 크롬 개발자 도구로 확인해 봤다니 다음과 같은 메세지를 출력하고 있었다.
"....in a frame because it set x-frame-options to sameorigin"
|
X-Frame-Option header
X-Frame-Option header는 FrameSet이나 iframe등에 의한 클릭재킹에 대한 보호를 제공하고 2009susdp IE8에 추가되었고 얼마 후 다른 브라우져들에도 채택되었다.
이 헤더의 값은 DENY, SAMEORIGIN, ALLOW-FROM 중 하나를 가지며 각각 외부 사이트에 대한 프레임 금지, 같은 사이트만 허용, 특정 사이트만 허용의 의미를 가진다.
- X-Frame-Option header의 옵션들
DENY |
외부 사이트에 대한 프레임 금지 |
SAMEORIGIN |
같은 사이트만 허용 |
ALLOW |
특정 사이트만 허용 |
그렇다면 클릭재킹은 무엇인가?
클릭재킹(Clickjacking)이란 마우스 클릭(Click)과 항공기 불법탈취 또는 납치를 의미하는 하이재킹(hijacking)의 합성어로, 사용자는 어떤 웹 페이지를 클릭하지만 실제로는 다른 어떤 페이지의 컨텐츠를 클릭하게 되는 것이다. 대표적인 방법으로는 정상적인 버튼 밑에 해킹 기능을 넣은 보이지 않는 버튼을 배치하는 것이다. |
X-Frame-Option header는 다양한 루트로 설정할 수 있다.
1) 웹서버에서 설정
Apache
- Header always append X-Frame-Options SAMEORIGIN
Nginx
- add_header X-Frame-Options SAMEORIGIN;
2) Tomcat에서 설정
톰캣은 X-Frame-Option옵션의 디폴트값이 DENY이다.
헤더를 설정하기 위해 다음과 같은 방법을 사용할 수 있다.
방법 1) Servlet Filter를 추가하는 방법
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | public class CorsFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) servletResponse; response.setHeader("X-Frame-Options", "ALLOW-FROM https://apps.facebook.com";); filterChain.doFilter(servletRequest, servletResponse); } @Override public void destroy() { } } | cs |
방법 2) HttpHeaderSecurityFilter 사용하는 방법(HttpHeaderSecurityFilter는 Tomcat 7.0.77 부터 사용 가능)
1 2 3 4 5 6 7 8 9 10 11 12 13 | <filter> <filter-name>httpHeaderSecurity</filter-name> <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class> <init-param> <param-name>antiClickJackingOption</param-name> <param-value>SAMEORIGIN</param-value> </init-param> </filter> <filter-mapping> <filter-name>httpHeaderSecurity</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> | cs |