인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

정영헌님의 프로필 이미지
정영헌

작성한 질문수

Vue.js - Django 연동 웹 프로그래밍 (실전편)

csrf 토큰 관련 질문입니다!

작성

·

1K

0

안녕하세요. 좋은 강의 감사합니다.

최초 회원가입을 위해 [POST] /api/register 요청 시, csrf 관련 403 에러가 발생합니다.
요청 시, 헤더에 쿠키 값이 없어서 그런듯 합니다만,,,,
([GET] /api/me 요청은 인증 쿠키가 저장되어 있지 않아도 정상적으로 응답됩니다.)

Django 관리자 페이지 로그인 이후에는 회원 가입, 로그인 등 기능들이 정상 동작 합니다.
관리자 페이지 로그인 과정에서 토큰 관련 쿠키 값이 클라이언트에 저장되어 있어서 그런 듯 합니다.
크롬 개발자 도구 내에서, Network 탭 내 Reqeuest Header에 보면, X-CSRFToken 값이 잘 들어가 있습니다.
쿠키를 수동으로 삭제하고 다시 로그인 또는 회원가입 시도를 하면 403 응답이 됩니다.


브라우저 상에서, 토큰 관련 쿠키 값이 존재하지 않는 상태 즉, 
사용자가 최초로 진입하여 회원 가입 및 로그인을 시도하는 경우, 403 응답 에러가 발생할 듯 합니다.

Q1. 회원 가입할 때는 인증 쿠키 관련 403 응답 에러가 오면 안되지 않나요?
(최초 회원가입 및 로그인 시에는 Client-side에 쿠키 값이 저장되어 있지 않은 상황이 있을 것 같아서 입니다.)

Q2. 로그인 이후에, 쿠키에 토큰 값이 저장되는데, 로그아웃 후에 해당 계정 관련 쿠키를 삭제해주는 것이 맞지 않나요?

감사합니다.

답변 4

1

김석훈님의 프로필 이미지
김석훈
지식공유자

안녕하세요. 독자님.

Q1. 독자님 의견이 맞습니다.

최초에 브라우저에 csrf token 이 없는 상태에서 POST 요청시 에러가 나겠군요.

장고는 이런 경우를 대비해서, ensure_csrf_cookie 데코레이터를 제공하고 있습니다. csrf token을 생성해주는 데코레이터 입니다.

우리는 3개 페이지를 갖고 있으므로 각 페이지를 보여주는 뷰에, 아래처럼 데코레이터를 적용하면 됩니다.

from django.utils.decorators import method_decorator

from django.views.decorators.csrf import ensure_csrf_cookie

@method_decorator(ensure_csrf_cookie, name='dispatch')

class HomeView(TemplateView):

    (이하 동일)

* PostListTV(TemplateView), PostDetailTV(TemplateView) 에도 동일하게 적용 바랍니다.

Q2. 아닙니다. 로그인, 로그아웃은 csrftoken 이 아니라, sessionid 쿠키를 사용하므로, 현재 소스가 맞습니다.

감사합니다.

0

김석훈님의 프로필 이미지
김석훈
지식공유자

이것도 독자님 의견이 맞습니다. 좋은 지적 감사합니다.

최종 소스에서는 불필요하지만,

devServer 만으로 테스트하기 위한 임시 코드가 필요하겠네요. 아래처럼 해보세요.

------------------------------------------------------------

~/api/views.py 파일의 ApiPostLV(BaseListView) 에도 데코레이터를 적용한 후에,

POSTLIST 메뉴를 한번 클릭하면 csrf token 이 생성됩니다.

0

정영헌님의 프로필 이미지
정영헌
질문자

강사님 한가지 이슈가 더 있는 듯 한데요,
강사님 말씀대로 Decorator를 추가하니 Prod 버전에서는 문제 없이 잘 동작합니다.

그러나 Webpack Devserver 로 개발모드로 진행 시에, 동일한 csrf 관련 403 응답이 발생하는데요,
마찬가지로 CSRF 관련 쿠키 값이 존재하지 않습니다.

제 생각에는 Devserver 동작 시, 서버 사이드 쪽에서 Serving한 템플릿을 바라보는 것이 아니고,
다른 영역(ex. 메모리)에 올라간 템플릿을 바라보아서 Decorator 가 안먹히는 듯 한데요,
(이렇게 생각한 이유는 Hot reloader 등 이러한 기능이 동작하려면 메모리 상에 존재하지 않을까? 해서 입니다.)

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

Frontend 소스에 해당 코드가 존재함에도 같은 이슈가 발생하네요.
Axios를 테스트로 Window 전역 객체에 저장해서 확인했을 때, 상기 위 값이 아래와 같이 잘 반영되어 있습니다.

개발 모드로 Devserver 운용 시에는, csrf 관련 토큰을 강제 또는 수동(관리자 페이지 진입 후, 작업 등)으로 해야만
가능한가요??

아니면 혹시 다른 방법이 있는지 궁금합니다.
개인적으로도 서칭 해보겠습니다.

감사합니다!

0

정영헌님의 프로필 이미지
정영헌
질문자

친절하고 자세한 답변 감사합니다.

정영헌님의 프로필 이미지
정영헌

작성한 질문수

질문하기