angular_4에서 응답 헤더와 함께 "X-CSRF-TOKEN"을 보내는 방법

Question

현재 Angular4 앱에서 작업 중입니다. 이제 XSRF 보호를 구현하려고합니다. 응답 헤더 쿠키에서 "XSRF-TOKEN"이 표시되고 다음 요청 헤더 쿠키에 "X-XSRF-TOKEN"을 보내야합니다. official Angular document에서 언급했듯이 Angular가이를 처리하고 있습니다. 그러나 제 경우에는 각도가 그것을 다루지 않습니다. 그래서 응답 헤더와 함께 "X-XSRF-TOKEN"을 첨부하기 위해 다음과 같은 사용자 지정 XsrfInterceptor를 만들었습니다.

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 작동하지 않습니다. 내 aopplication 사용자 정의 Intercepter (그것은 console.log ('xsrf intercepter called')를 인쇄하지 않습니다)의 요격 방법을 호출하지 않는 것 같아요.

내 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를 관리합니다. 새로운 http 클라이언트와 인터셉터를 구현 한 4.3 이후.

각도를 4.3.0 이상으로 업데이트해야합니다 (소재 2의 마지막 버전에 필요하기 때문에 5.0.0으로 업그레이드하는 것이 좋습니다). 그런 다음 앱 모듈에서 HttpClientXsrfModule을 가져옵니다. 그런 다음 상자에서 꺼내야합니다.

감사합니다.