What is the right way to use angular2 http requests with Django CSRF protection?

Now that Angular 2 is released the following seems to be the correct way of doing this, by using CookieXSRFStrategy.

I've configured my application to have a core module but you can do the same in your main application module instead:

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';import { CommonModule }   from '@angular/common';import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http';@NgModule({    imports: [        CommonModule,        HttpModule     ],    declarations: [ ],    exports: [ ],    providers: [        {            provide: XSRFStrategy,            useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')        }    ]})export class CoreModule {}, 

Solution for Angular2 is not as easy as for angular1. You need:

1. Pick out csrftoken cookie value.

2. Add this value to request headers with name X-CSRFToken.

I offer this snippet:

import {Injectable, provide} from 'angular2/core';import {BaseRequestOptions, RequestOptions} from 'angular2/http'@Injectable()export class ExRequestOptions extends BaseRequestOptions  {  constructor() {    super();    this.headers.append('X-CSRFToken', this.getCookie('csrftoken'));  }  getCookie(name) {    let value = "; " + document.cookie;    let parts = value.split("; " + name + "=");    if (parts.length == 2)       return parts.pop().split(";").shift();  }}export var app = bootstrap(EnviromentComponent, [  HTTP_PROVIDERS,  provide(RequestOptions, {useClass: ExRequestOptions})]);

Victor K's answer is perfectly valid however as of angular 2.0.0-rc.2, a preferred approach would be to use CookieXSRFStrategy as below,

bootstrap(AngularApp, [  HTTP_PROVIDERS,  provide(XSRFStrategy, {useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')})]);