"Vue.js + axios + django CSRF 토큰 설정 맞추기"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(다른 사용자 한 명의 중간 판 6개는 보이지 않습니다)
2번째 줄: 2번째 줄:
;axios + django CSRF 토큰 설정 맞추기
;axios + django CSRF 토큰 설정 맞추기
;vue.js + axios + django CSRF 토큰 설정 맞추기
;vue.js + axios + django CSRF 토큰 설정 맞추기
* 백엔드에서 쿠키로 CSRF 토큰을 발급하고
* 백엔드에서 쿠키로 CSRF 토큰을 발급하고..
* 프론트엔드에서 그 쿠키를 가지고 axios 호출시에 Header로 보내도록 한다.
* 프론트엔드에서 그 쿠키를 가지고 axios 호출시에 Header로 보내도록 하자.
* 이렇게 하면 한번의 설정만으로 간편하게 CSRF 검사를 통과할 수 있다.
* 이렇게 하면 한번의 설정만으로 간편하게 CSRF 검사를 통과할 수 있다.
:→ axios.post 전에 axios.get으로 토큰을 먼저 받아오는 수고를 하지 않아도 된다.
:→ axios.post 전에 axios.get으로 토큰을 먼저 받아오는 수고를 하지 않아도 된다.


{| class='wikitable'
{| class='wikitable'
|+ 기본 설정 (서로 맞지 않음)
|+ 설정 기본값 (서로 맞지 않음)
|-
|-
! 구분 !! 백엔드(django) !! 프론트엔드(axios) !! 비고
! 구분 !! 백엔드(django) !! 프론트엔드(axios) !! 비고
|-
|-
| 쿠키명 || csrftoken || XSRF-TOKEN || 백엔드 → 프론트엔드
! 쿠키명
| <code>csrftoken</code> || <code>XSRF-TOKEN</code> || 백엔드 → 프론트엔드
|-
|-
| 헤더명 || HTTP_X_CSRFTOKEN || X-XSRF-TOKEN || 프론트엔드 → 백엔드
! 헤더명
| <code>HTTP_X_CSRFTOKEN</code> || <code>X-XSRF-TOKEN</code> || 프론트엔드 → 백엔드
|}
|}


==방법 1==
==방법 1: 프론트엔드 설정==
* Vue.js (axios)의 설정(  아마도 main.js )을 django 설정에 맞춘다.<ref>https://docs.djangoproject.com/en/3.0/ref/csrf/#setting-the-token-on-the-ajax-request
* Vue.js (axios)의 설정(  아마도 main.js )을 django 설정에 맞춘다.<ref>https://docs.djangoproject.com/en/3.0/ref/csrf/#setting-the-token-on-the-ajax-request
</ref>
</ref>
<source lang='javascript'>
<syntaxhighlight lang='javascript'>
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
</source>
</syntaxhighlight>


==방법 2==
==방법 2: 백엔드 설정==
* django의 설정( settings.py )을 Vue.js (axios)의 설정에 맞춘다.<ref>https://github.com/axios/axios#request-config</ref>
* django의 설정( settings.py )을 Vue.js (axios)의 설정에 맞춘다.<ref>https://github.com/axios/axios#request-config</ref>
<source lang='python'>
<syntaxhighlight lang='python'>
CSRF_COOKIE_NAME = 'XSRF-TOKEN'
CSRF_COOKIE_NAME = 'XSRF-TOKEN'
CSRF_HEADER_NAME = 'X-XSRF-TOKEN'
CSRF_HEADER_NAME = 'X-XSRF-TOKEN'
</source>
</syntaxhighlight>


==같이 보기==
==같이 보기==
38번째 줄: 40번째 줄:


[[분류: CSRF]]
[[분류: CSRF]]
[[분류: django]]
[[분류: axios]]
[[분류: vue.js]]

2020년 11월 2일 (월) 02:52 기준 최신판

1 개요[ | ]

axios + django CSRF 토큰 설정 맞추기
vue.js + axios + django CSRF 토큰 설정 맞추기
  • 백엔드에서 쿠키로 CSRF 토큰을 발급하고..
  • 프론트엔드에서 그 쿠키를 가지고 axios 호출시에 Header로 보내도록 하자.
  • 이렇게 하면 한번의 설정만으로 간편하게 CSRF 검사를 통과할 수 있다.
→ axios.post 전에 axios.get으로 토큰을 먼저 받아오는 수고를 하지 않아도 된다.
설정 기본값 (서로 맞지 않음)
구분 백엔드(django) 프론트엔드(axios) 비고
쿠키명 csrftoken XSRF-TOKEN 백엔드 → 프론트엔드
헤더명 HTTP_X_CSRFTOKEN X-XSRF-TOKEN 프론트엔드 → 백엔드

2 방법 1: 프론트엔드 설정[ | ]

  • Vue.js (axios)의 설정( 아마도 main.js )을 django 설정에 맞춘다.[1]
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

3 방법 2: 백엔드 설정[ | ]

  • django의 설정( settings.py )을 Vue.js (axios)의 설정에 맞춘다.[2]
CSRF_COOKIE_NAME = 'XSRF-TOKEN'
CSRF_HEADER_NAME = 'X-XSRF-TOKEN'

4 같이 보기[ | ]

5 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}