Rails4, AngularJS, CSRF and Devise

I’ve been working further on my application, and run into a few challenges and issues with CSRF, so I’m elaborating a bit on my earlier post.  At some point my tutorials will be updated to deal with this, but for now this is a place holder that describes what CSRF protection does, where the issues lie, and what resolutions I’ve found to the overall problem.

Firstly, it seems that there are two general developer classes with Rails – those who are developing a Rails web application and therefore use Rails to create the pages, and those who are building an API using Rails, and seem to turn off CSRF protection and use an API key to authenticate (in a sense I see an API key as a long-lived username and password, so I’m not a big fan for applications that require strong security).

I’m living in a middle space – the application front-end is all AngularJS, and it’s calling Rails asynchronously using JSON.  But I’m still aiming to use Devise as my authentication engine, and I want to use CSRF to protect against malicious scripts that manipulate the API without the user knowing it.  The default configurations don’t really appear to deal with this situation well.

In discussing the solution, I’ll start with a simplified discussion of what CSRF protection should and shouldn’t do, and then what pieces are needed to integrate (reasonably) cleanly.

Continue reading


8: Deletes and resource error handling

Part 8 of the tutorial focuses on adding a delete button to our ngGrid, and adding error handling in case our rails application rejects our updates.  You can find the tutoral index, or hit the tutorials menu at the top and select the Rails 4 tutorial.

If you haven’t completed the earlier tutorials, you can get the code at github:PaulL tutorial_7.

Continue reading

6: Adding ngGrid, and edit page, and CSRF/JSONP protection

In this, the sixth post in the rails 4 tutorial, we change our clubs list page to use ngGrid instead of our home-made table.  We also implement an edit page for our clubs.  A key difference from the rails 3 version of this tutorial is that we’re implementing our edit page as a page rather than a modal dialog.

If you have dropped into the middle of the tutorial you can find the code from the previous step in this tutorial at github:PaulL:tutorial_5, or you can find those tutorial pages either from the index page, or by hitting the tutorials menu in the menu bar above.

Continue reading

5: End to end testing

Part 5 of our tutorial, in this section we implement end-to-end testing using protractor and astrolabe to create modularised tests.

If you have dropped into the middle of the tutorial you can find the code from the previous step in this tutorial at github:PaulL:tutorial_4, or you can find those tutorial pages either from the index page, or by hitting the tutorials menu in the menu bar above.

Continue reading

4: Adding a basic list using $resource for a restful query from rails

In this post we start building out our AngularJS client, using ngResource to pull data from our rails 4 server.  At the end of section 4 we should have a basic clubs list function operational.

In this post, I’m going to talk a bit more about what angular is actually doing, and how it connects to rails.  Hopefully it will be semi-understandable, but I’ll note that it’s taken me a few weeks to bend my brain around what angular is doing – it’s quite different than rails.

If you’ve dropped into the middle of this tutorial, you can get the code for part 3 of the tutorial from gitHub:PaulL.  If you’re looking for the other parts of this tutorial you can find them by going to the index page or hitting the tutorials menu above.

Continue reading

3: Installing ng-boilerplate, and serving it through rails

In section three of the Rails 4 and AngularJS tutorial, we make use of the excellent ng-boilerplate template provided by joshdmiller.

Note before you begin this section of the tutorial that ng-boilerplate is close to version 4.0, and that version will change the structure substantially.  I’m planning to plug that content in over the next few weeks as it comes available, so expect this tutorial to be evolving.  It should be fit for use, but if you complete it over multiple days you may find that it changes under you whilst you’re doing it.  Caveat emptor.

Continue reading

2: Creating the base rails backend

In this portion of the Rails4 and AngularJS tutorial we build the base of the rails backend.  We’ll come back later and add Devise and CanCan to it, for now we’re just focusing on having an application that runs and serves json, at the end of this segment you should end up with a Rails server that is providing clubs.json and teams.json, ready to have the Angular frontend added.

If you’re interested in the rest of this tutorial, you can visit the index page, or you can hit the tutorials menu above and look at the rails 4 tutorial category.  If you haven’t yet installed Rails 4 you may want to look at the previous page on installation, and if you’re fine with the Rails portion, you may want to move onto the next page that starts the AngularJS install.  Finally, the code for the position at the end of this section of the tutorial can be found on github:PaulL:tutorial_1_and_2.

Continue reading