Was ist der richtige Weg, um angular2 http-Anfragen mit Django CSRF-Schutz?

In Angular1 das problem kann gelöst werden, indem die Konfiguration der $http-Anbieter. Wie:

app.config(function($httpProvider) {
  $httpProvider.defaults.xsrfCookieName = 'csrftoken';
  $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});

Was ist eine gute Praxis, das gleiche zu tun in Angular2?

In Angular2 für die Arbeit mit http-Anfragen, die wir verwenden müssen, um die Klasse Http. Natürlich ist dies nicht eine gute Praxis, fügen Sie CSRF-line mit jedem Aufruf der post-Funktion.

Ich denke, in Angular2 sollte ich erstellen Sie eine eigene Klasse, die erbt Angular2 die Http-Klasse neu zu definieren und die post-Funktion. Ist es der richtige Ansatz oder gibt es eine elegantere Methode?

ja, wir können ein weltweites service-und Sie können alles schreiben was Sie wollen der ganzen app. dann vorsehen, dass global service in der bootstrap Datei.ich denke, das gibt Euch einen Hinweis
Nun, die version 2.0 wurde offiziell veröffentlicht, die die früheren Antworten scheinen nicht mehr funktioniert. Bitte siehe meine Antwort weiter unten, wie Sie zu verwenden CookieXSRFStrategy.

InformationsquelleAutor Victor K | 2015-12-28

10

Victor K s Antwort ist vollkommen gültig, aber als der Winkel-2.0.0-rc.2, ein bevorzugter Ansatz wäre, die Nutzung CookieXSRFStrategy als unten,
```
bootstrap(AngularApp, [
  HTTP_PROVIDERS,
  provide(XSRFStrategy, {useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')})
]);
```
- da bieten ist veraltet, ich denke, der neue Weg sollte sein, zu ersetzen, die liefern Einklang mit {provide:XSRFStrategy, useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')}
- Diese Lösung funktioniert nicht in der version der Winkel-2. Bitte siehe meine Antwort unten.
InformationsquelleAutor rsingh25
19

Nun, der Winkel 2 ist freigegeben, die folgenden scheint auf die richtige Art dies zu tun, indem CookieXSRFStrategy.

Ich so konfiguriert haben, dass mein Antrag auf eine core-Modul aber Sie können das gleiche tun, in Ihrem Haupt-Anwendung-Modul statt:
```
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 {
}, 
```
- Hi bei der ersten Ausführung bauen, bekam ich diese Fehlermeldung: ERROR in Error encountered resolving symbol values statically. Calling function 'CookieXSRFStrategy', function calls are not supported. Consider replacing t he function or lambda with a reference to an exported function. Aber wenn man speichern, die das cli Gebäude wieder aber jetzt ohne einen Fehler.
- Sie ersetzen könnte new CookieXSRFStrategy('csrftoken', 'X-CSRFToken') mit einer Funktion, die zurückgibt, die Linie. Das sollte es lösen.
InformationsquelleAutor David
13

Lösung für Angular2 ist nicht so einfach wie für angular1.
Sie brauchen:
1. Herausgreifen csrftoken cookie-Wert.
2. Addieren Sie diesen Wert zur request-Header mit dem Namen X-CSRFToken.
Biete ich dieses 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})
]);
```
- Ich denke, man sollte akzeptieren Ihre Antwort.
- Victor, brauchen Sie etwas besonderes tun, um das cookie von der Django-server? Wenn ich die cookies der csrftoken existiert nicht.
- Ja, entweder Ihre view-Funktion muss eingerichtet werden, die mit @csrf_protect oder CsrfViewMiddleware Klasse Hinzugefügt werden müssen MIDDLEWARE_CLASSES in die Einstellungen-Datei. Details hier docs.djangoproject.com/en/1.9/ref/csrf/...
- für java spring Entwickler X-CSRFToken wäre X-CSRF , das ist einige Ressourcen, Frühling.io/guides/tutorials/spring-security-und-angular-js
- Ich glaube nicht, dass das funktioniert nun nicht mehr die version 2.0 raus ist. Bitte siehe meine alternative Antwort für eine Lösung, die funktioniert mit 2.0.
- Warum brauchen wir, um die cookie-selbst, wenn die Dokumentation sagt, es wird funktionieren out-of-box mit httpclient (problem ist, es ist nicht für mich arbeiten)
InformationsquelleAutor Victor K
4

Späteren Versionen von angular Sie können keine Funktionen aufrufen, die in Dekorateuren. Die Verwendung einer factory Anbieter:
```
export function xsrfFactory() {
  return new CookieXSRFStrategy('_csrf', 'XSRF-TOKEN');
}
```
Verwenden und dann die Fabrik:
```
  providers: [
    {
      provide: XSRFStrategy,
      useFactory : xsrfFactory
  }],
