130

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?

Improve this question
1

8 Answers 8

Reset to default
277

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
Improve this answer
Sign up to request clarification or add additional context in comments.

20 Comments

I like this technique, as you don't have to modify any client-side code.
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.
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?
@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!
form_authenticity_token generates new values on each call in Rails 4.2, so this doesn't appear to work anymore.
|
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.

Improve this answer

9 Comments

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).
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.
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?
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.
@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
|
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'
Improve this answer

3 Comments

any idea how you should configure your application controller and other csrf/forgery-related settings, to use angular_rails_csrf correctly?
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!
There is a new release of the gem, which supports Rails 5.
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')
Improve this answer

2 Comments

Why are you injecting $injector instead of just directly injecting $http?
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.
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.

Improve this answer

2 Comments

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.
But if you're not using Rails sessions all is well; thank you! I've been struggling to find the cleanest solution to this.
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
Improve this answer

Comments

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.

Improve this answer

Comments

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!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.