Use ng-if instead CSS

[alb3rto269]

First of all: This project is awesome.. Thanks!!

The only part I dislike is the "accessLevel" directive. There, you show or hide elements according the authorize method. However, in terms of security (which is the key in this project) delegate the visibility of elements to CSS is not the better choice.

My workaround was use the ngIf directive to give a more professional behaviour.

.directive('accessLevel', ['ngIfDirective', 'Auth', function(ngIfDirective, Auth) {
    var ngIf = ngIfDirective[0];

    return {
      transclude: ngIf.transclude,
      priority: ngIf.priority,
      terminal: ngIf.terminal,
      restrict: ngIf.restrict,
      link: function($scope, $element, $attr) {
        var visibility = false,
            userRole, accessLevel;

        $scope.$watch('user', function(user) {
          if(user.role){
            userRole = user.role;
          }
          updateVisibility();
        }, true);

        $attr.$observe('accessLevel', function(al) {
          if(al){
            accessLevel = $scope.$eval(al);
          }
          updateVisibility();
        });

        function updateVisibility() {
          if(userRole && accessLevel) {
            visibility = Auth.authorize(accessLevel, userRole);
            $attr.ngIf = function() { return visibility; };
          }
        }

        $attr.ngIf = function() { return visibility; };
        ngIf.link.apply(ngIf, arguments);
      }
    };

As you can see, the logic is pretty close your original directive and the directive structure is delegated to ngIf.

Btw, this solution is based on this: http://stackoverflow.com/questions/20325480/angularjs-whats-the-best-practice-to-add-ngif-to-a-directive-programmatically

Let me know what do you think.

[fnakstad]

Hey, and thanks for the proposal and code :)
However, I need a little more information before changing out the existing setup. Mostly, I don't see why it's better from a security standpoint to delegate the visibility of the elements to JavaScript rather than CSS though... They are both easily manipulated on the client-side. To make an invisible element implemented with your directive visible, all that is necessary is to put a breakpoint inside the link function, and then change the visibility variable to true. Could you elaborate a little more what you mean?

[alb3rto269]

Thanks for your answer.

Yeah of course that all client-side technologies are exposed to user manipulation. However, changing the visibility of an element using breakpoints and hacking the link function could be considered an attack and the rest of your app should be prepared to handle that cases.

What i'm concerned is to accidentally write a CSS rules for the app that makes elements visible even when is supposed to be hidden.

And beyond of punctual cases, this issue is more related to the separation of concerns. CSS contains the presentation layer of the site. Logic aspects should be handled by JavaScript.

[patrickrbc]

I agree with @alb3rto. I think that using another directive is redundant anyway.

[alb3rto269]

The code that I proposed is an update for the current accessLevel directive.

[fnakstad]

Okay, thanks for having the patience with me to explain more in detail :) I see your point, and agree it's better to use the ngIf directive rather than manipulating the CSS properties directly. If you submit a Pull Request, I'll be happy to accept.