Protect Angular properties

Question

I'm a newbie and I just wanted to ask, that is there any way, to protect your angular variables/properties?

Like I have a One Page Application with authentication from client and server side. For the simple example I have 2 user type: Simple user and Admin.

Here is a basic ng-view:

<div class="container">
  <div class="admin-view" ng-show="isAdmin">
  .
  .
  </div>
  <div class="user-view" ng-show="!isAdmin">
  .
  .
  </div>
</div>

in my app.js

app.run(function($rootScope,$route, $http){
  var user = {};
  $rootScope.isAdmin = false;
  $rootScope.getUser = function(){
    $http({
      methop: 'GET',
      url: getMyUserPlease(...)
    }).then(function successCallback(response){
      user = response;
      if (user.role === 'admin'){
        $rootScope.isAdmin = true;
      } else {
        $rootScope.isAdmin = false;
      }
    })
  }
})

It is working right, but if I inspect that in the browsers console, I can set the isAdmin property to true and i can see all the content that i couldn't have to see. just type these in the browser console:

$rootScope = angular.element(document).scope();
$rootScope.isAdmin = true;
$rootScope.$apply();

Are there any good practice, to protect the "content"?

Thank you

You have to use ng-route authorization to make it, and do not use [ng-show/ng-hide] for this cases. — Maher, Apr 11 '16 at 12:04
[AngularJS- Login and Authentication in each route and controller](http://stackoverflow.com/questions/20969835/angularjs-login-and-authentication-in-each-route-and-controller) — Maher, Apr 11 '16 at 12:05

score 2 · Accepted Answer · answered Apr 11 '16 at 12:18

TLDR you can't really.

Simple answer is don't trust angular with info the user shouldn't see, use back end authorization for that. Since angular is ran in the browser the owner of the browser can do what they want and that includes changing data.

The best solution would be to create a directive that calls back to your app via an endpoint and control the auth on the endpoint.

I would also look at using ngIf to avoid showing Dom if they are not authorized. The difference is ng-show hide use display : none, whereas ng-if prevents the Dom render.

P.s. the hacks people give you may work a bit by obfuscation but will never be foolproof

Fisherman · Answer 2 · 2016-04-11T12:15:08.483

Set debugInfoEnabled false. so some one cannot set variable from console until its in angular context. or discover scopes

 myApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
}]);

and do not use ng-show/ng-hide cause its only toggles css poperty display none to block.so someone can see easily via editing the css from debug tool. instead use ng-if which will add/remove dom on toggle. this is the solution for your senerio. but if you want it in proper way you might want to read about, protecting angular route based on authorization/permission etc.

Protect Angular properties

2 Answers2