131

If the protect_from_forgery option is mentioned in application_controller, then I can log in and perform any GET requests, but on very first POST request Rails resets the session, which logs me out.

I turned the protect_from_forgery option off temporarily, but would like to use it with Angular.js. Is there some way to do that?

1

8 Answers 8

278

I think reading CSRF-value from DOM is not a good solution, it's just a workaround.

Here is a document form angularJS official website http://docs.angularjs.org/api/ng.$http :

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 (CSRF Protection), 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

Here is my solution based on those instructions:

First, set the cookie:

# app/controllers/application_controller.rb

# Turn on request forgery protection
protect_from_forgery

after_action :set_csrf_cookie

def set_csrf_cookie
  cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
end

Then, we should verify the token on every non-GET request.
Since Rails has already built with the similar method, we can just simply override it to append our logic:

# app/controllers/application_controller.rb

protected
  
  # In Rails 4.2 and above
  def verified_request?
    super || valid_authenticity_token?(session, request.headers['X-XSRF-TOKEN'])
  end

  # In Rails 4.1 and below
  def verified_request?
    super || form_authenticity_token == request.headers['X-XSRF-TOKEN']
  end
20
  • 18
    I like this technique, as you don't have to modify any client-side code. Apr 12, 2013 at 16:16
  • 11
    How does this solution preserve the usefulness of CSRF protection? By setting the cookie, the marked user's browser will send that cookie on all subsequent requests including cross-site requests. I could set up a malicious third party site that send a malicious request and the user's browser would send 'XSRF-TOKEN' to the server. It seems like this solution is tantamount to turning off CSRF protection altogether.
    – Steven
    Apr 19, 2013 at 14:42
  • 10
    From the Angular docs: "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." @StevenXu - How would the third party site read the cookie? Apr 20, 2013 at 19:22
  • 9
    @JimmyBaker: yes, you're right. I've reviewed the documentation. The approach is conceptually sound. I confused the setting of the cookie with the validation, not realizing that Angular the framework was setting a custom header based on the value of the cookie!
    – Steven
    Apr 20, 2013 at 21:08
  • 5
    form_authenticity_token generates new values on each call in Rails 4.2, so this doesn't appear to work anymore.
    – Dave
    Dec 22, 2014 at 18:30
78

If you're using the default Rails CSRF protection (<%= csrf_meta_tags %>), you can configure your Angular module like this:

myAngularApp.config ["$httpProvider", ($httpProvider) ->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
]

Or, if you're not using CoffeeScript (what!?):

myAngularApp.config([
  "$httpProvider", function($httpProvider) {
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
  }
]);

If you prefer, you can send the header only on non-GET requests with something like the following:

myAngularApp.config ["$httpProvider", ($httpProvider) ->
  csrfToken = $('meta[name=csrf-token]').attr('content')
  $httpProvider.defaults.headers.post['X-CSRF-Token'] = csrfToken
  $httpProvider.defaults.headers.put['X-CSRF-Token'] = csrfToken
  $httpProvider.defaults.headers.patch['X-CSRF-Token'] = csrfToken
  $httpProvider.defaults.headers.delete['X-CSRF-Token'] = csrfToken
]

Also, be sure to check out HungYuHei's answer, which covers all the bases on the server rather than the client.

9
  • Let me explain. The base document is a plain HTML, not .erb therefore I cannot use <%= csrf_meta_tags %>. I thought that there should be enough to mention protect_from_forgery only. What to do? The base document must be a plain HTML (I am here not the one who chooses).
    – Paul
    Feb 6, 2013 at 19:15
  • 3
    When you use protect_from_forgery what you're saying is "when my JavaScript code makes Ajax requests, I promise to send an X-CSRF-Token in the header that corresponds to the current CSRF token." In order to get this token, Rails injects it into the DOM with <%= csrf_meta_token %> and get gets the contents of the meta tag with jQuery whenever it makes Ajax requests (the default Rails 3 UJS driver does this for you). If you're not using ERB, there's no way to get the current token from Rails into the page and/or the JavaScript--and thus you cannot use protect_from_forgery in this manner. Feb 6, 2013 at 19:29
  • Thank you for explanation. What I thought that in a classic server-side application the client side receives csrf_meta_tags each time the server generates a response, and each time these tags are different from previous ones. So, these tags are unique for each request. The question is: how the application receives these tags for an AJAX request (without angular)? I used protect_from_forgery with jQuery POST requests, never bothered myself with getting this CSRF token, and it worked. How?
    – Paul
    Feb 6, 2013 at 19:47
  • 1
    The Rails UJS driver uses jQuery.ajaxPrefilter as shown here: github.com/indirect/jquery-rails/blob/c1eb6ae/vendor/assets/… You can peruse this file and see all the hoops Rails jumps through to make it work pretty much without having to worry about it. Feb 6, 2013 at 19:54
  • @BrandonTilley wouldn't it make sense do only do this on put and post instead of on common? From the rails security guide: The solution to this is including a security token in non-GET requests Apr 12, 2013 at 15:09
