Angular JS 1.x Security CSRF Protection

Defination: (Source:wiki)
Cross-site request forgery is an attack technique by which the attacker can trick an authenticated user into unknowingly executing actions on your website.
(or)
Cross-site request forgery, also known as one-click attack or session riding and abbreviated as CSRF or XSRF, is a type of malicious exploit of a website where unauthorized commands are transmitted from a user that the website trusts.
Prevention methods:

  1. Check standard headers to verify the request from same origin or not
  2. Check CSRF token and it’s validity against to user session Id.

AngularJS will support by default to avoid CSRF attacks, we need to send XSRF-TOKEN into browsers cookie, then angular will automatically pick and append X-XSRF-TOKEN as a header.

Cookie info:

AngularJS with a general $http promise will prepare header with X-XSRF-TOKEN, if one of the domain cookies contains a token with XSRF-TOKEN key name.
If we want to change HTTP header key name, with custom  XSRF token we need to provide defaults.xsrfHeaderName so that angular will prepare with custom token key.
Please check below code snap from angularJS framework for better understanding of how it works:

var xsrfValue = urlIsSameOrigin(config.url) ?
     $$cookieReader()[config.xsrfCookieName || defaults.xsrfCookieName]
     : undefined;
if (xsrfValue) {
  reqHeaders[(config.xsrfHeaderName || defaults.xsrfHeaderName)] = xsrfValue;
}

And check out this working example, inspect HTTP headers via developer tools.

 var app = angular.module('csrf_example', []);
 app.controller('MainCtrl', function($scope, $log, $http) {
 document.cookie = "XSRF-TOKEN=sjdjsdjsdbjhfg";
 $http.get('path').then(function() {
 console.log('Network call done!');
 });
 });

Leave a Reply

Your email address will not be published. Required fields are marked *