it-swarm.com.de

angle4 httpclient csrf sendet kein x-xsrf-token

In der Winkeldokumentation wird erwähnt, dass der Winkel httpclient automatisch den Wert des Cookies XSRF-TOKEN in der Kopfzeile X-XSRF-TOKEN der Post-Anfrage sendet. Dokumentationslink

Der Header wird jedoch nicht für mich gesendet. Hier ist mein Code

Nodejs-Code zum Setzen des Cookies

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

Ich habe den httpclient in app.module.ts verwendet

imports: [
  HttpClientModule
]

** Der obige Code dient nur zu Debug-Zwecken. Ich habe keinen Set-CSRF-Endpunkt.

Es sendet jedoch keine Kopfzeile, wenn ich eine Post-Anfrage sende. Ich kann nicht debuggen.

Ich habe das Problem auch in das Github-Repository von angle aufgenommen. HttpXsrfInterceptor prüft, ob die Anforderung GET oder HEAD ist oder ob sie mit http beginnt. Bei true wird das Hinzufügen des Headers übersprungen.

Hier ist der Code in der HttpXsrfInterceptor-Klasse

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

Ich bin nicht sicher, warum sie für den http/s-Teil ausgelassen wurden. Hier ist meine Ausgabe in github

17
netuser

Was Sie suchen, ist HttpClientXsrfModule

Lesen Sie hier mehr darüber: https://angular.io/api/common/http/HttpClientXsrfModule .

Ihre Verwendung sollte folgendermaßen aussehen:

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

Wenn Ihr Code die API über die absolute URL anspricht, funktioniert der standardmäßige CSRF-Interceptor nicht standardmäßig. Stattdessen müssen Sie einen eigenen Interceptor implementieren, der absolute Routen nicht ignoriert.

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

Und schließlich fügen Sie es Ihren Providern hinzu:

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

Ich nehme an, die korrekte Methode ist withOptions. Ich habe withConfig verwendet und erhielt die Fehlermeldung Property 'withConfig' does not exist on type 'typeof HttpClientXsrfModule'.. Dies ist ein Tippproblem in der Dokumentation. Sie müssen stattdessen "withOptions" verwenden. HttpClientXsrfModule.withOptions({ cookieName: 'My-Xsrf-Cookie', headerName: 'My-Xsrf-Header', })

6
Manu Chadha

Bei der letzten Angular-Version bin ich auf folgendes Problem gestoßen. Während das Token mit dem Headernamen 'XSRF-TOKEN' an den Client übergeben wird, muss die Antwort das Token mit dem Headernamen 'X-XSRF-TOKEN' zurückmelden. Hier ist also eine leicht modifizierte Version von Miroslavs Code, die für mich funktioniert.

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