I'm building a multi-role application using asp.net mvc, angularjs and asp.net web api, where mvc level serves as a wrapper over angularjs spa and for cookie-based authentication. HomeController renders a start page and suggests logging-in. If a user is authorized he gets access to functionality based on roles he has. Say, we have 3 roles in system: admin, manager and employee. One user can have many roles. All web api methods are restricted with Authorize filter attribute.
I don't want an end-user to be able to reach js and html content that is not intended for his role. For example, we have a page that represents some information of an employee. An employee should see first name, last name, birthdate on the page. But if a user belongs to admin role, he also can see some additional information (e.g. color of briefs). Imagine an end-user who is employee is familiar with javascript and using debugger he can learn that admins see some more secret information about him.
For example in web-forms, we don't expose that details, because all logic related on roles runs on server and an end-user gets only result without ability to learn anything more than he sees on page in browser. In spa application we don't build pages on server, so the logic is implicitly accessible in js files.
What I thought out is to move all js and html files to App_Data folder, because this folder is protected by asp.net and to create a web api method that returns html and js content based on user-roles. I would introduce a comments in js-code like:
function getEmployeeInfo() {
}
// #:admin,manager
function getSecretEmployeeInfo() {
}
// #
for html we can use something like
<!-- #:admin,manager --> Secret info <!-- # -->
So only admins and managers would obtain content between #:admin,manager and # removing that content if user is not in the roles. Also I have an idea to restrict access to all js or hml files in a folder putting a special file that would contain a list of roles, so it would work like authorization tag in web.config in webforms application. The server would get the name of file in request (simple get request with the name specified in url, e.g'script?name=hi.js'), would build the js or html files based on roles, would cache the result and would return the file.
For me the problem looks pretty obvious in spa and I wonder if there is some 'build-in' or common solution.
