번외. CSRF Token (React & Axios)

1. CSRF란 무엇인가?

 

CSRF(Cross Site Request Forgery)는 end user가 서버 내부 시스템에 직접적인 피해를 주도록 의도하는 행위를 의미한다. 여기서 "피해를 주도록 의도한다" 라는 부분이 중요한데 실제로 end user는 의도하지 않았지만 서버에 피해를 준 격이 되기 때문이다. 말로만 들으면 이해가 잘 되지 않으니 간단한 예시를 통해 알아보자.

 

<button href = "https://websiteToAttack:port/blah">
 즉시 100만원 지급 100% 당첨
</button>

이 버튼을 누른 사람은 분명 100만원을 받으려고 눌렀겠지만 아무도 모르는 사이에 href에 적힌 주소로 api call이 전송되고 실제로 서버에서 이 call을 처리하게 된다. 만약 악의를 품고 api call을 POST 또는 DELETE로 보낸다면 서버의 DB에 심각한 피해를 줄 수도 있다.

 

 

2. CSRF Token

 

CSRF Attack으로 인해 서비스가 마비되거나 메인 DB가 파괴되는 것을 막기 위해 CSRF Token을 이용한 protection 기법이 생겨나게 되었다. 이는 서버 내부의 데이터를 변경하는 일체의 행위를 CSRF Token으로 인증된 api call만 가능하도록 하는 방식으로 이루어진다.

 

우선 서버는 인증된 사용자에게 csrftoken을 setCookie의 형태로 response header에 담아 전송한다. 이를 받은 클라이언트는 이후부터 자신의 header와 cookie에 토큰을 담은 채로 api call을 하게 되고 서버는 이 토큰이 헤더에 포함되어 있는 경우에만 DB의 수정을 허가한다.

 

3. CSRF Protection in React(Axios)

 

리액트에서는 외부의 서버로 http 통신을 할때 주로 axios를 이용한다. axios로 call을 보내고 response를 받을때 csrf token을 설정해주어야 한다. 리액트와 axios는 아래 두 줄을 index.js에 추가하는 것만으로 모든 일을 해결해준다.

 

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';

위와 아래는 각각 csrf token을 담을 cookie의 이름과 header의 이름을 설정해주는 코드다. axios 모듈을 import한 후 axios의 defaults 부분을 수정하면 된다. 이때 각각 이름은 아무렇게나 지어서는 안되고 통신하는 서버의 setting과 일치해야한다. 위에서 정한 이름(csrftoken, X-CSRFToken)은 django의 기본 세팅에 맞추어 적은 것이다.