DEV Community

Cover image for Cross-Site Request Forgery (CSRF) Attack!
Anil Singh
Anil Singh

Posted on

Cross-Site Request Forgery (CSRF) Attack!

How can you protect an Angular web app from cross-site request forgery attacks?
**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:

  • Use CSRF Token in each HTTP request
  • Use HttpOnly and Secure Cookies
  • SameSite Cookie Attribute
  • You need to import HttpClientModule with HttpClientXsrfModule and configure it in your app module:

import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';

imports: [
cookieName: 'XSRF-TOKEN', // default
headerName: 'X-XSRF-TOKEN', // default
export class AppModule {}

For more about - Angular 17 Overriding LifeCycle methods | Overriding vs Overloading

Top comments (1)

anilsingh profile image
Anil Singh • Edited

Angular 17 Tutorials:-
Install Angular 17 with Standalone (true):-
Angular 17 Routing For Beginners:-
What Is Server-Side Rendering (SSR) and Why use?:-
Angular 17 Component Inheritance:-
using ViewContainerRef To Render Dynamic Components:-
Component Lifecycle Hooks:-
Prerendering Static Site Generation (SSG):-
Angular 17 for loop @for block Repeaters :-
Angular 17 if else statement example:-
What's New in Angular 17?:-