```
Sonst der compiler wird Ihnen sagen, off.
Was ich auch schon gesehen habe ist, dass ng bauen-Uhr nicht melden Sie diese Fehler, bis man ihn wieder aus.

InformationsquelleAutor PeterS

Victor K hatte die Lösung, ich werde nur hinzufügen, dass dieser Kommentar hier, was ich getan habe:

Habe ich die Komponente "ExRequestOptions", wie Victor K sagte, aber ich habe auch eine Methode "appendHeaders", um die Komponente:

appendHeaders(headername: string, headervalue: string) {
    this.headers.append(headername, headervalue);
}

Dann hatte ich das in meiner main.ts:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS, RequestOptions} from 'angular2/http';
import 'rxjs/Rx';
import {ExRequestOptions} from './transportBoxes/exRequestOptions';
import {provide} from 'angular2/core';

bootstrap(AppComponent,[ HTTP_PROVIDERS,  
    provide(RequestOptions, {useClass: ExRequestOptions})]);

Ich bin nicht sicher, ob das bootstrapping hatte keine Wirkung, so habe ich das auch gemacht, wo
Ich würde post-Daten:

    let options = new ExRequestOptions();
    options.appendHeaders('Content-Type', 'application/json');
    return this.http.post('.....URL', JSON.stringify(registration),
         options)

InformationsquelleAutor OddBeck

2

Ich kämpfte mit diesem für ein paar Tage. Die Ratschläge in diesem Artikel ist gut, aber als der August, 2017 ist veraltet (https://github.com/angular/angular/pull/18906). Die angular2 empfohlene Ansatz ist einfach, hat aber einen Nachteil.

Den empfehlen Ansatz ist die Verwendung von HttpClientXsrfModule und zu konfigurieren, es zu erkennen, django Standard-csrf-Schutz. Nach dem django docs, django, wird das cookie senden csrftoken und erwarten, dass der Kunde zur Rücksendung der header X-CSRFToken. In angular2, fügen Sie Folgendes zu Ihrer app.module.ts
```
import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    HttpClientXsrfModule.withOptions({
      cookieName: 'csrftoken',
      headerName: 'X-CSRFToken',
    })
  ], ...
```
Die Einschränkung ist, dass angular2 ist XSRF-Schutz gilt nur für mutierend Anforderungen:

Standardmäßig einen interceptor sendet dieses cookie [header] auf alle mutierend Anfragen
(POST, etc.) bei den relativen URLs aber nicht auf GET/HEAD requests oder auf
Anfragen mit einer absoluten URL.

Wenn Sie brauchen, um Unterstützung für eine API, führt Mutationen auf den GET/HEAD, müssen Sie erstellen Sie Ihre eigenen benutzerdefinierten interceptor. Sie finden ein Beispiel und eine Diskussion der Frage hier.

InformationsquelleAutor user590028

Derzeit, ich lösen, nichts mit custom-Header mit einem wrapper-service rund um den Http-Service. Sie können hinzufügen, was header manuell und injizieren zusätzliche Dienste zum speichern/abrufen von Werten. Diese Strategie funktioniert auch für JWTs, zum Beispiel. Haben einen Blick auf den code unten, ich hoffe es hilft.

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';

@Injectable()
export class HttpService {
  constructor(private http: Http) {
  }

  private get xsrfToken() {
    //todo: some logic to retrieve the cookie here. we're in a service, so you can inject anything you'd like for this
    return '';
  }

  get(url) {
    return this.http.get(url, this.getRequestOptions())
      .map(result => result.json())
      .catch(error => error.json());
  }

  post(url, payload) {
    return this.http.post(url, payload, this.getRequestOptions())
      .map(result => result.json())
      .catch(error => error.json());
  }

  private getRequestOptions() {
    const headers = new Headers({'Content-Type': 'application/json', 'X-XSRF-TOKEN': this.xsrfToken});
    return new RequestOptions({headers: headers});
  }
}

InformationsquelleAutor jberndsen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.