Intercepteur angulaire csrf

Temps de lecture : 8 minutes

Introduction

Cet article explique comment gérer la protection CSRF et les erreurs d’authentification pour chaque appel d’API dans vos projets Angular à l’aide d’Angular Interceptor.

Qu’est-ce qu’Angular Interceptor

Les intercepteurs sont un type unique de service Angular que nous pouvons mettre en œuvre. Les intercepteurs nous permettent d’intercepter les requêtes HTTP entrantes ou sortantes à l’aide du HttpClient. En interceptant la requête HTTP, nous pouvons modifier ou changer la valeur de la requête et transmettre la requête.

1. Gestion d’une demande de jeton CSRF

Un jeton CSRF est une valeur unique, secrète et imprévisible générée par l’application côté serveur et transmise au client de manière à être incluse dans une requête HTTP ultérieure effectuée par le client. Lorsque la demande ultérieure est faite, le L’application côté serveur vérifie que la demande inclut le jeton attendu et rejette la demande si le jeton est manquant ou non valide.

Les jetons CSRF peuvent empêcher les attaques CSRF en empêchant un attaquant de construire une requête HTTP entièrement valide pouvant être transmise à un utilisateur victime. Étant donné que l’attaquant ne peut pas déterminer ou prédire la valeur du jeton CSRF d’un utilisateur, il ne peut pas construire une demande avec tous les paramètres nécessaires pour que l’application honore la demande.

Comment définir le jeton CSRF et le jeton de passe dans chaque appel

d’API Je préfère l’implémenter en tant que bibliothèque, qui peut être téléchargée sur le référentiel npm et installée dans n’importe quelle application angulaire. Vous pouvez trouver ici comment nous pouvons créer une bibliothèque angulaire (https://angular.io/guide/creating-libraries).

Pré-requis :

Nous utilisons angular interceptor ici pour intercepter chaque appel API. Voici les étapes :

• Fonction d’interception pour intercepter chaque appel d’API et obtenir un jeton à partir du point de terminaison SET CSRF.
• Une fois que nous obtenons le jeton, nous injectons le jeton dans l’en-tête de l’appel API et envoyons la requête.

Module

Comme nous créons en tant que module séparé, nous commençons par la création du module afin de configurer les classes dans les fournisseurs et d’importer le module nécessaire.

Voir l’exemple ci-dessous : La configuration importante est mise en évidence en bleu

• Nous avons les classes suivantes dans les fournisseurs.

1. 3. Interceptor a une méthode pour intercepter chaque appel d’API, obtenir un jeton et injecter un jeton dans l’en-tête et envoyer la demande.

// @dynamic @NgModule({ declarations : [ ForbiddenComponent ], imports : [ HttpClientModule, HttpClientXsrfModule. NgxAuthproxyRoutingModule ], providers : [ ], }) export class InterceptorModule { constructor(@Optional() @SkipSelf() parentModule ?: InterceptorModule) { if (parentModule) { throw new Error( 'InterceptorModule est déjà chargé. Importez-le uniquement dans l’AppModule') ; } } static forRoot(settings) : ModuleWithProviders<any> { return { ngModule : InterceptorModule } ; } }

• Fonction d’interception Intercept pour intercepter chaque appel d’API et obtenir un jeton à partir du point de terminaison SET CSRF.

• Une fois que nous obtenons le jeton, nous injectons le jeton dans l’en-tête de l’appel API et envoyons la requête.

Voir l’exemple ci-dessous : Le code important est mis en surbrillance en bleu

0.0.

• Nous devons intercepter chaque requête un par un, car nous devons nous occuper du jeton CSRF ici. Nous mettons donc chaque requête en file d’attente et procédons une par une.

• Ensuite, obtenez le jeton, clonez l’appel d’API réel et transmettez le jeton dans l’en-tête et enfin, envoyez la demande.

URL; if (reqUrl.pipe( concatMap(_ => this.tokenService. tap(req => { token = this.tokenService.getToken() ; if (token !== null && !request.headers.has(this.clone({ headers : request.headers .set(this.body }) ; } }), concatMap(_ => next.handle(reqClone)), catchError((error : HttpErrorResponse) => { // erreur côté serveur if ( !( error.error instanceof ErrorEvent)) { Interceptor.handleAuthenticationError(error) ; } return throwError(error) ; }), finalize(() => this.processNextRequest()) ) ; this.queue.push(requestQueueItem$) ; if (this.queue.length <= 1) { this.dispatchRequest() ; } return result$ ; } } } return next.handle(request) ;

1. Gestion de l’erreur d’authentification

Lorsque nous appelons le point de terminaison de l’API, nous obtenons une erreur non autorisée, si le jeton de session a expiré. Nous devons gérer cette situation en redirigeant vers le point de terminaison d’authentification pour nous reconnecter. Nous pouvons le faire dans la méthode d’interception en interceptant l’erreur et en la traitant en conséquence.

Voir l’exemple ci-dessous : Le code important est surligné en bleu

• Nous détectons une erreur et la gérons. Recherche le code d’état et dépend parfois du navigateur. Manipulez-le en conséquence.

intercept(request : HttpRequest, next : HttpHandler) : Observable<HttpEvent> { let token ; let reqClone ; const reqUrl = request.url ; if (reqUrl.pipe( concatMap(_ => this.tokenService.tokenService.getToken() ; if (token !== null && !request.headers.has(this.clone({ headers : request.headers .set(this.body }) ; } }), concatMap(_ => next.handle(reqClone)), catchError((error : HttpErrorResponse) => { // erreur côté serveur if ( !( error.error instanceof ErrorEvent)) { Interceptor.handleAuthenticationError(error) ; } return throwError(error) ; }), finalize(() => this.processNextRequest()) ) ; this.queue.push(requestQueueItem$) ; if (this.queue.length <= 1) { this.dispatchRequest() ; } return result$ ; } } return next.handle(request) ; static handleAuthenticationError(proxyUrl : any, error : HttpErrorResponse) { /** * si une mauvaise requête ou non autorisée est reçue du proxy, rediriger vers authenticate. * Ajout d’une condition pour vérifier l’état est égal à 0 pour résoudre le problème avec les navigateurs sous Linux. */ if (error.status === 0 || error.status === 400 || error.status === 401) { if (proxyUrl) { ConfigService.redirect('http ://0.0.0.0/auth') ; } return ; } }

Maintenant, vous avez une idée de la façon de gérer la protection CSRF et les erreurs d’authentification à l’aide d’Angular Interceptor. Vous pouvez implémenter une protection CSRF dans votre application pour fournir une couche de sécurité supplémentaire et gérer tout type de réponse d’erreur.