CSS Injection 취약점

CSS란?

• Cascading Style Sheet (CSS)는 HTML로 정의된 문서를 다채롭게 하는 역할을 한다.
• 개발자는 CSS로 HTML 요소들이 사용자에게 어떻게 보여질지 정의할 수 있다.
• 표현헤 사용될 임의의 CSS 코드를 주입시켜 의도하지 않은 속성이 정의되는 것을 CSS Injection이라고 한다.
• 임의 Javascript가 삽입되는 것에 대한 두려움은 이미 많은 개발자들이 가지고 있지만, 악의적인 CSS의 위험성은 잘 알려져있지 않아 대게 무시되고 있다. 그 결과로, 많은 회사에서 CSS Injection 취약점이 발생했다.

 

CSS Injection

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

 

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

 

CSS Injection은 그 파급력과 심각성에 비해 대중에 널리 알려지지 않고 다양한 웹 방화벽에서 차단하지 않는 입력 값을 갖고 있다.

보통의 웹 방화벽의 경우 "<script>", "alert", "eval" 등의 키워드는 차단하지만, CSS Injection에 주로 사용되는 "background:", "url" 등의 키워드는 차단하지 않는다.

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

 

---

CSS Injection - 기초

색깔 바꾸기

CSS Injection을 통해 임의 영역의 UI를 변경할 수 있다. 특정 버튼 또는 H1 태그의 크기와 색깔 등을 변경할 수 있다. 다음은 이용자로부터 theme 값을 입력 받아 style 태그 내에 출력하는 웹 어플리케이션이다.

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

theme 값 내에 < 를 입력할 수 없어 정의된 style 태그를 벗어나는 것은 불가능하여 CSS 속성만 출력할 수 있다. 인터랙티브 모듈을 이용해 yellow 값을 하나씩 변경할 수 있다.

 

1. yellow를 blue로 변경하면 노란색 배경색이었던 것이 파란색으로 변경된다.
2. body의 background-color가 아닌 h1의 글씨 색을 변경하려면 } 문자를 이용해 기존 속성을 탈출해야 한다.
3. yellow; } h1 { color: red 값을 입력하여 h1 내의 글씨가 빨간색으로 변경된 것을 확인할 수 있다.

 

IP Ping Back 하기

클라이언트사이드 공격을 통해 데이터를 외부로 탈취하기 위해서는 공격자의 서버로 요청을 보낼 수 있어야 한다.

 

CSS는 외부 리소스를 불러오는 기능을 제공한다. 예로 다른 사이트의 이미지 폰트 등이 있으며, 여러 방법이 존재하지만 대표적으로 cure53의 HTTPLeaks 가젯을 이용할 수 있다.

 

다음 표는 자주 쓰이는 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”도 지원합니다.

 

1. 위 가젯 중 하나를 사용해 페이지 내에서 외부 서버로 요청을 보낼 수 있다. 요청을 받을 서버는 드림핵 툴즈의 Request bin을 이용할 수 있다.
2. 개발자 도구를 미리 띄워두고, Network 탭에서 요청을 기록한다.
3. yellow; background: url("https://~~~~reqeust.dreamhack.games/ping-back"); 발급받은 서브 도메인 주소로 body의 background를 설정한다.
4. 개발자 도구에서 실습 모듈에서 드림핵 툴즈로 보낸 요청을 확인하고, 드림핵 툴즈 사이트에서 한 번 더 받은 요청을 확인한다.

 

다음과 같이 드림핵에서 제공하는 실습 모듈을 통해 HTTP Leaks의 가젯 중 하나인 url을 이용하여 yellow; background: url("reqeustbin 주소/ping-back"); 를 넣고 요청한다.

 

 

개발자 도구의 network 탭에서 다음과 같이 ping-back이 잡히는 것을 확인할 수 있다.

 

또한 Request bin에 들어가보면 요청이 잘 온 것을 확인할 수 있다.

 

 

---

 

CSS Injection - 데이터 탈취

 

입력 박스 내용 탈취

CSS Injection을 통해 속성을 추가하거나 변경해보고, CSS Selector의 조건이 맞을 경우 외부 서버로 요청을 보내는 방법을 알아보았다. 이번에는 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]을 이용하면 입력 박스 내용을 탈취할 수 있다.

1. [attr^=value] 구문을 이용해 가장 첫 한 글자를 먼저 탈취한다.
2. 1에서 탈취한 글자를 접두사로 그 다음 한 글자를 탈취한다.
3. 1-2를 반복한다.