angular4 httpclient csrf가 x-xsrf 토큰을 보내지 않음

Question

각도로 표시된 문서에서 각도 httpclient은 게시 요청의 헤더에 쿠키 XSRF-TOKEN의 값을 자동으로 보냅니다. Documentation link

그러나 나를 위해 헤더를 보내지 않습니다. 여기 쿠키

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

을 설정하는

Nodejs 코드는 내가 app.module.ts에서 HttpClient를 사용했습니다 내 코드입니다

imports: [ 
    HttpClientModule 
] 

** 위의 코드는 디버깅을위한 목적. 나는 set-csrf 엔드 포인트가 없다.

하지만 게시물 요청을 보낼 때 헤더를 보내지 않습니다. 디버깅 할 수 없습니다.

나는 github 저장소에도 문제를 추가했다. HttpXsrfInterceptor는 요청이 GET 또는 HEAD인지 또는 http로 시작하는지 검사합니다. true의 경우, 헤더의 추가는 건너 뜁니다. 여기

는이 HTTP/s의 일부를 생략 한 이유는 확실하지 않다 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); 
    } 

의 코드입니다. 내 것이 issue in github

Answer 1

당신이 찾고있는 것은 HttpClientXsrfModule입니다.

여기에 대해 자세히 알아 보려면 https://angular.io/api/common/http/HttpClientXsrfModule을 참조하십시오.

귀하의 사용은 다음과 같이해야한다 : 코드가 절대 URL을 통해 API를 대상으로하는 경우

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

또한, 기본 CSRF 인터셉터가 상자 밖으로 작동하지 않습니다. 대신 절대 경로를 무시하지 않는 자체 인터셉터를 구현해야합니다.

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

그리고 마지막으로 당신의 공급자에 추가 :

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

Answer 2

나는 올바른 방법은 withOptions 가정하자. withConfig를 사용하여 오류가 발생했습니다 Property 'withConfig' does not exist on type 'typeof HttpClientXsrfModule'. 이것은 설명서의 타이핑 문제입니다. 대신 "withOptions"를 사용해야합니다 HttpClientXsrfModule.withOptions({ cookieName: 'My-Xsrf-Cookie', headerName: 'My-Xsrf-Header', })