Angular JS Verify CSRF Token in POST Request

Question

I am using AngularJS with Rails. I have the following request which updates users in bulk.

 $http{
    method: 'POST',
    url: $scope.update_url,
    params: {selected_ids: userIds}
 }

This cannot be a 'GET' request due to restrictions in the length of the URL (http://support.microsoft.com/kb/208427)

But for 'POST' request, we need to have a CSRF authenticity token in the header.

How can we set the CSRF Token to the post request header?

Answer 1

You can set http headers as explained in the $http service.

You can set it up globally:

$httpProvider.defaults.headers.post['My-Header']='value'   (or)
$http.defaults.headers.post['My-Header']='value';

or for a single request:

$http({
   headers: {
      'My-Header': 'value'
   }  
});

Here is an important quote from Angular:

Cross Site Request Forgery (XSRF) Protection XSRF is a technique by which an unauthorized site can gain your user's private data. Angular provides following mechanism to counter XSRF. When performing XHR requests, the $http service reads a token from a cookie called XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN. Since only JavaScript that runs on your domain could read the cookie, your server can be assured that the XHR came from JavaScript running on your domain.

To take advantage of this, your server needs to set a token in a JavaScript readable session cookie called XSRF-TOKEN on first HTTP GET request. On subsequent non-GET requests the server can verify that the cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that only JavaScript running on your domain could have read the token. The token must be unique for each user and must be verifiable by the server (to prevent the JavaScript making up its own tokens). We recommend that the token is a digest of your site's authentication cookie with salt for added security.