bestsource

장고 CSRF 토큰 + Angularjs

bestsource 2023. 3. 20. 23:23
반응형

장고 CSRF 토큰 + Angularjs

mod_wsgi를 사용하여 아파치 서버에서 실행 중인 django와 django가 아닌 angularjs 앱을 가지고 있습니다.django 서버(rest_framework 실행)에 POST 콜을 하고 싶은데 csrf 토큰에 문제가 있습니다.

서버로부터 토큰을 설정할 수 있는 방법이 있습니까?{% csrf token %}템플릿의 일부로서 (이 페이지들은 django를 통과하지 않기 때문에)

  1. 쿠키로 GET 요청을 통해 CSRF 토큰을 얻을 수 있으면 좋겠습니다.
  2. 그러면 csrf token cookie 값으로 django 서버에 POST 요청을 할 수 있으면 좋겠습니다.

장고와 앵귤러JS 모두 CSRF를 이미 지원하고 있기 때문에 매우 간단합니다.

먼저 Django에서 CSRF를 활성화해야 합니다.이미 활성화 되어 있는 경우는 Django doc https://docs.djangoproject.com/en/1.5/ref/contrib/csrf/ #snowledge를 참조해 주세요.

이제 장고가 쿠키 세팅을 하겠습니다.csrftoken첫 번째 GET 요구로 커스텀HTTP 헤더가 필요합니다.X-CSRFToken나중에 POST/PUT/DELETE 요청 시.

Angular의 경우 이름이 지정된 쿠키를 예상합니다.XSRF-TOKENPOST/PUT/DELETE 요구를 실행한다.X-XSRF-TOKENheader를 사용하기 위해서는 약간의 조정이 필요합니다.

$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';

js 코드의 어딘가에 위의 두 줄을 추가합니다.module.config() block은 이를 위한 적절한 장소입니다.

바로 그겁니다.

메모: 이것은 각도 1.1.5의 경우 이전 버전에서는 다른 접근법이 필요할 수 있습니다.

업데이트:

앵귤러 앱은 django가 제공하지 않기 때문에 쿠키를 설정하기 위해서는 앵귤러 앱이 먼저 django에게 GET 요청을 해야 합니다.

var foo = angular.module('foo', ['bar']);

foo.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);

$http가 사용된 모든 모듈 서비스와 컨트롤러는 CSRF 토큰을 사용하여 요청을 보냅니다.

찾아본 결과, 이 투고로부터 다음과 같은 코드를 얻을 수 있었습니다.

angular.module( '[your module name]',
    ... [some dependencies] ...
    'ngCookies',
    ... [other dependencies] ...
)
.run( function run( $http, $cookies ){

    // For CSRF token compatibility with Django
    $http.defaults.headers.post['X-CSRFToken'] = $cookies.get('csrftoken');
})

이는 물론 django 서버에서 GET 요청을 통해 쿠키를 받은 후입니다.

Ye Liun의 답변을 포함한 다른 답변도 검토했지만 공식 문서에서는 $http Provider의 xsrf 기본 옵션에 대한 변경을 명시하는 내용을 찾을 수 없었습니다.이 요청은 제가 이 투고를 쓸 때 통하지 않았습니다.

Angular를 위한 장고 앱을 만들었습니다.JS 앱은 my (REST) API Django App과 동일한 Django 프로젝트에서 index.html 파일(sym.link에 불과)만을 제공합니다.이와 같이 CSRF Cookie는 추가 GET 요구 없이 설정됩니다.

Angular에 대한 제 답변을 봐주세요.CORS 및 CSRF 보호를 사용하여 서브도메인 B의 Django JSON(REST) API와 통신하는 서브도메인 A의 JS 싱글 페이지 웹 애플리케이션

javascript 액세스를 허용하지 않도록 쿠키를 설정한 경우 다음을 수행해야 합니다.템플릿에서 django 앱을 만들기 전에 다음을 추가합니다.

<script>
    window.csrf_token = "{{ csrf_token }}";
</script>

각도 앱에서 다음을 추가합니다.

angularApp.config(["$httpProvider", function($httpProvider) {
    $httpProvider.defaults.headers.common["X-CSRFToken"] = window.csrf_token;
}]);

적어도 Django 1.9에서는 CSRF 토큰은 각 요구에 따라 변경되지 않습니다.사용자가 로그인 할 때만 변경됩니다.한 페이지 각도 앱을 실행하는 경우 로그인/로그아웃 시 토큰을 재설정해야 합니다. 그러면 정상적으로 작동합니다.

메모: 현재 Django 1.10 이후에서는 CSRF 토큰이 요청마다 변경되므로 이 기능은 작동하지 않습니다.CSRF_COOKIE_HTTPONLY를 사용한 Angular로의 장고 CSRF 토큰 전달을 참조하십시오.

언급URL : https://stackoverflow.com/questions/18156452/django-csrf-token-angularjs

반응형