使用 AngularJS 保护管理面板答案

【问题标题】：Secure admin panel with AngularJS使用 AngularJS 保护管理面板
【发布时间】：2016-07-04 15:52:20
【问题描述】：

我想用 AngularJS（客户端）和使用 PHP + MySQL 的 RESTful API（服务器）构建一个 Web 应用程序，仅用于学习目的。应用程序必须有管理面板，受登录保护。

我正在使用ui-router来防止未经授权的用户访问面板，但据我所知，客户端的每个代码都不安全。

如果恶意用户修改代码以授予对面板的访问权限而无需登录怎么办？我知道服务器数据和代码受到保护，但不是 HTML 部分（布局暴露），这与常见的 PHP 应用程序不同，其中视图在服务器端受到“保护”。我应该担心吗？

【问题讨论】：

我正在做一个类似的项目，我得出的结论是客户端代码确实不安全，你应该做的是在每次用户尝试时检查后端中的会话之类的东西执行他们必须登录的操作（管理面板中的任何操作）

【解决方案1】：

我会使用$httpProvider 至少设置一个基于基本令牌的登录，并带有令牌/用户检查。例如，您可以使用Auth 服务和login()、logout、isLogedIn() 等方法管理标头，以处理并将状态保存到$cookies。通过这种方式，恶意用户可以入侵并获得对 html 模板的访问权限，但没有数据库数据...缩小代码也有助于避免这种风险。

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"] = "";
            }
        ]);

来自代码 sn-p：

$httpProvider.defaults.headers.common 将为每个请求设置一个标头。
$httpProvider.defaults.headers 只会为下一个请求设置 header。
在run 上设置在$rootScope 上的$watch 将在每次更改范围时触发isLogedIn() 应检查标题令牌与数据库中的条目。

【讨论】：

不错！这很有帮助。我的管理面板部分（仅 HTML 布局，没有来自 REST API 的数据）呢，如果有人能看到它们，这是否是一个安全漏洞？（如果有人侵入了角度配置、路线）
rootScope 上的 $watch 通过 isLogedIn() 方法应该验证令牌并在这种情况下重定向到 /login 页面，所以你应该用这种情况设置你的路由器，我用一个例子更新了我的答案路由器配置
这种方式未经身份验证的用户将被直接重定向到登录页面，无法看到 html 模板，当然你可以破解它来查看模板，但是不会/应该接收来自 PHP api 的数据.尝试压缩你的代码，这样会更安全、更快
因为可以在客户端看到 js 代码，所以缩小只会让可能出于恶意检查代码的人更难阅读。它不会使代码库更安全，只会让人们更难找到可利用的错误

【解决方案2】：

关于“客户端的每个代码都不安全”，您是对的。您的侧边代码需要检查每个访问权限请求。这可以通过会话、Web 令牌甚至 http 基本身份验证来完成。通过您的 javascript (ui-router, onStateChange ...) 的限制，这是非常不安全的

【讨论】：