如何在 angular4 中发送 "X-CSRF-TOKEN" 响应 header
how to send "X-CSRF-TOKEN" with response header in angular4
我目前正在开发 Angular4 应用程序。现在我想实现 XSRF 保护。在响应 header cookie 中,我得到 "XSRF-TOKEN",我需要在下一个请求 header cookie 中发送 "X-XSRF-TOKEN"。正如 official Angular document 中提到的,Angular 正在处理这个问题。但就我而言,angular 没有处理它。所以我创建了以下自定义 XsrfInterceptor 以附加 "X-XSRF-TOKEN" 响应 header.
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 }
],
但不幸的是它不起作用。我认为我的应用程序没有调用自定义拦截器的拦截方法(它没有打印 console.log('xsrf intercepter called'))。
我的 http header 如下:
let httpHeader = new RequestOptions({
headers: new Headers({
'Content-Type': 'application/json',
'x-auth-token': this.authToken
})
})
回应header:
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
下一个请求 Header:
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 库:
"@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",
Angular 仅当您导入正确的模块时才会处理 XSRF。并且仅从 4.3 开始实施新的 http 客户端和拦截器。
您应该将 angular 至少更新到 4.3.0(我建议升级到 5.0.0,因为这是最新版本的 material2 所必需的),然后在您的应用程序模块中导入 HttpClientXsrfModule。那么它应该开箱即用。
此致
我目前正在开发 Angular4 应用程序。现在我想实现 XSRF 保护。在响应 header cookie 中,我得到 "XSRF-TOKEN",我需要在下一个请求 header cookie 中发送 "X-XSRF-TOKEN"。正如 official Angular document 中提到的,Angular 正在处理这个问题。但就我而言,angular 没有处理它。所以我创建了以下自定义 XsrfInterceptor 以附加 "X-XSRF-TOKEN" 响应 header.
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 }
],
但不幸的是它不起作用。我认为我的应用程序没有调用自定义拦截器的拦截方法(它没有打印 console.log('xsrf intercepter called'))。
我的 http header 如下:
let httpHeader = new RequestOptions({
headers: new Headers({
'Content-Type': 'application/json',
'x-auth-token': this.authToken
})
})
回应header:
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
下一个请求 Header:
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 库:
"@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",
Angular 仅当您导入正确的模块时才会处理 XSRF。并且仅从 4.3 开始实施新的 http 客户端和拦截器。
您应该将 angular 至少更新到 4.3.0(我建议升级到 5.0.0,因为这是最新版本的 material2 所必需的),然后在您的应用程序模块中导入 HttpClientXsrfModule。那么它应该开箱即用。
此致