Getting and inserting the value of a CSRF cookie set by Django in Angular

Question

I'm having some trouble getting the CSRF integration between Django and Angular to work. I made an earlier broader post about that here.. The problem is that logged in users can't make post-requests from the front-end, but they can make the exact same requests from Django's browsable API through forms.

I'm setting a {% csrf_token %} at the index template that Django serves and I am using Angular's built it XSRFS strategy to set attack a header to http requests, but I think the problem is that I'm not catching the value provided by Django's generated csrf token and can't figure out how to implement gathering that data and attaching it to my Angular http-request cookies. Here's the code for the module that provides the strategy:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http'

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { AlertComponent } from './_directives/alert.component';
import { ProfileComponent } from './profile/profile.component';
import { AuthGuardService } from './_guards/auth-guard.service';
import { AlertService } from './_services/alert.service';
import { AuthService } from './_services/auth.service';
import { UserService } from './_services/User.service';

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent,
    LoginComponent,
    AlertComponent,
    ProfileComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    HttpModule
  ],
  providers: [
    {
      provide: XSRFStrategy,
      useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

And here is the output from the browser with the csrf-value that I think I need to attach somehow:

<input type='hidden' name='csrfmiddlewaretoken' value='9FKUKSXHbJfLClZniDXIHrMu2AEUtPQr4mGDfNSOZURHYVyKGBYvREIuucN0UsEM' />
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularWebapp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>

<script type="text/javascript" src="/static/runtime.js"></script><script type="text/javascript" src="/static/polyfills.js"></script><script type="text/javascript" src="/static/styles.js"></script><script type="text/javascript" src="/static/vendor.js"></script><script type="text/javascript" src="/static/main.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

score 1 · Accepted Answer · answered May 25 '18 at 15:24

1

Make sure that "csrfmidlewaretoken": {{csrf_token}} is submitted with the form.

Make sure {% csrf_token %} is inside <form></form> tags. If you are posting the data with ajax, add "csrfmidlewaretoken": {{csrf_token}} to your form data that is submitted.

answered May 25 '18 at 15:24

Dasith

363
2
13

That's the thing, since Django only processes the index.html I can't attach a {% csrf_token %} to any forms outside of the home page. However, since the value changes each time a new template is loaded it might be fine? I'm going to try to append that to my form data. – Marcus Grass May 25 '18 at 15:46
Turns out the value does not change, and adding "csrfmiddlewaretoken":tokenvalue doesn't help, although it didn't hurt either, no extra errors occured from it. – Marcus Grass May 25 '18 at 16:06
You did however answer my question on how to do it, thank you! – Marcus Grass May 25 '18 at 16:19

Getting and inserting the value of a CSRF cookie set by Django in Angular

1 Answers1