웹 애플리케이션을 개발하면서 가장 많이 간과되는 영역이 바로 보안입니다. 기능은 잘 작동하는데, 보안이 취약하면 사용자 정보가 유출되고, 기업 이미지가 손상되며, 법적 책임까지 이어질 수 있습니다. 이 글에서는 가장 대표적인 웹 보안 취약점인 XSS(Cross-Site Scripting)와 CSRF(Cross-Site Request Forgery)를 중심으로, 초보자도 이해할 수 있는 쉬운 설명과 실습 가능한 예제를 통해 보안 기초를 다져보려 합니다. 개발자, 기획자, 운영자 누구에게나 유용한 내용이 될 수 있습니다.
XSS란 무엇인가?
XSS는 Cross-Site Scripting의 약자로, 공격자가 웹페이지에 악성 스크립트를 삽입하여 사용자 브라우저에서 해당 스크립트를 실행시키는 공격입니다. 예를 들어 댓글, 게시글, 검색어 입력란 등 사용자 입력값이 그대로 출력되는 경우 공격자가 의도한 JavaScript가 실행될 수 있습니다. 이는 쿠키 탈취, 세션 하이재킹, 피싱 등 다양한 2차 공격으로 이어질 수 있습니다.
XSS 예시 시뮬레이션
예를 들어 다음과 같은 입력폼이 있다고 가정합니다.
<form method="GET">
이름: <input name="name">
<input type="submit">
</form>
그리고 서버가 다음과 같이 name 값을 그대로 출력한다고 해봅시다.
안녕하세요, <?= $_GET['name'] ?> 님
이 상태에서 공격자가 다음과 같이 입력한다면?
"><script>alert('XSS')</script>
페이지가 로드될 때 알림창이 뜨게 됩니다. 단순한 예시지만, 이 방식으로 쿠키나 로그인 세션을 훔칠 수도 있습니다.
XSS의 유형
- Stored XSS: 악성 스크립트가 DB에 저장되어 다수 사용자에게 노출
- Reflected XSS: URL에 포함된 스크립트가 즉시 반영되어 실행
- DOM-based XSS: 클라이언트 사이드 JavaScript가 DOM 조작을 통해 실행
방어 방법
- 모든 사용자 입력값은 HTML Escape 처리
- Content-Security-Policy 헤더 설정
- React, Vue 등 프레임워크 템플릿 엔진 적극 활용
CSRF란 무엇인가?
CSRF는 Cross-Site Request Forgery의 약자입니다. 사용자가 로그인된 상태에서 공격자가 의도한 요청을 몰래 수행하게 만드는 공격입니다. 즉, 사용자의 인증정보를 악용해, 의도치 않은 요청이 서버에 전달되며 피해가 발생합니다.
CSRF 실제 예시
- 사용자가 쇼핑몰에 로그인한 상태로 브라우저를 열어둡니다.
- 공격자가 만든 피싱 사이트에 접속합니다.
- 해당 사이트에 다음과 같은 이미지 태그가 포함되어 있습니다.
<img src="https://target.com/buy?item_id=123&amount=10">
이 요청은 브라우저가 자동으로 보내며, 사용자는 아무 것도 클릭하지 않아도 구매 요청이 발생합니다. 서버는 쿠키 인증만으로 요청을 처리하기 때문에, 공격자의 요청을 정상 요청으로 받아들이는 문제가 발생합니다.
CSRF의 특징
- 피해자는 로그인 상태의 사용자
- 요청은 자동 실행되며 사용자가 인지하지 못함
- 요청은 GET/POST 등 모든 방식 가능
방어 방법
- CSRF Token 사용: 서버에서 무작위 토큰 발급 및 검증
- Referer/Origin 헤더 검사
- SameSite 쿠키 설정: 크로스 도메인 전송 방지
XSS vs CSRF 차이 비교
| 구분 | XSS | CSRF |
|---|---|---|
| 공격 대상 | 사용자 브라우저 | 서버 |
| 피해자 | 사용자 개인 | 서비스 운영자 |
| 주요 기술 | JavaScript 삽입 | 세션 쿠키 악용 |
| 방어법 | 입력값 필터링 | CSRF Token 사용 |
실전 보안 습관 체크리스트
- 모든 입력값을 신뢰하지 말 것
- JSON.stringify, encodeURIComponent 적극 사용
- 출력 전 반드시 Escape 처리
- HTTPS는 선택이 아니라 필수
- 보안 헤더 설정 (CSP, HSTS, X-Frame-Options 등)
마무리: 보안은 사용자를 배려하는 개발자의 자세
보안은 선택이 아닙니다. 개발자가 보안까지 고려하는 순간, 더 신뢰받는 서비스를 만들 수 있습니다. XSS와 CSRF는 실무에서 자주 발생하는 공격 유형이며, 실수 한 줄이 사용자 정보 유출로 이어질 수 있습니다. 이 글을 통해 보안 기초를 익혔다면, 다음 단계는 직접 코드에 적용하고 테스트하는 것입니다. 보안은 어려운 기술이 아니라, 배려에서 시작하는 습관입니다.