CSRF COOKIE HTTPONLY를 사용하는 AngularJS 및 Django

Django에서 CSRF_COOKIE_HTTPONLY가 활성화된 경우 javascript는 CSRF 쿠키에 액세스할 수 없으므로 쿠키 내에서 CSRF 토큰을 가져올 수도 없습니다. 다음은 AngularJS 내에서 Django 인증을 처리한 방법입니다.

해결책

개발자들이 바쁘다는 것을 알기 때문에 해결책은 포스팅 상단에 올려놓고 그 이후에 자세하게 설명하도록 하겠습니다.

다음Django document 에서 쿠키가 http 전용인 경우 AngularJS 또는 모든 javascript가 쿠키 대신 DOM에서 CSRF 토큰을 가져올 수 있습니다.

1단계: Django 미들웨어가 HTML DOM에 토큰을 넣을 수 있도록 정적 html에 태그를 넣습니다.

# Django put CSRF token to DOM
{% csrf_token %}

2단계: 인터셉터를 구현하여 DOM에서 CSRF 토큰을 가져옵니다.

import { Injectable } from '@angular/core';
import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DjangoCSRFInterceptor implements HttpInterceptor {
  intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = (
      document.querySelector('[name=csrfmiddlewaretoken]') as HTMLInputElement
    ).value;
    return httpRequest.clone({ headers: httpRequest.headers.set('X-CSRFToken, token) });
  }
}

3단계: Angular 모듈 공급자에 HttpInterceptor 넣기

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: DjangoCSRFInterceptor, multi: true }
]

이제 각도 코드는 CSRF 토큰을 가져오고 요청을 입력할 수 있어야 합니다.

장고 CSRF_COOKIE_HTTPONLY

CSRF_COOKIE_HTTPONLY는 CSRF 쿠키에 대해서만 http를 활성화하는 플래그입니다. http는 보안을 위한 최선의 방법이지만 Django Foundation에서는 실질적인 보호 기능을 제공하지 않으며 개발자가 이 플래그를 해제하도록 권장합니다.

그러나 CSRF 쿠키로만 http를 활성화해야 하는 데에는 여러 가지 이유가 있습니다. 내 경우의 이유 중 하나는 내 보안 감사자가 위험하므로 수정해야 한다고 보고했기 때문입니다.

각도 HttpInterceptor는 무엇입니까

Angular에서 인터셉터를 사용하면 http 요청 또는 응답을 가로챌 수 있습니다. 요청/응답을 가로채서 원하는 대로 컨텍스트를 수정할 수 있습니다.

이상적으로는 인터셉터를 구현하여 헤더에 추가X-CSRFToken할 수 있습니다. 그리고 Django는 이 요청을 수락할 것입니다.

결론

결론적으로 이 게시물은 CSRF_COOKIE_HTTPONLY가 활성화되었을 때 각도 요청을 처리한 방법에 대한 참고 사항일 뿐이라는 점에 유의하고 싶습니다. 대부분의 경우 이 플래그를 기본값(False)으로 두어야 합니다. 하지만 활성화해야 하는 경우 이 게시물이 시간을 절약할 수 있기를 바랍니다.

행복한 나눔, 행복한 Code with Beer🍺🍺🍺!!!