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 |