[security] XSS 공격

🐞 XSS

XSS(Cross-Site Scripting)는 공격자가 신뢰할 수 있는 웹사이트(유명한 사이트 혹은 내가 만든 사이트)에 스크립트를 삽입하여 다른 사용자 브라우저에서 작동 시키는 공격

🐞 XSS 공격의 종류

1. Stored XSS(저장형)

대표적인 예시로 게시판에 공격자가 스크립트를 작성하여 게시판에 저장하고 그걸 다른 사용자들이 보는 순간 작동시키는 공격

내가 게시판에 스크립트를 작성하고 게시판에 저장하면 다른 사용자들이 보는 순간 알람으로 “당신의 정보가 털렸어요”가 실행됨.

2. Reflected XSS(반사형)

url을 그대로 보여주는 사이트가 있다면 공격자가 스크립트를 url에 추가하여 다른 사용자들이 보는 순간 알람으로 “당신의 정보가 털렸어요”가 실행됨.

http://example.com/search?q=<script>alert(“당신의 정보가 털렸어요”)</script>

url창을 보면 변한걸 알 수 있음.

3. DOM-based XSS(돔 기반)

DOM 객체를 제어하는 과정에서 스크립트로 공격하는 방법. url 이후 해시값으로 공격하는 스타일임.

🐞 반사형과 DOM-based의 차이

먼가 유사하게 보인다. 하지만, 악성 스크립트를 심는 시점이 다르다.

반사형은 일단 한번 서버에 전달되어야함.

🚀 반사형 공격 흐름

1. 사용자 클릭 - 악성 링크 클릭
2. 서버 전달 - 요청이 서버로 전송
3. 검증 생략 - 서버에서 입력값 검증 없이 응답
4. 악성 코드 실행 - 브라우저가 응답을 스크립트로 해석하여 실행

DOM-based는 별도의 서버 요청이 없음.

🚀 DOM-based 공격 흐름

1. 사용자 클릭 - 악성 링크 클릭
2. 정상 HTML 응답 - 서버에서 정상적인 HTML 문서 응답
3. 클라이언트 측 처리 - 브라우저가 JavaScript 실행
4. URL 파싱 - JavaScript가 URL의 해시(#) 부분에서 악성 스크립트 추출
5. DOM 조작 - 추출한 스크립트로 DOM 조작
6. 악성 코드 실행 - 조작된 DOM을 통해 악성 스크립트 실행

🏥 대처법

XSS 같은 클라이언트 측 보안 문제는 입력 검증과 출력 이스케이핑으로 해결한다. 사용자 입력은 서버·클라이언트 양쪽에서 검증하고, HTML로 출력할 때는 특수 문자를 반드시 이스케이프 처리해야한다.

1. 안전한 입력 검증

innerHTML로 그대로 넣지 말고 텍스트 전용 API를 사용하거나, HTML을 허용해야 할 때는 검증된 sanitizer를 사용.

// ❌ 잘못된 방법 (취약)
element.innerHTML = userInput;

// ✅ 올바른 방법 (자동 이스케이프)
element.textContent = userInput;

// ✅ HTML이 필요한 경우 (검증된 sanitizer 사용)
import DOMPurify from 'dompurify';

element.innerHTML = DOMPurify.sanitize(userInput);

특히, 위험한 DOM API는 사용하지 않는게 좋다.

// ❌ 위험한 DOM API
innerHTML, insertAdjacentHTML, document.write, eval, new Function

2. Content-Security-Policy (CSP)

CSP를 도입하면 브라우저 차원에서 실행 가능한 스크립트 소스를 제한 가능. 헤더 또는 메타 태그 방식으로 적용하면 된다.

<!-- 예: 메타 태그 방식 (실무에서는 HTTP 헤더로 설정 권장) -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com;">

3. 세션 보호 — HttpOnly 쿠키

세션 쿠키에 HttpOnly(및 Secure, SameSite) 플래그를 설정하면 자바스크립트에서 쿠키를 읽지 못하게 해 세션 탈취 위험을 줄이면 됨.

Set-Cookie: sessionId=...; HttpOnly; Secure; SameSite=Strict

4. 프레임워크/템플릿 사용 권장

사람은 누구나 실수한다. 그래서 이미 만들어진 프레임워크나 템플릿을 사용하는 것이 좋다. react, vue, angular 등 주요 프레임워크는 기본적으로 출력 이스케이프를 제공함.