29

The angular_rails_csrf gem automatically adds support for the pattern described in HungYuHei's answer to all your controllers:

# Gemfile
gem 'angular_rails_csrf'
3
  • any idea how you should configure your application controller and other csrf/forgery-related settings, to use angular_rails_csrf correctly? Apr 17, 2015 at 21:03
  • At the time of this comment the angular_rails_csrf gem doesn't work with Rails 5. However, configuring Angular request headers with the value from the CSRF meta tag works!
    – bideowego
    Sep 23, 2016 at 20:33
  • There is a new release of the gem, which supports Rails 5.
    – jsanders
    Dec 7, 2016 at 15:02
4

The answer that merges all previous answers and it relies that you are using Devise authentication gem.

First of all, add the gem:

gem 'angular_rails_csrf'

Next, add rescue_from block into application_controller.rb:

protect_from_forgery with: :exception

rescue_from ActionController::InvalidAuthenticityToken do |exception|
  cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
  render text: 'Invalid authenticity token', status: :unprocessable_entity
end

And the finally, add the interceptor module to you angular app.

# coffee script
app.factory 'csrfInterceptor', ['$q', '$injector', ($q, $injector) ->
  responseError: (rejection) ->
    if rejection.status == 422 && rejection.data == 'Invalid authenticity token'
        deferred = $q.defer()

        successCallback = (resp) ->
          deferred.resolve(resp)
        errorCallback = (resp) ->
          deferred.reject(resp)

        $http = $http || $injector.get('$http')
        $http(rejection.config).then(successCallback, errorCallback)
        return deferred.promise

    $q.reject(rejection)
]

app.config ($httpProvider) ->
  $httpProvider.interceptors.unshift('csrfInterceptor')
2
  • 1
    Why are you injecting $injector instead of just directly injecting $http? Aug 20, 2014 at 2:23
  • This works, but only think I added is check if request already repeated. When it was repeated we do not send again since it will loop forever. Sep 29, 2016 at 16:22
1

I saw the other answers and thought they were great and well thought out. I got my rails app working though with what I thought was a simpler solution so I thought I'd share. My rails app came with this defaulted in it,

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
end

I read the comments and it seemed like that is what I want to use angular and avoid the csrf error. I changed it to this,

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :null_session
end

And now it works! I don't see any reason why this shouldn't work, but I'd love to hear some insight from other posters.

2
  • 7
    this will cause issues if you are trying to use rails 'sessions' since it will be set to nil if it fails the forgery test, which would be always, since you're not sending the csrf-token from the client side.
    – hajpoj
    Jun 24, 2014 at 23:28
  • But if you're not using Rails sessions all is well; thank you! I've been struggling to find the cleanest solution to this.
    – Morgan
    Oct 2, 2014 at 21:14
1

I've used the content from HungYuHei's answer in my application. I found that I was dealing with a few additional issues however, some because of my use of Devise for authentication, and some because of the default that I got with my application:

protect_from_forgery with: :exception

I note the related stack overflow question and the answers there, and I wrote a much more verbose blog post that summarises the various considerations. The portions of that solution that are relevant here are, in the application controller:

  protect_from_forgery with: :exception

  after_filter :set_csrf_cookie_for_ng

  def set_csrf_cookie_for_ng
    cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
  end

  rescue_from ActionController::InvalidAuthenticityToken do |exception|
    cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
    render :error => 'Invalid authenticity token', {:status => :unprocessable_entity} 
  end

protected
  def verified_request?
    super || form_authenticity_token == request.headers['X-XSRF-TOKEN']
  end
1

I found a very quick hack to this. All I had to do is the following:

a. In my view, I initialize a $scope variable which contains the token, let's say before the form, or even better at controller initialization:

<div ng-controller="MyCtrl" ng-init="authenticity_token = '<%= form_authenticity_token %>'">

b. In my AngularJS controller, before saving my new entry, I add the token to the hash:

$scope.addEntry = ->
    $scope.newEntry.authenticity_token = $scope.authenticity_token 
    entry = Entry.save($scope.newEntry)
    $scope.entries.push(entry)
    $scope.newEntry = {}

Nothing more needs to be done.

0
 angular
  .module('corsInterceptor', ['ngCookies'])
  .factory(
    'corsInterceptor',
    function ($cookies) {
      return {
        request: function(config) {
          config.headers["X-XSRF-TOKEN"] = $cookies.get('XSRF-TOKEN');
          return config;
        }
      };
    }
  );

It's working on angularjs side!

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.