Schutz vor CSRF-Attacken in Aurelia

Question

In Aurelia, scheint es noch keine Unterstützung für CSRF-Schutz zu sein, wie XSRF-TOKEN Header AngularJS des Gegensatz, der automatisch auf all XHR-Anfragen durch den AngularJS Rahmen festgelegt ist.

Wie soll ich eine Aurelia App vor CSRF-Angriffen schützen? Soll ich meine eigene Unterstützung basierend auf der OWASP CSRF Prevention Cheat Sheet rollen, oder gibt es für Aurelia schon Alternativen?

Answer 1

Sie sollten in der Lage sein, dies mit Hilfe von Aurelias HTTP interceptors (siehe examples in the docs) relativ einfach zu tun. Vor jeder Anfrage können Sie Ihr Token senden. Dies kann sowohl mit dem herkömmlichen aurelia-http-client als auch dem neuen Standard aurelia-fetch-client erfolgen.

Code könnte wie folgt aussehen:

export class MyRestAPI { 
    static inject() { return [HttpClient]; } // This could easily be fetch-client 

    constructor (http) { 
     this.http = http.configure(x => { 
      x.withBaseUrl(myBaseUrl); 
      x.useStandardConfiguration(); 
      x.withInterceptor({ 
       request: function (request) { 
        request.headers.set('XSRF-TOKEN', myAwesomeToken); 
        return request; 
       } 
      }); 
     }); 
    } 

    ... 

} 

Auf jede Anfrage, würde Ihr Token gesendet werden. Sie müssten die Überprüfung auf der Serverseite durchführen. Sie könnten Ihren Code einfach so einrichten, dass Ihre erste Anfrage ein Token abrufen könnte, oder Sie könnten ein Token als Teil Ihrer Authentifizierungsnutzlast zurückgeben, oder wenn Sie möchten, könnten Sie sogar ein Token im lokalen Speicher des Browsers speichern und dieses verwenden Weg.

Sie könnten sogar noch einen Schritt weiter gehen und die JWT-Authentifizierung implementieren. Wenn Sie node.js verwenden, habe ich eine kleine blog post, die beschreibt, wie ich JWT in Express implementiert. Es gibt ein Plugin auf Github namens aurelia-auth, das JWT behandelt, und es gibt eine blog post on its implementation on the Aurelia blog as well.

Answer 2

Hier ist ein Beispielinterceptor, der das Token aus dem Antwortheader liest, wenn es existiert, und es automatisch bei jeder Anforderung einstellt, die es benötigt.

import {Interceptor, HttpResponseMessage, RequestMessage} from "aurelia-http-client"; 

class CsrfHeaderInterceptor implements Interceptor { 
    private static readonly TOKEN_HEADER = 'X-CSRF-Token'; 

    private latestCsrfToken: string; 

    response(response: HttpResponseMessage): HttpResponseMessage { 
    if (response.headers.has(CsrfHeaderInterceptor.TOKEN_HEADER)) { 
     this.latestCsrfToken = response.headers.get(CsrfHeaderInterceptor.TOKEN_HEADER); 
    } 
    return response; 
    } 

    request(request: RequestMessage): RequestMessage { 
    if (this.latestCsrfToken) { 
     if (['POST', 'PUT', 'PATCH'].indexOf(request.method) >= 0) { 
     request.headers.add(CsrfHeaderInterceptor.TOKEN_HEADER, this.latestCsrfToken); 
     } 
    } 
    return request; 
    } 
} 

Sie registrieren es in Ihrem http/Fetch Client mit zum Beispiel:

httpClient.configure((config) => { 
    config 
    .withBaseUrl("/api/") // adjust to your needs 
    .withHeader('Accept', 'application/json') // adjust to your needs 
    .withHeader('X-Requested-With', 'XMLHttpRequest') // adjust to your needs 
    .withInterceptor(new CsrfHeaderInterceptor()); 
});