How to add CSRF token to Angular 8 post request from Django 2.2

Question

I have an application with Django backend and angular frontend. Now, these are connected with each other, I can get data from Django and show in Angular. As well Send a post request to Django.

But the issue is with CSRF token in Django. I disable the CSRF middleware in Django and the request process completely, but I know this is insecure.

Method to do a post request.

loadQuestion(id): Observable<any> {
    const body = {'choice': 'teseted with post method'};
    return this.http.post(this.baseUrl + id + '/vote', {headers: this.header, withCredentials: true, });
  }

I did some changes according to this link.

HttpClientXsrfModule.withConfig({ cookieName: 'csrftoken', headerName: 'X-CSRFToken' })

but I get this error.

app.module.ts:26 Uncaught TypeError: _angular_common_http__WEBPACK_IMPORTED_MODULE_3__.HttpClientXsrfModule.withConfig is not a function

So I changed it based on this Link

HttpClientXsrfModule.withOptions({ cookieName: 'csrftoken', headerName: 'X-CSRFToken' })

This is my Django function to return data, as I said when I disabled CSRF middleware is working fine So I should fix the CSRF issue and passing it with Angular request.

def vote(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    try:
        selected_choice = question.choice_set.get(pk=4)
    except (KeyError, Choice.DoesNotExist):
        # Redisplay the question voting form.
        return HttpResponse("You didn't select a choice.")
    else:
        selected_choice.votes += 1
        selected_choice.save()
        # Always return an HttpResponseRedirect after successfully dealing
        # with POST data. This prevents data from being posted twice if a
        # user hits the Back button.
        return HttpResponse(request)

Middleware code that I commented:

'django.middleware.csrf.CsrfViewMiddleware'

and the error is CSRF verification failed. Request aborted.

Update

I use the CORS Origin, here is my Django config

CORS_ORIGIN_ALLOW_ALL = True

CSRF_COOKIE_SECURE = False
CSRF_USE_SESSIONS = False

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'X-CSRFToken',
    'x-csrftoken',
    'X-XSRF-TOKEN',
    'XSRF-TOKEN',
    'csrfmiddlewaretoken',
    'csrftoken',
    'X-CSRF'
)

CORS_ALLOW_CREDENTIALS = True

Is angular application served on the same domain as Django? If no, then you really don't need csrf, you can just check origin (which will be always present on cross-origin requests). — GwynBleidD, Oct 07 '19 at 11:31
Angular is on `http://localhost:4200/` ang Django is on `http://localhost:8000/` — Nasser Ali Karimi, Oct 07 '19 at 11:50
@GwynBleidD I using Cross-Origin, I updated the question please check again. — Nasser Ali Karimi, Oct 07 '19 at 11:54

score 1 · Answer 1 · answered Oct 07 '19 at 10:12

1

You can wrap your view with csrf_exempt

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def vote():
...

"If you’re using AngularJS 1.1.3 and newer, it’s sufficient to configure the $http provider with the cookie and header names:"

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

answered Oct 07 '19 at 10:12

Oleksii Dubniak

227
2
7

Where should I put the second codes that you mentioned? – Nasser Ali Karimi Oct 07 '19 at 10:30
I use angular 8 – Nasser Ali Karimi Oct 07 '19 at 10:47

score 0 · Answer 2 · answered Oct 07 '19 at 11:58

So I use this library called ngx-cookie, link for it. Install it & then add this in you service.ts.

import {CookieService} from 'ngx-cookie';

constructor(private http: HttpClient, private _cookieService: CookieService) {
  let csrf = this._cookieService.get("csrftoken");
  if (typeof(csrf) === 'undefined') {
    csrf = '';
  }
  this.httpOptions = {
    headers: new HttpHeaders({'X-CSRFToken': csrf}),
  };
}

public postCall(payload){
  return this.http.post('/yourapi/', payload, this.httpOptions);
}

Explaination:

let csrf = this._cookieService.get("csrftoken");

this line is getting the csrf token from the cookie

 headers: new HttpHeaders({'X-CSRFToken': csrf}),

this line adds that value of csrf into the HttpHeaders.

this.http.post('/yourapi/', payload, this.httpOptions);

while making the post call we're using these headers

How to add CSRF token to Angular 8 post request from Django 2.2

2 Answers2

Linked