angel4のレスポンスヘッダー付き「X-CSRF-TOKEN」の送信方法

Question

現在、Angular4アプリを開発中です。今私はXSRFの保護を実装したいと思います。レスポンスヘッダークッキーでは、「XSRF-TOKEN」を取得しています。次のリクエストヘッダーCookieに「X-XSRF-TOKEN」を送信する必要があります。 official Angular documentで述べたように、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 }  
], 

それを含ましかし、それは動作しませんunfortunatley。私は私の提案がカスタムIntercepterのインターセプトメソッドを呼び出すのではないと考えています（console.log（ 'xsrf intercepter called'）を出力していません）。

私のHTTPヘッダは以下の通りです：

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 

次の要求ヘッダー：レスポンスヘッダに

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

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を処理します。新しいhttpクライアントとインターセプタを実装しているのは4.3以降です。

角度を4.3.0以上に更新する必要があります（5.0.0にアップグレードすることをお勧めします。これはmaterial2の最終バージョンで必要となるためです）。その後、アプリケーションモジュールでHttpClientXsrfModuleをインポートします。その後、それは箱の外で動作するはずです。

よろしくお願いいたします。