CSS(Style) Injection

CSS Injection은 XSS나 HTML Injection과 같이 웹 상에서 CSS, 즉 스타일 시트에 Injetion이 가능한 경우를 의미합니다. 보통 사용자에게 직접적인 영향력이 있는건 아니지만, 스타일 시트 제어를 통해서 매핑된 이벤트 핸드러를 통해 XSS나 다른 기능을 수행시키거나 교모한 피싱 페이지를 구성하는데 사용할 수 있습니다.

자세한 내용은 아래 링크를 읽어주세요.

• OWASP WSTG - CSS Injection
• Portswigger Issue Define - CSS Injection

보통 HTML 등을 허용하는 서비스에서는 이러한 부분을 쉽게 공격하지 못하도록 사용자가 추가한 데이터에서 class 속성을 제한하고, 페이지 전체적으로 영향을 줄 수 있는 position 값에 대해 정밀하게 검증하곤 합니다.

예를들면 position:fixed를 사용할 수 있는 경우 페이지 전체 레이아웃에 공격자가 의도한 객체를 보여주게 할 수 있게되겠죠. 이는 곧 사용자가 기능 버튼등을 클릭할 때 공격자가 의도한 앵커 태그등으로 연결시킬 수 있는 포인트가 됩니다.

Bypass Trick

CSS에서 색상등의 값은 매번 복사하여 사용하기 불편하고 또한 값이 의미하는 색상을 매번 찾아보거나 하기 어렵습니다. (물론 최근 IDE들은 표기해주긴 합니다.)

그래서 CSS 내부에서도 변수 개념이 존재하는데요 --로 시작하는 이름을 지정하면 변수를 선언할 수 있고 이를 나중에 var() 함수로 가져올 수 있습니다.

:root {
	--gray-900: #111827;
	--dark-bg: #313348;
}
.dark-button {
	color: white;
	background: var(--dark-bg);
}

이를 활용하면 position: fixed를 분리해서 저장할 수 있습니다. 만약 아래와 같이 position: fixed 를 제한하는 경우..

.main {
	position: fixed;
	top: 0;
	left: 0;
}

=> filtered

이러한 형태로 position과 fixed를 분리해주면 검증하는 로직이 쉽게 파악하기가 어려워집니다.

.main {
	--hahwul: fixed;
	position: var(--hahwul);
	top: 0;
	left: 0;
}

=> Passed