CODEWITHSUNDEEP
angularjs
Leonardo
Leonardo

Reputation: 314

Secure admin panel with AngularJS

I'd like to build a web application with AngularJS (client) and a RESTful API (server) using PHP + MySQL, just for studying purpose. The application must have admin panel, protected by login.

I'm using ui-router to prevent unauthorized users to access the panel, but as far as I know, every code on client side is not safe.

What if a malicious user modify the code to grant access to the panel without login? I know that the server data and code are protected, but not the HTML partials (layout is exposed), different from a common PHP application, where the views are "protected" in the server side. Should I be worried about it?

Upvotes: 3

Views: 1342

Answers (2)

Lucas
Lucas

Reputation: 10313

I would use $httpProvider to set up at least a basic token based login with a token/user check. You could manage the headders with an Auth service and methods like login(), logout, isLogedIn() to handle and save states to $cookies for example. This way, a malicious user could hack and gain access to the html templates, but with no database data... Minnifying your code helps avoid this risk as well.

angular.module('myApp', [])
         .run(['Auth', '$location', '$rootScope', function (Auth, $location, $rootScope) {

            $rootScope.$watch(function () {
                if (!Auth.isLogedIn())
                    $location.path("/login");

                return $location.path();
            });
        }])
       .config(['$routeProvider', '$httpProvider',
        function ($routeProvider, $httpProvider) {
            $routeProvider
                    .when('/home', {templateUrl: 'partials/home.html'})
                    .when('/login', {templateUrl: 'partials/login.html', controller: 'LoginCtrl'})
                    .when('/logout', {templateUrl: 'partials/login.html', controller: 'LogoutCtrl'})
                    .otherwise({redirectTo: '/home'});
                $httpProvider.defaults.headers.common["Authorization"] = "";
                $httpProvider.defaults.headers.common["X-User"] = "";
            }
        ]);

From code snippet:

  • $httpProvider.defaults.headers.common will set a headder on each request.
  • $httpProvider.defaults.headers will set headder only for next request.
  • On run the $watch set on $rootScope will be triggered on each change to scope isLogedIn() should check the headder token with the entry in the database.

Upvotes: 1

George Chen
George Chen

Reputation: 6959

You are right about "every code on client side is not safe." Your sider side code need to check every request for access privilege. This can be done by session, web token or even http basic authentication. It is very Not secure by restriction from your javascript (ui-router, onStateChange ...)

Upvotes: 0

Related Questions