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.