보안 웹서버 외부 frame 서비스 차단(x-frame-options, clickjacking)

아래 이미지같이 frame(iframe 포함) 을 이용하여, 외부 페이지를 노출하는 서비스 운영중에 아래와 같은 메시지가 나오고(IE는 에러 메시지, Chrome에서는 빈페이지 출력), 외부 페이지가 나오지 않는 문제가 발생해서 확인을 해보았습니다.

이 콘텐츠를 프레임에 표시 할 수 없습니다.

이 웹 사이트에 입력한 정보의 보안을 위해서 이 콘텐츠의 게시자가 프레임 내 표시를 허용하지 않습니다.

가능한 해결 방법: 새창에 이콘텐츠를 엽니다.

ClickJacking 이라하여, 외부에서 frame을 사용해서, 다른 사이트처럼 보이게 하여, 클릭을 유도하는 것인데, 이를 방지하기 위해서, 웹서버에서, 데이터 전송시 http 헤더에 X-Frame-Options 라는 이름의 옵션 값을 추가하여 전송하게 되면, 웹브라우저에서 해당 데이터를 표시하지 안도록 처리하여 이를 회피 한 것이다.

옵션 값은 DENY(모두 표시안함), SAMEORIGIN(동일 origin에 대해서만 frame 내에서 표시), ALLOW-FROM origin, (특정 origin에 대해서만 frame 내에서 표시) 이렇게 3가지이고, 사용 문법은 다음과 같다.

X-Frame-Options: DENY

X-Frame-Options: SAMEORIGIN

X-Frame-Options: ALLOW-FROM https://example.com/

각 웹서버별 헤더 옵션 추가 방법은 Apache의 경우 httpsd.conf 설정에

Header always append X-Frame-Options SAMEORIGIN

또는

Header set X-Frame-Options DENY

Nginx는 nginx.conf 설정의 http 설정 하위 server 또는 location 설정에

add_header X-Frame-Options SAMEORIGIN;

IIS의 경우에는 웹사이트 Web.config 파일에 

<system.webServer>

  ...

  <httpProtocol>

    <customHeaders>

      <add name="X-Frame-Options" value="SAMEORIGIN" />

    </customHeaders>

  </httpProtocol>

  ...

</system.webServer>

설정하면된다.

서버쪽에서는 헤더에 옵션만 추가 한것이므로, 브라우저에서 차단을 지원해야하는데, 현재 브라우저별 지원 버전은 다음과 같다.

• IE8+
• Opera 10.50+
• Safari 4+
• Chrome 4.1.249.1042+ (Allow-From not yet supported)
• Firefox 3.6.9 (or earlier with NoScript)

출처는 다음과 같다.

• http://pshcode.tistory.com/111
• https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/X-Frame-Options
• https://blogs.msdn.microsoft.com/ieinternals/2010/03/30/combating-clickjacking-with-x-frame-options/