JSON / JSONP XSS vulnerability with AngularJS and Rails

In reading the AngularJS documentation for the $http service, there is a very clear warning about a potential JSON/JSONP vulnerability.  The short version of this is that JSONP was introduced as a technique to build mashups and composite applications, it allows one domain to call services on another domain.

The problem is that JSON is considered syntactically valid JSONP.  So a service that you built as JSON can be called using a JSONP tag.  Further, through some esoteric magic, it is possible for one web site to submit a request to another website using your already signed in session, and then gain access to the response method from javascript on the first site.  In other words, for that first site to have script embedded in it that does things with your logged in session on another website.

The outline description of this can be found on the AngularJS $http page, in the security considerations section.

The CSRF vulnerability mentioned on that page is dealt with in this post on this blog.  This post provides my current solution to the JSON/JSONP issue.

Continue reading

Advertisements

Rails generator to generate angular views

It would be great if the rails generator could generate the angular views for us, this post walks through tailoring the generators to give that outcome.  The format for the angular content I’m going to generate matches the setup in my various AngularJS and rails tutorials, and in particular the angular components created match those of the ng-boilerplate project.

We’ll assume that we want to create an angular view that offers a list and a modal form, with CRUD functionality and a unit test that hits the highlights.  We’re not going to try to update the app.js file or index.html, that’ll have to be done manually. We’re going to follow the edgeguide on generators for guidance.

Continue reading

AngularJS and Devise – authentication with a rails server

Having spent some time building a sample app that integrates rails with AngularJS, I’m now looking at some of the other features to make that functionality more enterprise-ready.  The framework I’ve been working on uses devise, cancan and rolify to control access to applications.

In this configuration devise provides the authentication, and cancan/rolify provide role based access to functions within the application.  I’ll deal with cancan and rolify in a later post, as it’s necessary for Angular to know what accesses you have in deciding what links and buttons to show you.  In this post, we’ll deal with using Devise for logon with an AngularJS frontend.

This will break down into three main elements:

  1. Provision of a registration page that matches the Devise expectations and calls the Devise register method and password change method
  2. Provision of a logon page that matches the Devise expectations and that calls the Devise logon method and associated methods such as password resets etc
  3. Provision of functionality such that AngularJS can detect that a user is not logged on and redirect the user to the logon page, rather than just having each server interaction fail

Continue reading

AngularJS and Rails: CSRF protection

In working through AngularJS and Rails integration, one of the matters that comes up frequently is CSRF protection. This is an important security measure, and this post points to the solution that I found on stackoverflow, and provides the code snippet that I implemented, and how I verified that it seems to be working.  This content has also been included in the Rails 3 and AngularJS tutorial, available from the tutorials menu above, and the Rails 4 and AngularJS tutorial, also available from the tutorial menu above, or this specific post within that tutorial.

There is also a more thorough treatment of this content in another post, here (described in more detail at the bottom of this post).

Continue reading

AngularJS and Rails Tutorial: part 4.5 unit testing bootstrap modals with Karma

Part 4.5 of a tutorial that connects AngularJS to a Rails backend. This post focuses on creating karma unit tests for the edit controller and the modal dialog, including mocking the modal dialog.  The previous post was ngGrid and a modal popup, the next post is New and Delete.  You can also find the index of the posts in the tutorial, or hit the tutorials menu at the top and select the Rails 3 tutorial.

I’ve split this content out into a separate post for two reasons.  Firstly, at time of writing this is incomplete, I still have an outstanding item on verifying the parameters passed in as promises.  Secondly, it’s going to be reasonably complicated once it’s done, and I’m assuming that some people will just want to get their Angular app going, and skip over the testing.  So, a separate page.

There is a newer, rails 4 and newer angularJS, version of this tutorial.  It is also more complete and has a nicer UI that doesn’t use modal windows, which is probably a better choice for anyone starting fresh today.  The first page in that tutorial is here, and the index here.

Continue reading

AngularJS and Rails – shared directory or not

I previously discussed how I thought it best to integrate rails and AngularJS.  I kicked off a process to build a standalone rails app and a standalone AngularJS app, with the two loosely coupled.  This I thought had a lot of benefits in terms of giving access to the best of the tooling of each framework, the rails and rspec tooling at the rails end, the grunt and karma tooling at the Angular end.  Having done that, I am now considering putting those two apps into the same directory for one key reason: my rails and my angular are in different git repositories, and it seems like I’m going to get the two out of synch.

Part of the answer is that if my app is loosely coupled that shouldn’t be a problem.  But in basic application development terms it’s actually easier if they’re in the same directory.  So, I’ve done a proof of concept of taking my existing tutorial and building instead in a single directory.  It works fine, and the two toolsets don’t seem to argue with each other.  So I think that can work, and it gives a single git repository.  I have seen reports that this gives problems with Rails 4 (Rails 4 has a bin directory, as does ng-boilerplate), and I have dealt with this in the Rails 4 version of this tutorial.

Continue reading

AngularJS and Rails Tutorial: part 7 form error handling, datepicker

Part 7 of a tutorial that connects AngularJS to a Rails backend. This post focuses on better error handling, adding a datepicker to the modal, and generally tidying up the application, making it prettier and removing some of the sample app that came with ng-boilerplate so that this is more a League application.  The previous post was Creating teams and a relationship between clubs and teams, the next post is not written yet (although there are some ancillary items such as CSRF and Devise integration on the index page).  You can also find the index of the posts in the tutorial, or hit the tutorials menu at the top and select the Rails 3 tutorial.

There is a newer, rails 4 and newer angularJS, version of this tutorial.  It is also more complete and has a nicer UI that doesn’t use modal windows, which is probably a better choice for anyone starting fresh today.  The first page in that tutorial is here, and the index here.

Continue reading