0

I have a web-page in AngularJS and I want to perform some validations on the client-side itself. So I compare the $scope's values and validate the user's events. For example: 

$scope.limit = 5;
$scope.reached = 5;
$scope.check = function () {
    if ($scope.reached >= $scope.limit) {
        alert("Sorry, limit reached.");
    } else {
        alert("Success!");
    }
};

But, it is possible to access and change the $scope with after selecting the element in Elements tab and then running this command in the Console:

angular.element($0).scope().limit = 100;
//or by running $scope.limit = 100; if you're using Batarang

After running this command successfully, I will get the alert as Success. I have created a sample page for testing purpose: http://keval5531.github.io/angular.html

So, is it possible to disable access or manipulation to the $scope? I can always use the server for validating, but I am sure there must be some way to keep a fool-proof client-side validation.

EDIT: I mean something near to fool-proof, which would require more efforts and expertise for the user to manipulate the data being sent and not just DOM manipulation.

Keval
  • 3,389
  • 2
  • 24
  • 41
  • 3
    Never trust the client. Never ever. Client-side validation is great for immediate feedback. If you want fool-proof validation then you absolutely must do it on the server. – John Strickler Jun 10 '15 at 19:27
  • Yes, for all that would cost me, I have added validation on the server side which will always disable the user from performing actions once limit is reached. But my concern was it shouldn't be so easy to manipulate data within the browser. I know packets can be easily manipulated before being sent, but I wanted some precautions for further validations on my system, which would be trivial. – Keval Jun 11 '15 at 06:07
  • I know what you're trying to do but it's in vain. Your URL request mappings are public. A traditional web browser can send HTTP requests or someone might use CURL to make HTTP requests. So if security is your concern, I wouldn't worry about power users trying to manipulate your data client side. – John Strickler Jun 11 '15 at 13:16

1 Answers1

1

You can never ensure fool proof validation-safety on the client side. But to answer your specific question on whether access to scope can be restricted - Yes, to some extend (with 1.3+). You could disable the debug data that batarang and other plugins uses by disabling the debug info. With that scope() accessor function will no longer be attached on the DOM element. The purpose of this is not for providing safety but it is for performance. Keep your server side validations strong enough to block any such attempt.

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

However be aware that anybody can reload the app with the debug info from the console with:

angular.reloadWithDebugInfo();
PSL
  • 123,204
  • 21
  • 253
  • 243
  • Yes, I have server side validations wherever necessary. I do know client's packets can be manipulated, which would require expertise, but I was wondering that it shouldn't be so simple to manipulate `$scope`. Will still dig in to make things more complex to save the server's efforts for processing *bad* requests. – Keval Jun 11 '15 at 06:15