angular4 httpclient csrf不发送x-xsrf-token

时间:2017-09-04 16:17:22

标签: angular cookies csrf-protection x-xsrf-token

在角度文档中,提到角度httpclient会自动在post请求的标头XSRF-TOKEN中发送cookie X-XSRF-TOKEN的值。 Documentation link

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

用于设置Cookie的Nodejs代码

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

imports: [
  HttpClientModule
]

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

但是当我发送帖子请求时它不会发送任何标题。我无法调试。

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

以下是HttpXsrfInterceptor class

中的代码
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部分。这是我的issue in github

3 个答案:

答案 0 :(得分:40)

您要找的是#performs one-side test H0=slope bigger than 1 pval<-pt(t1, df = df.residual(lm.logLP.sexo.adu), lower.tail = FALSE) #performs one-side test H0=slope smaller than 1 pval<-pt(t1, df = df.residual(lm.logLP.sexo.adu), lower.tail = TRUE)

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

您的用法应该是这样的:

HttpClientXsrfModule

此外,如果您的代码通过绝对URL定位API,则默认的CSRF拦截器不会开箱即用。相反,你必须实现自己的拦截器,它不会忽略绝对路径。

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

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

@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);
  }
}

答案 1 :(得分:7)

我认为正确的方法是withOptions。我使用withConfig并收到错误Property 'withConfig' does not exist on type 'typeof HttpClientXsrfModule'.这是文档中的输入问题。你需要使用&#34; withOptions&#34;而是HttpClientXsrfModule.withOptions({ cookieName: 'My-Xsrf-Cookie', headerName: 'My-Xsrf-Header', })

答案 2 :(得分:0)

使用最近的Angular版本我遇到了以下问题。当令牌使用标题名称&#39; XSRF-TOKEN&#39;传递给客户端时,响应必须使用标题名称&#39; X-XSRF-TOKEN&#39;来反馈令牌。所以这里有一个稍微修改过的Miroslav代码,对我来说很有用。

@Injectable()
export class HttpXSRFInterceptor implements HttpInterceptor {

  constructor(private tokenExtractor: HttpXsrfTokenExtractor) {
  }

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