Как отправить "X-CSRF-TOKEN" с заголовком ответа в angular4

Question

В настоящее время я работаю над приложением Angular4. Теперь я хочу реализовать защиту XSRF. В файлах cookie заголовка ответа я получаю "XSRF-TOKEN", и мне нужно отправить "X-XSRF-TOKEN" в следующих файлах cookie заголовка запроса. Как упоминалось в официальном документе Angular, Angular позаботится об этом. Но в моем случае angular не справляется с этим. Поэтому я создал следующий пользовательский XsrfInterceptor, чтобы прикрепить "X-XSRF-TOKEN" с заголовком ответа.

import { NgModule, Injectable } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { HttpRequest, HttpHandler, HttpEvent, HttpXsrfTokenExtractor, HttpInterceptor } from "@angular/common/http";

@Injectable()
export class XsrfInterceptor implements HttpInterceptor {

    constructor(private tokenExtractor: HttpXsrfTokenExtractor) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const headerName = 'X-XSRF-TOKEN';
        console.log("xsrf intercepter called");
        let requestToForward = req;
        let token = this.tokenExtractor.getToken() as string;
        console.log(token);
        if (token !== null) {
            requestToForward = req.clone({ setHeaders: {headerName: token } });
        }
        return next.handle(requestToForward);
    }
}

И в моем основном модуле я включил его в провайдера,

providers: [
    LoginService,
    AuthGuardLogin,
    { provide: HTTP_INTERCEPTORS, useClass: XsrfInterceptor,  multi: true }      
], 

Но, к сожалению, это не работает. Я думаю, что мое приложение не вызывает метод перехвата пользовательского Intercepter (он не печатает console.log('перехватчик xsrf вызван')).

Мой http заголовок ниже:

let httpHeader = new RequestOptions({
            headers: new Headers({
                'Content-Type': 'application/json',
                'x-auth-token': this.authToken
            })
        })

В заголовке ответа:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:Access-Control-Allow-Origin, Access-Control-Allow-Headers, Accept, X-XSRF-TOKEN, XSRF-TOKEN, X-Requested-By, Content-Type, Origin, Authorization, X-Requested-With, x-auth-token, OPTIONS
Access-Control-Allow-Methods:POST, GET, PUT, OPTIONS
Access-Control-Allow-Origin:http://localhost:7070
Access-Control-Expose-Headers:x-auth-token, XSRF-TOKEN, X-XSRF-TOKEN
Access-Control-Max-Age:3600
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Date:Fri, 24 Nov 2017 06:42:20 GMT
Expires:0
Pragma:no-cache
Referrer-Policy:same-origin
Set-Cookie:XSRF-TOKEN=63f66e2a-1ad0-4641-8f36-27c16734a676;path=/mfleet;HttpOnly
Transfer-Encoding:chunked
x-auth-token:8d06b1da-c35b-42ea-ac28-eae51f3dd74d
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

Заголовок следующего запроса:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9
Connection:keep-alive
Content-Type:application/json
Cookie:XSRF-TOKEN=63f66e2a-1ad0-4641-8f36-27c16734a676  **//this should be X-XSRF-TOKEN**
Host:localhost:7070
Referer:http://localhost:7070/dist/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
x-auth-token:8d06b1da-c35b-42ea-ac28-eae51f3dd74d

Я использую следующие версии угловых библиотек:

"@angular/animations": "^4.4.5",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "4.0.0",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",

Answer 1

Angular заботится о XSRF, только если вы импортируете нужный модуль. И только начиная с 4.3, которые реализуют новый http-клиент и перехватчики.

Вы должны обновить Angular до версии не ниже 4.3.0 (я рекомендую обновить до 5.0.0, потому что это необходимо для последних версий материала2), а затем импортировать HttpClientXsrfModule в модуль приложения. Тогда это должно работать из коробки.

С уважением