iframe 에러에 대한 노트 (Invalid 'X-Frame-Options' header encountered when loading)

<iframe src="http://www.naver.com"></iframe>

 

네이버를 아이프레임에 넣으면 빈 화면만 표시된다.

굳이 이런것까지 막을 필요가 있을까 싶겠지만, 간단하게 자바스크립트로 작성한 프레임(주로 iframe)을 이용한 디도스 공격을 시도한다면 그대로 당할 수 밖에 없다.

이러한 사소한 공격이라도 예방하려면 사이트가 프레임 또는 아이프레임에 표시되지 않도록 해야 한다.

또한 이 방법은 클릭재킹공격(Clickjacking Attact)에 대한 예방효과도 있다.

 

 

 

자바스크립트를 이용한 방법

<script type="text/javascript">

    if(top != window) {

        top.location = window.location;

    }

</script>

 

 

 

메타 태그를 이용한 방법

<meta http-equiv="X-Frame-Options" content="deny" />

 

 

 

서버사이드 확장헤더를 이용한 방법

 

PHP

  header("X-Frame-Options: DENY");

 

Java

  HttpServletResponse res = (HttpServletResponse)response;

  res.addHeader("X-FRAME-OPTIONS", "DENY");

 

C#

  this.Response.Headers["X-FRAME-OPTIONS"] = "DENY";

  또는

  HttpContext.Current.Response.AddHeader("x-frame-options", "DENY");

 

X-Frame-Options 확장헤더에 사용되는 값

  DENY : 해당 페이지를 frame에 표시할 수 없게 한다

  SAMEORIGIN : 해당 페이지와 동일한 orgin에 해당하는 frame만 표시 한다

  ALLOW-FROM uri : 해당 페이지는 지정된 orgin에 해당하는 frame만 표시 한다

Http Server를 이용한 방법

Apache

• Header always append X-Frame-Options SAMEORIGIN 

Nginx 

• add_header X-Frame-Options SAMEORIGIN;

위와 같이 설정하면 된다. 나 또한 위 설정을 통해 X-Frame-Options 설정을 변경했다. 그런데 문제가 해결되는 것이 아니라 또 다른 문제가 생겼다.

Multiple 'X-Frame-Options' headers with conflicting values ('SAMEORIGIN, DENY')

http 응답 헤더를 분석했더니 DENY와 더불어 또 하나의 SAMEORIGIN 설정이 추가되어 충돌이 발생하는 상황이었다. 아무리 DENY 설정을 제거하려고 삽질을 해봤지만 제거되지 않았다.

1시간 동안 Apache 웹 서버와 삽질하다가 혹시 Apache가 아니라 뒤에 연결되어 있는 Tomcat 서버의 응답 헤더에 DENY 설정이 포함되어 있는 것은 아닐까라는 의심을 하게 되었다.

> curl -I http://localhost:8080

위와 같이 명령을 실행해 응답 헤더를 확인하니 떡하니 DENY 설정이 추가되어 있다. 이럴 때의 허무함이란..

다시 Tomcat에서 X-Frame-Options 설정 시작했다. Tomcat은 기본 값으로 X-Frame-Options 설정을 DENY로 설정하고 있었다. 이 문제를 해결하기 위해 Servlet Filter를 추가해 해결했다.

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() {

    }
}

위와 같이 설정하니 X-Frame-Options가 정상적으로 변경되는 것을 확인했다. chrome은 아직까지 ALLOW-FROM 설정을 인식하지 못해 무시해 버리기 때문에 정상적으로 동작한다. 다룬 브라우저도 정상적으로 동작... 오늘 오전의 삽질 경험을 공유해 본다.

spring security 버전 업그레이드 후에 X-Frame-Options이 http header에 추가되어 iframe으로 동작하던 기능이 정상적으로 동작하지 않는 이슈가 발생했다.

얼마 전 X-Frame-Options to DENY 설정 때문에 iframe을 통해 접근할 수 없는 문제 해결 글에서도 관련 이슈를 등록했던 적이 있다. 이 문제를 해결하면서 이전에 추가하지 않던 header를 tomcat에서 갑자기 추가하지는 않을 것으로 예상했다. 그냥 의구심만 가지고 지나쳤다가 다른 iframe 이슈를 해결하다 X-Frame-Options header를 spring security가 보안 이슈를 해결하기 위해 추가한다는 것을 알게 되었다.

가능하면 iframe을 사용하지 않으면 좋겠지만 그렇지 않은 경우 다음과 같이 X-Frame-Options header 추가하는 부분을 다음과 같이 disable 함으로써 문제를 해결할 수 있다.

http.headers().frameOptions().disable()

PS.. Apple Safari 11 에서는 iFrame에서 실행되는 콘텐츠에 대해 IndexedDB를 지원하지 않습니다.

(TypeError: 'undefined' is not an object (evaluating 'window.indexedDB.open')