Каким образом можно использовать угловые2 HTTP-запросы с защитой Django CSRF?

В Angular1 проблему можно решить, настроив $ http-provider. Подобно:

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

Какая хорошая практика сделать то же самое в Angular2?

В Angular2 для работы с http-запросами нам нужно использовать class Http. Конечно, это не очень хорошая практика, чтобы добавить CSRF-линию к каждому вызову пост-функции.

Я думаю, в Angular2 я должен создать собственный class, который наследует class Http Angular2 и переопределяет постфункцию. Это правильный подход или есть более элегантный метод?

Ответ Виктора К вполне оправдан, однако с угловым 2.0.0-rc.2, предпочтительным подходом было бы использование CookieXSRFStrategy, как показано ниже,

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

Теперь, когда выпущен Angular 2, правильный способ сделать это выглядит следующим образом: CookieXSRFStrategy .

Я настроил мое приложение на наличие основного модуля, но вы можете сделать то же самое в своем основном прикладном модуле:

 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 { }, 

Решение для Angular2 не так просто, как для угловых. Тебе нужно:

  1. Выберите csrftoken cookie csrftoken .

  2. Добавьте это значение, чтобы запросить заголовки с именем X-CSRFToken .

Я предлагаю этот fragment:

 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}) ]); 

Для более поздних версий угловых вы не можете вызывать функции в декораторах. Вы должны использовать поставщика завода:

 export function xsrfFactory() { return new CookieXSRFStrategy('_csrf', 'XSRF-TOKEN'); } 

И затем используйте завод:

  providers: [ { provide: XSRFStrategy, useFactory : xsrfFactory }], 

В противном случае компилятор скажет вам. То, что я также видел, это то, что ng build -watch не сообщит об этой ошибке, пока вы не начнете ее снова.

У Виктора К было решение, я просто добавлю здесь этот комментарий к тому, что я сделал:

Я создал компонент «ExRequestOptions», как сказал Виктор К., но я также добавил метод «appendHeaders» к этому компоненту:

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

Тогда у меня было это в моем 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})]); 

Я не уверен, что начальная загрузка имела какой-то эффект, поэтому я также сделал это, когда я разместил данные:

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

Я боролся с этим в течение нескольких дней. Совет в этой статье хорош, но по состоянию на август 2017 года устарел ( https://github.com/angular/angular/pull/18906 ). Рекомендуемый подход, основанный на угловом2, прост, но имеет оговорку.

Рекомендуемый подход – использовать HttpClientXsrfModule и настроить его для распознавания защиты dsango по умолчанию csrf. Согласно django docs , django отправит cookie csrftoken и ожидает, что клиент вернет заголовок X-CSRFToken . В angular2 добавьте следующее к вашему app.module.ts

 import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientModule, HttpClientXsrfModule.withOptions({ cookieName: 'csrftoken', headerName: 'X-CSRFToken', }) ], ... 

Предостережение заключается в том, что XSRF Protection углового2 применяется только к мутирующим запросам:

По умолчанию перехватчик отправляет этот файл cookie [header] во все мутирующие запросы (POST и т. Д.) На относительные URL-адреса, но не на запросы GET / HEAD или на запросы с абсолютным URL-адресом.

Если вам необходимо поддерживать API, который выполняет мутацию в GET / HEAD, вам нужно будет создать собственный пользовательский перехватчик. Здесь вы можете найти пример и обсудить эту проблему.

В настоящее время я решаю что-либо с пользовательскими заголовками, используя сервис-обертку вокруг службы Http. Вы можете добавить любой заголовок вручную и добавить дополнительные сервисы для хранения / получения значений. Например, эта страtagsя также работает для JWT. Посмотрите на код ниже, я надеюсь, что это поможет.

 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}); } } 
  • Когда я обновляю свой сайт, я получаю 404. Это с Angular2 и firebase
  • Нет провайдера для AngularFireDatabase, AngularFireAuth
  • jQuery не определен в bootstrap-sass
  • Как реализовать Modal Dialog в Angular 2 и выше
  • ExpressionChangedAfterItHasBeenCheckedError Explained
  • ключ доступа и значение объекта с помощью * ngFor
  • $ применить уже выполненную ошибку
  • Запуск угловых и угловых рамок рядом друг с другом
  • Угловой 2 Используйте компонент из другого модуля
  • Импорт lodash в приложение углового2 +
  • Вызов функции, когда ng-repeat завершен
  • Давайте будем гением компьютера.