Angular 2 – How to Secure Apps from CSRF/XSRF Attack

September 13, 2017 by Ajitesh Kumar · Leave a comment

This blog represents concepts and code samples in relation with securing Angular apps from from CSRF or XSRF attack. The following points are covered:

  • Different types of CSRF/XSRF tokens
  • Angular’s default CookieXSRFStrategy
  • Server-side processing of XSRF tokens
  • Angular custom CookieXSRFStrategy implementation

Different Types of CSRF/XSRF Tokens

CSRF/XSRF tokens can be of following different types:

  • Per-session token: The token is generated once per session. With each request, the token is sent. Server verifies the correctness of the token and validity in terms of whether the token is expired or not.
  • Per-request token: The token can be generated for each request and later verified and validated.

With Angular apps, any one of the above can be implemented as the token strategy such as above is implemented on server-side. Angular apps, in any case, sends the XSRF-TOKEN value as request header X-XSRF-TOKEN in each of the subsequent requests.

Angular’s Default CookieXSRFStrategy for Processing Request-Response

Angular comes with built-in support for CSRF attack prevention in form of Angular HTTP service, by default, turning on CookieXSRFStrategy. CookieXSRFStrategy is an implementation of XSRFStrategy interface. As part of CookieXSRFStrategy, Angular does following with each request:

  • Looks for a cookie, namely, XSRF-TOKEN in the server response that arrived.
  • Sets X-XSRF-TOKEN as one of the request header. Set the value of X-XSRF-TOKEN header equal to the value of XSRF-TOKEN cookie returned earlier as part of the server response.

Server-side Code to Process XSRF tokens

With X-XSRF-TOKEN set as request header, request is sent to the server. On server-side, the following is done:

  • Server code looks for both, XSRF-TOKEN and X-XSRF-TOKEN and match their values. Server rejects the request if the values of XSRF-TOKEN and X-XSRF-TOKEN does not match.

Angular Custom CookieXSRFStrategy Implementation

Alternatively, different cookie names (in place of XSRF-TOKEN) can be used by the server. Accordingly, Angular can customize the cookie names appropriately by creating CookieXSRFStrategy with different cookie names. The following is the sample code:

{provide: XSRFStrategy, useValue: new CookieXSRFStrategy('custom-cookie', 'custom-headername')}

The custom CookieXSRFSTrategy , as mentioned previously, can be defined in the root module such as AppModule. The following code represents the same:

@NgModule({
    imports: [ ... ],
    declarations: [ ...],
    providers: [ {provide: XSRFStrategy, useValue: new CookieXSRFStrategy('custom-cookie', 'custom-headername')},]
    bootstrap: [ AppComponent ]
})
export class AppModule { }

The details such as above and much more can be obtained from my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.

Ajitesh Kumar
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
Posted in AngularJS, Javascript, Web. Tagged with , , , .