Angular JS security best practice

Question

I have developed an Angular J'S app which uses a Rest API to access it's data.

I have a login service on the server which sends back a token used in all future requests. No token, no data. Once the token expires a 403 status code is sent from the server and the user is shown the login form.

This is working well, but it does worry me a bit that an unauthenticated user visiting the site for the first time will receive every template/view when the angular app loads, before logging in.

That's not a problem for this project, but my next project is for a business which may not want their competitors sniffing round the app and looking at menus etc. even though they can't get any data without a valid account.

Is this just a problem with all single page apps, or might their be a way to check a login on initial page load before loading all the template files and controller files?

Answer 1

I think I see what you're saying. The issue with Angular, using views, etc., is that a lot of does not have much to do with access control, but instead hiding what the user can or can't see. That's simply because these types of MV* framework are on the client-side. Usually the solution to this seems to be handling things on the server (privately), and then sending them to the client only if the client has access to those resources (by using, for example as you mentioned, a token.)

If you haven't looked into using Node.js, it makes it pretty easy to deal with this issue (Node.js isn't the only option, obviously; any other server can do this, but it will involve configuring the server. With Apache, for example, you can use the .htaccess file.)

Anyway, if you use the Express engine with Node.js, it sets up the skeleton for your app, using a public folder, which holds only the static content that users will be able to access (and when I say static content, I mean .html, .css, .js files, etc.) If there's something you don't want to show the user unless they have authorization to see it, you can serve that resource up from another location and simply render it and send it off to the client side. Using Jade with Node.js/Express is a great example of this.

Answer 2

I'm not sure of a reason why this would be an issue. HTML & JavaScript should't have sensitive information included in it anyways. All of these things are readily available to anyone that wants to see them. Maybe it'd be an issue with a company Intranet, but even then, Menu structure and other similar elements wouldn't be a big concern to me.

If for some reason it is, you'll want to switch your delivery method. Rather than having HTML templates already built on client-side, you would want to deliver them from the Server. So switch to a PHP single-page-app (or some other server side language).