Protezione contro attacchi CSRF in Aurelia

Question

In Aurelia, non sembra esserci ancora alcun supporto per la protezione CSRF, al contrario dell'intestazione XSRF-TOKEN di AngularJS che viene impostata automaticamente su tutte le richieste XHR dal framework AngularJS.

Come si deve proteggere l'app Aurelia dagli attacchi CSRF? Devo tirare il mio supporto basato sullo OWASP CSRF Prevention Cheat Sheet, o ci sono già delle alternative là fuori per Aurelia?

Answer 1

Si dovrebbe essere in grado di farlo da soli abbastanza facilmente utilizzando Aurelia HTTP interceptors (vedere examples in the docs). Prima di ogni richiesta, puoi inviare il tuo token. Questo può essere fatto con il convenzionale aurelia-http-client e il nuovo standard aurelia-fetch-client.

Il codice potrebbe essere simile a questo:

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

    ... 

} 

Su ogni richiesta, il token sarebbero inviati. Dovresti gestire la convalida sul lato server. Potresti facilmente impostare il tuo codice in modo che la tua richiesta iniziale possa prendere un token, o potresti ricondurre un token come parte del payload di autenticazione, o se lo volessi potresti anche memorizzare un token nella localstage del browser e usarlo modo.

Si potrebbe anche fare un ulteriore passo avanti e implementare l'autenticazione JWT. Se stai usando node.js, ho un piccolo blog post che descrive come ho implementato JWT in Express. C'è un plugin su Github chiamato aurelia-auth che gestisce JWT, e c'è un blog post on its implementation on the Aurelia blog as well.

Answer 2

Ecco un esempio di intercettore che legge il token dall'intestazione della risposta se esiste e lo imposta automaticamente su ogni richiesta che ne ha bisogno.

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

si registra nel vostro http/prendere cliente con ad esempio:

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