XSS와 CSRF

0. 들어가며

JWT를 관리하는 방안을 고민중 XSS와 CSRF에대한 언급이 많이 나왔다. 이 두가지에 대해 알아보고 어떻게 방어해야하는지 알아보자.

1. XSS

(1) XSS는 무엇인가?

내가 이해한 XSS의 핵심은 일반 웹사이트에서 악성 스크립트를 유저가 실행하여 정보를 탈취하는 것이다. 해커는 어떤 커뮤니티에 게시글을 쓰는데 그 게시글에 악성 스크립트를 삽입한다. 유저는 해당 게시글을 상세조회하면서 악성 스크립트를 실행하게 된다.(Stored XSS)

또는 해커는 악성 스크립트를 삽입한 다음과 같은 URL을 유저가 클릭하도록 한다.
http://normal.web.site/?q=<script>alert("XSS")</script>&x=0&y=0, 이렇게하면 해당 일반 웹사이트에서 해당 스크립트가 실행된다.(Reflected XSS)
이때 해커는 URL 클릭 유도가 목표이므로 이메일 또는 해커 자체 웹사이트를 통해서 공격이 가능하다.

(2) XSS를 어떻게 방어해야하는가?

XSS를 방어하려면

1. 악성 스크립트를 실행하지 못하도록 해야한다.

• innerHTML 사용 자제(하지만, HTML5에서는 더 이상 innerHTML 내부의 스크립트는 실행되지 않음)
• 악성 스크립트의 <, >와 같은 특수문자를 서버에서 치환할 수 있다.

2. 실행되어도 정보를 못가져가도록 해야한다.

• 로컬 스토리지와 세션 스토리지에는 민감한 정보를 저장하지 않는다.
• 쿠키는 httpOnly 옵션을 사용하여 해커의 악성 스크립트가 접근하지 못하도록 한다.

나는 이번 프로젝트에서 cookie를 사용하기 때문에 httpOnly 옵션을 사용하여 XSS를 방어하였다.

(3) React에서는 XSS를 기본적으로 방어하고 있다.

React에서는 JSX에 삽입된 값을 렌더링하기 전에 escape를 하기 때문에 XSS를 방어할 수 있다.

특정 문자를 원래의 기능에서 벗어나게 변환하는 행위를 이스케이프(Escape)라고 한다.
&은 &로
<은 <로
>은 >로
"은 "로
띄어쓰기는  로

즉 해커의 악성 스크립트들은 원래 기능을 하지 못하고 문자열인 채로 렌더링된다.
React XSS Guide

2. CSRF

(1) CSRF는 무엇인가?

내가 이해한 CSRF의 핵심은 일반 웹 사이트에서 일반 웹 서버로 원하지 않는(해커가 의도하는) 요청을 보내는 것이다.
유저는 은행 웹사이트에 로그인한 상태이고 브라우저에는 로그인 정보가 저장되어있다. 이때, 해커는 피해자의 100만원을 해커에게 송금하는 요청을 로그인 정보와 함께 은행 서버로 보내도록 유도한다.

CSRF 공격은 어디에서나 일어날 수 있다.
해커 자체 웹사이트일 수도 있고, 일반 웹사이트에 삽입된 악성 스크립트일 수도 있다.
요점은 해커가 의도한 요청을 마치 유저가 의도한 것처럼 서버를 속이는 것이다.

(2) CSRF를 어떻게 방어해야하는가?

쿠키 관리시 same site 옵션을 사용하여 내 도메인에서만 사용할 수 있도록 하였다. 이러면 해커의 웹 사이트에서 내 웹 사이트로 쿠키를 전송할 수 없으므로 CSRF 공격을 방어할 수 있다.
다만 우리 사이트 자체에 악성 스크립트가 삽입되어 CSRF 공격을 하는 경우는 방어할 수 없다. 하지만 이는 리액트 자체에서 방어하고 있다고 판단하였다.

3. 마치며

cookie를 사용하되 XSS는 httpOnly 옵션을 사용하여 방어하고 CSRF는 same site 옵션을 사용한다.
이러면 정보를 탈취하는 XSS 공격은 막을 수 있고, 해커의 웹사이트로부터 CSRF 공격을 방어할 수 있다.
내 웹사이트에 악성 스크립트를 삽입하여 CSRF 공격을 하는 것은 리액트에서 기본적으로 방어하고 있다고 판단하였다.
그럼에도 보안에 가장 신경써야 할 Access Token은 전역 상태로 관리하도록 하였다. 보안은 보수적으로 접근하는 것이 좋다고 생각하기 때문이다.