Secure admin panel with AngularJS

Question

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?

I am working on a similar project and I'm coming to the conclusion that client code is indeed not safe, what you should do is check for something like a session in your backend everytime a user tried to preform an action they have to be logged in for (Any of the actions in your admin panel) — Angular Dev
– Angular Dev, Commented Mar 24, 2016 at 18:19

Lucas · Accepted Answer · 2016-03-18 13:04:48Z

1

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.

edited Mar 18, 2016 at 13:04

answered Mar 18, 2016 at 3:20

Lucas

10.4k6 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Leonardo Over a year ago

Nice! This is very helpful. What about my admin panel partials (the HTML layout only, without the data from REST API), is it a security flaw if someone could see them? (if someone hack into the angular configs, routes)

Lucas Over a year ago

The $watch on rootScope through the isLogedIn() method should validate the token and redirect to /login page in this case, so you should set your router with this case, I updated my answer with an example router config

Lucas Over a year ago

This way not authenticated users will be redirected straight to login page, not being able to see html templates, of course you could hack this to see templates, but no data from PHP api will/should be received. Try minifying your code, this makes it more secure, and faster

Lucas Over a year ago

since js code can be seen on client side minifying just makes it harder to read for someone who might be checking the code with malicious intentions. It does not make the codebase more secure, it just makes it harder for someone to find an exploitable error

George Chen · Accepted Answer · 2016-03-18 02:42:36Z

0

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 ...)

answered Mar 18, 2016 at 2:42

George Chen

6,9895 gold badges23 silver badges24 bronze badges

Collectives™ on Stack Overflow

Secure admin panel with AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related