React에서 csrf token 사용하기(with Django restframework)

React는 node모듈 위에서 동작하는 프론트엔드 라이브러리이다.

Django 등의 API를 끌어다가 웹뷰를 구현할 수 있는데, 구현만 하면 뭐하겠는가. 결국 CRUD 기능은 최소한으로 동작하여야할 것이다.

대부분의 웹 프레임워크에서 csrf 공격을 방어하기 위한 수단이 갖춰져있는데, 이는 Django도 동일하다. Django와 template engin기반의 개발환경이라면, <form>안에 {% csrftoken %}작성 하나로

<input type="hidden" name="csrfmiddlewaretoken" value="~~~~~"/>

이란 코드가 자동으로 생성되지만, React의 장점인 템플릿엔진의 배제가 단점으로 돌아와서 해당 토큰을 컴포넌트화하는 코드를 직접 작성해주어야한다.

//csrftoken.js
import axios from 'axios';
import React from 'react';

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].replace(' ', '');
          //var cookie = jQuery.trim(cookies[i]); 당신이 만약 jQuery를 사용한다면, 위 코드 대신 이 코드를 사용하여도 좋다
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const CSRFToken = () => {
    const csrftoken = getCookie('csrftoken');
    return(
        <input type="hidden" name="csrfmiddlewaretoken" value={csrftoken}/>
    )
};

export default CSRFToken // 이걸로 <CSRFToken/>이라는 컴포넌트를 사용할 수 있게 됨.

이제 Django template의 {% csrftoken %}처럼, React의 <CSRFToken />을 활용하면 된다.