How can you protect an Angular web app from cross-site request forgery attacks?

Cross-site request forgery (CSRF) is a type of web attack that exploits the trust between a user and a web server. It occurs when a malicious website or script sends a request to a web app that the user is already authenticated with, and performs an unwanted action on their behalf. For example, a CSRF attack could transfer funds from the user's bank account, change their password, or post a comment on their social media profile.

1 What is Angular?

Angular is a popular framework for building dynamic and interactive web applications. It uses TypeScript, a superset of JavaScript, to create components, services, directives, pipes, and modules. Angular also provides features such as data binding, routing, dependency injection, and testing tools. Angular is designed to be modular, scalable, and performant.

Add your perspective

Anil Singh

Solution Architect | Tech Lead | Tech Blogger at code-sample.com
(edited)
Report contribution
Cross-Site Request Forgery (CSRF) is an attack where an unauthorized user can perform actions on behalf of an authenticated user without their consent. To protect an Angular web app from CSRF attacks, you can follow these best practices: 1) Use CSRF Token in each HTTP request 2) Use HttpOnly and Secure Cookies 3) User SameSite Cookie Attribute 3) You need to import HttpClientModule with HttpClientXsrfModule and configure it in your app module: HttpClientXsrfModule.withOptions({ cookieName: 'XSRF-TOKEN', // default headerName: 'X-XSRF-TOKEN', // default }) Other as well

Like
Aurélien Altarriba

Développeur fullstack – Plateformes web & SaaS · Automatisation des processus métiers · Intégration d'IA – Fondateur d'Altarriba
Report contribution
Angular intègre nativement tout ce qui est essentiel dans le cycle de vie d'une application web, offrant un cadre de développement cohérent et sécurisé. De la création au déploiement, il gère la sanitisation des données comme la sécurité contre les attaques XSS/CSRF. Sa modularité, son système de routage, et son support pour les PWA en font un très bon choix quand la performance et la sécurité sont essentielles (les applications de grandes entreprises en particulier). Il est aussi soutenu par Google, ce qui renforce sa fiabilité !

Translated

Like

2 How does Angular prevent CSRF?

Angular has built-in mechanisms to prevent CSRF attacks by default. One of them is the HttpInterceptor service, which intercepts every outgoing HTTP request and adds a custom header called X-XSRF-TOKEN. This header contains a random token that is generated by the web server and stored in a cookie called XSRF-TOKEN. The web server expects to receive the same token in the header and the cookie for every request, and rejects any request that does not match. This way, Angular ensures that only requests from the same origin can access the web app.

Add your perspective

John Fredy Triana Camacho

Frontend Architect at Viewnext (IBM subsidiary)
Report contribution
También se puede un modulo de Angular 'HttpXsrfModule' diseñado para abordar problemas de seguridad relacionados con CSRF. CSRF es un tipo de ataque en el cual un atacante engaña a un usuario para que realice acciones no deseadas en una aplicación en la que el usuario está autenticado. HttpXsrfModule proporciona una capa de protección adicional para prevenir este tipo de ataques.

Translated

Like

3 How to configure the HttpInterceptor service?

The HttpInterceptor service is part of the HttpClientModule, which is a module that provides HTTP services for Angular. To use the HttpInterceptor service, you need to import the HttpClientModule in your app module, and provide an implementation of the HttpXsrfInterceptor class. The HttpXsrfInterceptor class has two properties: headerName and cookieName, which specify the names of the header and the cookie that contain the CSRF token. You can customize these properties according to your web server configuration. For example, you can use the following code to create a custom HttpXsrfInterceptor:

import { Injectable } from '@angular/core';
import { HttpXsrfInterceptor, HttpXsrfTokenExtractor } from '@angular/common/http';
@Injectable()
export class CustomHttpXsrfInterceptor implements HttpXsrfInterceptor {
  constructor(private tokenExtractor: HttpXsrfTokenExtractor) {}
  headerName = 'X-CSRF-TOKEN'; // change this to match your server
  cookieName = 'CSRF-TOKEN'; // change this to match your server
  intercept(req, next) {
    const token = this.tokenExtractor.getToken() as string;
    if (token !== null && !req.headers.has(this.headerName)) {
      req = req.clone({ headers: req.headers.set(this.headerName, token) });
    }
    return next.handle(req);
  }
}

Add your perspective

John Fredy Triana Camacho

Frontend Architect at Viewnext (IBM subsidiary)
Report contribution
En proyectos extensos con sólidos protocolos de conexión, suele recurrirse a la personalización del HttpInterceptor. No obstante, si aún no es necesario un interceptor personalizado, Angular proporciona un módulo integrado que resulta fácil de implementar: import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { HttpXsrfModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientModule, HttpXsrfModule.withOptions({ cookieName: 'XSRF-TOKEN', headerName: 'X-XSRF-TOKEN', }), ], // ... otras configuraciones si es necesario }) export class MyModule { } Proporciona seguridad CSRF en HTTP sin personalizar interceptor, útil para proyectos menos complejos.

Translated

Like

4 How to register the custom HttpXsrfInterceptor?

To register the custom HttpXsrfInterceptor, you need to add it to the providers array of your app module, and use the HTTP_INTERCEPTORS token to inject it into the HttpClientModule. For example, you can use the following code to register the custom HttpXsrfInterceptor:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { CustomHttpXsrfInterceptor } from './custom-http-xsrf-interceptor.service';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: CustomHttpXsrfInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add your perspective

5 How to test the CSRF protection?

To test the CSRF protection, you can use tools such as Postman or curl to send HTTP requests to your web app, and observe the response. If you send a request without the X-XSRF-TOKEN header or the XSRF-TOKEN cookie, or with a mismatched token, you should receive a 403 Forbidden response. If you send a request with a valid token, you should receive a 200 OK response. You can also use the browser's developer tools to inspect the network traffic and the cookies. You should see that every request from Angular has the X-XSRF-TOKEN header and the XSRF-TOKEN cookie, and that they match the token generated by the web server.

Add your perspective

Praful Kamble

Founder & Director @ Wiriya Technology Pvt Ltd. | ICT Consultant | Adobe Certified Professional - Adobe Commerce Business Practitioner | PRINCE 2® Practitioner & ITIL-F Certified
Report contribution
Angular automatically provides CSRF protection through a built-in mechanism known as the XSRF (Cross-Site Request Forgery) token. This token is generated on the server and sent to the client in an HTTP response header (XSRF-TOKEN). The client then includes this token in subsequent requests in a custom header (X-XSRF-TOKEN). The server validates the token in incoming requests to prevent CSRF attacks. Ensure that your Angular app is configured to use Angular's built-in CSRF protection. This typically involves setting up the HttpClientXsrfModule in your application module and configuring the server to include the XSRF token in responses. Ensure that the XSRF token is being included in the header of outgoing requests.

Like

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

Add your perspective

Jonas Gomes

Software Developer / Frontend / Backend / Full Stack | ReactNative | Reactjs | Angular | Javascript | Typescript | Php | Python | Nodejs | Docker | CSS3 | Cypress | Jira | Jest | HTML5
Report contribution
Certifique-se de que seu servidor esteja configurado para aceitar apenas solicitações de origens confiáveis. Configure cabeçalhos CORS (Cross-Origin Resource Sharing) adequadamente no servidor para restringir quais origens podem acessar recursos no servidor.

Translated

Like
John Fredy Triana Camacho

Frontend Architect at Viewnext (IBM subsidiary)
Report contribution
Recuerda que aunque Angular nos ayuda a implementar este mecanismo fácil, es crucial asegurarnos de que el servidor también esté configurado adecuadamente para manejar la prevención de CSRF. Ambos lados, el cliente y el servidor, deben trabajar juntos para proporcionar una solución efectiva contra este tipo de ataque u otros.

Translated

Like

How can you protect an Angular web app from cross-site request forgery attacks?

1

2

3

4

5

6

1 What is Angular?

2 How does Angular prevent CSRF?

3 How to configure the HttpInterceptor service?

4 How to register the custom HttpXsrfInterceptor?

5 How to test the CSRF protection?

6 Here’s what else to consider

Web Applications

Rate this article

Thanks for your feedback

More articles on Web Applications

More relevant reading

How can you protect an Angular web app from cross-site request forgery attacks?

1

2

3

4

5

6

1 What is Angular?

2 How does Angular prevent CSRF?

3 How to configure the HttpInterceptor service?

4 How to register the custom HttpXsrfInterceptor?

5 How to test the CSRF protection?

6 Here’s what else to consider

Web Applications

Rate this article

Thanks for your feedback

Explore Other Skills