Security and localization using Angular in a Single Page Application?

Question

I am investigating creating Single Page Applications using the following stack (open to suggestions here)

• Angular
• JQuery
• ASP.Net MVC 4
• Entity Framework 5

I am pretty much sold on this stack and angular but there are a couple of things that I am unsure of. Different users have different roles and we will need to be able to hide/show certain pages and/or controls on pages depending on the role. I am familiar with some solutions for more traditional web applications but I am not sure where I would start when it comes to a single page application.

I was hoping to not use MVC partial views but rather only send and treat the server code like a WebApi. But then angular would have to handle all the templates and that would mean that someone would have access to the template on the front end and might be able to figure out to call functions that they shouldn't? Or should I be checking the role in the WebAPI methods and making sure that they have the right role?

The next problem is localization. We will need to support multiple languages. I was hoping that we could just have different languages files, en_gb.XML and that would contain keys and their various translations. Then if the user changed the language i would maybe just be able to change something in angular perhaps using value

angular.value("language", 'en_gb.js');

or

angular.value("language", 'en_gb.xml');

Has anyone else solved these sorts of problems.

Answer 1

Security : You should let AngularJS control everything in the view like template, partial views, etc, because AngularJS is a full-featured Front-End framework. Because it is only Front-End Framework, it is not responsible for server data, so just do some RESTful call to fetch/save/update/delete data. And it is also NOT responsible of security, so what you call the "WebApi" MUST be 100% secured on the server side. So that even if someone is able to figure out what call he is not allowed to do, the call will not be successful, because its credentials will be checked in the server-side. There are are still malicious possibles attacks, for which AngularJS has an answer. Please see the "security consideration" section of http://docs.angularjs.org/api/ng.$http.

Localization : AngularJS supports localization for currency, date, and number. But for Strings in your UI, there is nothing yet built-in into the langage. You have to build your own answer. There are some attempts to achieve translation with AngularJS, like here : https://github.com/firehist/grunt-angular-translate

Answer 2

I can help you with the security stuff here. You need to implement custom some custom logic to hide\show elements based on user role. As long as you can pass user role information to client you can implement such show\hide logic. Keep in mind this show\hide logic should be driven by server or else anyone can change client side data and get access to functionality.

One way to achieve this would be return server side templates (partial views) to client for rendering (both ng-include and ng-view support loading server templates). The server can validate whether the user has rights to access and return empty response on failure. So there is no possibility of leaked information.

A similar check can be added for all webapi calls to and return unauthorize status code to end user.