2016-03-18 111 views
3

我想用AngularJS(客戶端)和使用PHP + MySQL的RESTful API(服務器)構建Web應用程序,僅用於學習目的。該應用程序必須具有管理面板,通過登錄保護。使用AngularJS的安全管理面板

我使用ui-router來防止未經授權的用戶訪問面板,但據我所知,客戶端的每個代碼都不安全。

如果惡意用戶修改代碼以授予對面板的訪問權限而無需登錄怎麼辦?我知道服務器數據和代碼是受保護的,但不是HTML部分(佈局暴露),不同於普通的PHP應用程序,其中視圖在服務器端受到「保護」。我應該擔心嗎?

+0

我正在研究一個類似的項目,我得出的結論是客戶端代碼確實不安全,您應該做的是每次用戶嘗試執行一個操作時檢查後端會話他們必須登錄(管理面板中的任何操作) – Abdel

回答

0

我會使用$httpProvider設置至少一個基於令牌/用戶檢查的基於令牌的登錄。例如,您可以使用Auth服務和方法(如login(),logout,isLogedIn())來管理髮球人,以處理狀態並將其保存到$cookies。這樣,惡意用戶就可以竊取並獲得對html模板的訪問權限,但是沒有數據庫數據...... Minnifying你的代碼也有助於避免這種風險。

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

從代碼片斷:

  • $httpProvider.defaults.headers.common將設置在每次請求一個叫頭。
  • $httpProvider.defaults.headers將僅爲下一個請求設置發球人。
  • run$watch設置爲$rootScope將在每次更改爲範圍時觸發isLogedIn()應該使用數據庫中的條目檢查headder標記。
+0

好!這非常有幫助。我的管理面板部分(僅HTML佈局,沒有來自REST API的數據)怎麼樣?如果有人能看到它們,它是一個安全缺陷嗎? (如果有人攻擊角度配置,路由) – Leonardo

+0

通過isLogedIn()方法在rootScope上監聽$ watch應該驗證令牌並重定向到/ login頁面,所以你應該在這種情況下設置你的路由器,我更新了我的回答一個示例路由器配置 – FRECIA

+0

這種方式未經過身份驗證的用戶將被直接重定向到登錄頁面,無法看到html模板,當然,您可以破解此視圖以查看模板,但不會收到來自PHP api的數據。嘗試縮小代碼,這使得它更安全,更快速 – FRECIA

0

你說「客戶端的每個代碼都不安全」。 您的旁邊代碼需要檢查每個訪問權限請求。這可以通過會話,Web令牌甚至http基本認證來完成。這是非常不安全的從您的JavaScript(UI路由器,onStateChange ...)