CODEWITHSUNDEEP
asp.netangularjssecurity
user1620696
user1620696

Reputation: 11375

Securing HTML in AngularJS + ASP.NET

I've been searching about how to implement authentication/authorization in SPA's with AngularJS and ASP.NET Web API and I have one doubt. First we can implement authentication and authorization on server side with ASP.NET Identity. Then we create an Angular service to use this to authenticate a user and after that requests to Web API actions that use the Authorize attribute will be allowed.

There's still one problem. The logged in user will probably won't be allowed to access some pages of the app. Although using the app itself it won't be allowed, the HTML for the SPA is still available. If the user goes to http://website.com/app/views/notAllowedPage.html it will render in the browser. It's really not useful I know, but still I think to be a security failure, since the user shouldn't be allowed to get this HTML from the server.

Is there a way to secure this HTML or it is simply not possible?

Upvotes: 2

Views: 273

Answers (3)

Deepak Mittal
Deepak Mittal

Reputation: 81

Create a service for securing your Angular htmlpage As per the these services a guest user can't access the secure pages

Angular service

angular.module('application').factory('authorizationService', function ($resource, $q, $rootScope, $location,dataFactory) { return { permissionCheck: function (roleCollection) {
var deferred = $q.defer(); var parentPointer = this; var user = dataFactory.getUsername(); var permission = dataFactory.getUserRole() var isPermissionLoaded=dataFactory.getIsPermissionLoaded(); if (isPermissionLoaded) { this.getPermission(permission, roleCollection, deferred); } else { $location.path("/login"); } return deferred.promise; },

    getPermission: function (permission, roleCollection, deferred) {
        var ifPermissionPassed = false;
        angular.forEach(roleCollection, function (i,role) {
            switch (role) {
                case roles.ROLE_USER:
                                    angular.forEach(permission, function (perms) {
                                        if (perms=="ROLE_USER") {
                                            ifPermissionPassed = true;
                                        }
                                    });
                                    break;
                case roles.ROLE_ADMIN:
                                    angular.forEach(permission, function (perms) {
                                        if (perms=="ROLE_ADMIN") {

                                            ifPermissionPassed = true;
                                        }
                                    });
                                    break;
                default:
                                    ifPermissionPassed = false;
            }
        });
        if (ifPermissionPassed==false) {
            $location.path("/login");
            $rootScope.$on('$locationChangeSuccess', function (next, current) {
                deferred.resolve();
            });
        } else {
            deferred.resolve();
        }
    },

    isUserAuthorised: function () {    
        var isPermissionPassed = false;

        var permission  = dataFactory.getUserRole()
        var isPermissionLoaded=dataFactory.getIsPermissionLoaded();

        if (isPermissionLoaded) {
            angular.forEach(permission, function (perms) {
                if (perms=="ROLE_USER") {   
                    ifPermissionPassed = true;
                }
            });
        } 

        return isPermissionPassed;
    }
};

});

and this code for your app.js where u mention your url and their controller var application = angular.module('application', ['ngRoute']);

var roles = { ROLE_USER: 0, //these are the roles which I want to secure from guest user ROLE_ADMIN: 1

};

var routeForUnauthorizedAccess = '/login'; //if any unauthories user access the page the user will redirect on the login page

$routeProvider.when('/', { templateUrl: 'view/home.html', controller: 'homepage' }).when('/login', { templateUrl: 'view/loginpage.html', controller: 'login' }).when('/signup', { templateUrl: 'view/signup.html', controller: 'signup' }).when('/dashboard', { templateUrl: 'view/dashboard.html', controller: 'dashboard', resolve: { permission: function(authorizationService, $route) { return authorizationService.permissionCheck([roles.ROLE_USER, roles.ROLE_ADMIN]); }, }

// the last dashboard page is access by only admin and the user who logged IN

Upvotes: 0

PeterFromCologne
PeterFromCologne

Reputation: 10453

We discussed the same problem in our developers group. Our conclusion was not to see this as a security thread.

What you want to protect is the data that is displayed, not the static "layout" of a HTML page. As long as the WebAPI services that deliver the data are secured and only allow authorized users to retrieve the data, we are safe.

Would that suit your needs as well?

Upvotes: 1

Phil Sandler
Phil Sandler

Reputation: 28016

We currently use this same setup.

Since we are using Angular, we don't do much with MVC itself or the Razor engine. The only things we are really doing with Razor is rendering a layout and the basic page (usually Index()).

So my recommendation is to do the same--instead of having a page website.com/app/views/notAllowedPage.html, have the user navigate to website.com/app/NotAllowed/, and secure the NotAllowedController with an Authorize attribute.

Upvotes: 0

Related Questions