使用 AngularJS 的防弹 ACL

Question

我是 AngularJS 的新手，正在尝试掌握实现访问控制层的概念，以便对某些用户隐藏某些 pages/menus。

我通常在后端实现 ACL 和所有路由 (PHP/MySQL)，但这个项目要求我只在客户端做所有事情。

我们有一个负责身份验证的远程服务器，在成功登录后，将 return 一个 is_admin 标志，以便我知道是否显示附加信息。

虽然不太可能，因为Angular也是渲染引擎，负责所有的逻辑，恐怕用户会玩浏览器开发者工具and/or其他3rd派对工具并获得对这些区域的访问权限（因为所有脚本和逻辑都将在浏览器中对他们可见）。

所以如果我做类似的事情：

     if (user.is_admin === true) 
        {
            //display the additional admin data...
        }

用户可以在浏览器工具中设置 user.is_admin = true 并获得访问权限。

服务器端渲染如PHP，用户将永远无法知道这些隐藏区域。即

    <?php 
       if ($user->is_admin === true) {...}//user will never ever see that or be able to modify $user properties
    ?>

当然，服务器将继续对每个请求进行身份验证，因此此漏洞利用将只允许有限的访问，但似乎仍然是一种对某些用户隐藏部分的不安全方式。

我是否遗漏了 Angular 中的某些内容，或者是否有更好的方法可以防止客户端黑客入侵？

Answer 1

Angular 隐藏部分的方法是使用 ng-if/ng-show/ng-hide 指令，如：

<div ng-if="is_admin">...</div>

您无法对查看源代码或您在应用程序中提供的资源的人隐藏这些 div。所以不要向这些视图提供管理数据。

我的方法是在 "standard" 应用程序和它们之间的 link 之外制作一个 "admin" 应用程序。这样，唯一公开的内容是 links 到管理站点，非管理员用户被阻止：

<div ng-if="is_admin"><a href="/admin/#/link">Link</a></div>

所有对我的 /admin/* 页面的请求 return 如果他们不是管理员，则返回 401 状态代码。 REST 资源还 return 401 状态代码（视情况而定）。

（编辑：将上面的 ng-hide 更改为 ng-if 以抑制结果 DOM 中的那些 div。）

Bullet-Proof ACL using AngularJS