본문 바로가기

WebDev

DRF + CORS + CSRF + AJAX 하에서 개발하기

DRF + CORS + CSRF + AJAX 하에서 개발하기



일반적인 개발에서는 csrf token관리를 자세히 알 필요가 없다. 대충 템플릿에 csrf잘 새겨넣으면 끝이다.

하지만 다른 도메인, AJAX를 써야하는 환경에서는 좀 골치가 아프다.


유저가 접속할 SPA의 도메인은 www.mysite.com이고,

SPA의 모든 기능을 제공하는 서버의 도메인을 api.mysite.com이라 가정한다.


이럴 경우, 해야할 설정이 한둘이 아닌데 하나하나 해결해보자


CORS 해결


먼저 django-cors-headers를 설치해야 한다. (자세한 내용은 해당 홈페이지에서 확인하자)

이 미들웨어는 Access-Contorl-Allow-로 시작하는 각종 http 헤더를 쉽게 관리 가능케 한다.


1. 설치하자

pip install django-cors-headers


2. django에 등록하자

2.1. 앱을 등록하자

INSTALLED_APPS = (
'corsheaders',
)


2.2. 미들웨어를 등록하자

MIDDLEWARE_CLASSES = (
'django.middleware.common.CommonMiddleware',
'corsheaders.middleware.CorsMiddleware',
)


3. Credentials를 수용하도록 해놓자

CORS_ALLOW_CREDENTIALS = True


4. Origin을 설정하자


개발용. 묻지도 따지지도 않고 모두 허락

CORS_ORIGIN_ALLOW_ALL = True

deploy용 설정. 지정된 호스트만 허락

CORS_ORIGIN_WHITELIST = (
'www.mysite.com',
'www.anothersite.com'
)






CSRF 해결


Backend가 할 일

1. Middleware 구현 및 추가

class CsrfCookieToHeader(object):
def process_request(self, request):
csrftoken = request.COOKIES.get('csrftoken')
if csrftoken:
request.META['HTTP_X_CSRFTOKEN'] = csrftoken

csrftoken 관리가 좀 꼬여있으니 이걸 고치는 미들웨어를 구현하고, 등록하자

MIDDLEWARE_CLASSES = (
'phople.middleware.CsrfCookieToHeader',
)

모듈 이름은 적절히 수정하자.




Frontend가 할 일

$('#logout').click(function () {
$.ajax(host + 'logout', {
type: 'delete',
data: $('#form-logging').serialize(),
complete: function (data, status, xhr) {
$('#input').val(data);
},
xhrFields: {withCredentials: true,}
})
});

xhrFields: {withCredentials: true,}를 항상 ajax요청에 명시해야 한다. 그래야 세션과 csrftoken을 포함한 쿠키가 잘 전송된다







'WebDev' 카테고리의 다른 글

Pynamodb Basic Tutorial  (0) 2016.01.25
DRF file upload (파일 업로드)  (0) 2016.01.23
django login 정리  (0) 2016.01.21
django CSRF disable (CSRF 해제)  (0) 2016.01.20
django class-based view  (0) 2016.01.15