angular4 httpclient csrf不发送x-xsrf-token [英] angular4 httpclient csrf does not send x-xsrf-token

问题描述

在角度文档中，提到角度httpclient将自动在发布请求的标头X-XSRF-TOKEN中发送cookie XSRF-TOKEN的值. 文档链接

In angular documentation, it is mentioned that the angular httpclient will automatically send the value of cookie XSRF-TOKEN in the header X-XSRF-TOKEN of post request. Documentation link

但是它不会为我发送标题.这是我的代码

But it does not send the header for me. Here is my code

用于设置Cookie的Node.js代码

router.get('/set-csrf',function(req,res,next){
    res.setHeader('Set-Cookie', "XSRF-TOKEN=abc;Path=/; HttpOnly; SameSite=Strict");    
    res.send();
  })

我已经在app.module.ts中使用了httpclient

I have used the httpclient in app.module.ts

imports: [
  HttpClientModule
]

**上面的代码仅用于调试目的.我没有set-csrf端点.

** The above code is just for debug purpose. I do not have a set-csrf endpoint.

但是，当我发送发布请求时，它不发送任何标头.我无法调试.

But it does not send any header when I send a post request. I am not able to debug.

我也已在angular的github存储库中添加了该问题. HttpXsrfInterceptor检查请求是GET还是HEAD，或者是否以http开头.如果为true，则跳过添加标题.

I have added the issue in the github repository of angular too. HttpXsrfInterceptor checks if the request is GET or HEAD, or if it starts with http. If true, it skips adding the header.

这是 HttpXsrfInterceptor中的代码课

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const lcUrl = req.url.toLowerCase();
    // Skip both non-mutating requests and absolute URLs.
    // Non-mutating requests don't require a token, and absolute URLs require special handling
    // anyway as the cookie set
    // on our origin is not the same as the token expected by another origin.
    if (req.method === 'GET' || req.method === 'HEAD' || lcUrl.startsWith('http://') ||
        lcUrl.startsWith('https://')) {
      return next.handle(req);
    }
    const token = this.tokenService.getToken();

    // Be careful not to overwrite an existing header of the same name.
    if (token !== null && !req.headers.has(this.headerName)) {
      req = req.clone({headers: req.headers.set(this.headerName, token)});
    }
    return next.handle(req);
  }

我不确定为什么他们跳过了http/s部分.这是我的 github中的问题

I am not sure why they have skipped for http/s part. Here is my issue in github

推荐答案

您正在寻找的是HttpClientXsrfModule.

请在此处详细了解: https://angular.io/api/common/http/HttpClientXsrfModule .

您的用法应如下所示:

Your usage should be like this:

imports: [   
 HttpClientModule,  
 HttpClientXsrfModule.withOptions({
   cookieName: 'My-Xsrf-Cookie', // this is optional
   headerName: 'My-Xsrf-Header' // this is optional
 }) 
]

此外，如果您的代码通过绝对URL定位API，则默认的CSRF拦截器将无法使用.相反，您必须实现自己的拦截器，该拦截器不能忽略绝对路由.

Additionally, if your code targets API via absolute URL, default CSRF interceptor will not work out of the box. Instead you have to implement your own interceptor which does not ignore absolute routes.

@Injectable()
export class HttpXsrfInterceptor implements HttpInterceptor {

  constructor(private tokenExtractor: HttpXsrfTokenExtractor) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const headerName = 'X-XSRF-TOKEN';
    let token = this.tokenExtractor.getToken() as string;
    if (token !== null && !req.headers.has(headerName)) {
      req = req.clone({ headers: req.headers.set(headerName, token) });
    }
    return next.handle(req);
  }
}

最后将其添加到您的提供商中:

And finally add it to your providers:

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: HttpXsrfInterceptor, multi: true }
]

这篇关于angular4 httpclient csrf不发送x-xsrf-token的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！