angular4 httpclient csrf không gửi x-xsrf-token

Question

Trong tài liệu góc, được đề cập rằng góc httpclient sẽ tự động gửi giá trị của cookie XSRF-TOKEN trong tiêu đề X-XSRF-TOKEN của yêu cầu bài đăng. Documentation link

Nhưng nó không gửi tiêu đề cho tôi. Đây là mã của tôi

Nodejs mã để thiết lập cookie

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

Tôi đã sử dụng các httpclient trong app.module.ts

imports: [ 
    HttpClientModule 
] 

** Đoạn mã trên chỉ dành cho debug mục đích. Tôi không có điểm cuối tập hợp csrf.

Nhưng nó không gửi bất kỳ tiêu đề nào khi tôi gửi yêu cầu bài đăng. Tôi không thể gỡ lỗi.

Tôi cũng đã thêm sự cố trong kho lưu trữ github của góc cạnh. HttpXsrfInterceptor sẽ kiểm tra nếu yêu cầu là GET hoặc HEAD, hoặc nếu nó bắt đầu bằng http. Nếu đúng, nó bỏ qua thêm tiêu đề.

Đây là mã trong 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); 
    } 

Tôi không chắc chắn lý do tại sao họ đã bỏ qua cho http/s phần. Đây là số issue in github

Answer 1

Những gì bạn đang tìm kiếm là HttpClientXsrfModule.

Vui lòng đọc thêm tại đây: https://angular.io/api/common/http/HttpClientXsrfModule.

sử dụng của bạn nên được như thế này:

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

Ngoài ra, nếu mã của bạn nhắm API thông qua URL tuyệt đối, mặc định CSRF đánh chặn sẽ không làm việc ra khỏi hộp. Thay vào đó bạn phải thực hiện đánh chặn riêng của bạn mà không bỏ qua các tuyến đường tuyệt đối.

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

Và cuối cùng thêm nó vào các nhà cung cấp của bạn:

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

Answer 2

Tôi cho rằng phương pháp đúng là withOptions. Tôi đã sử dụng withConfig và gặp lỗi Property 'withConfig' does not exist on type 'typeof HttpClientXsrfModule'. Đây là vấn đề đánh máy trong tài liệu. Bạn cần sử dụng "withOptions" thay vì HttpClientXsrfModule.withOptions({ cookieName: 'My-Xsrf-Cookie', headerName: 'My-Xsrf-Header', })