AngularJs scope variables in console

Question

I know that we can access scope variables using batarang (chrome extension), and angular.element(document.querySelector('selector')).scope()

I was able to access scope, controllers, in angular.io, angularjs.org

But I came across an angularJs website (www.paytm.com) that is able to block me from accessing scope variables in console, also controller, etc.

1. How can I block users from accessing the scope variables?
2. Even if I block, is there any way that users may access the scope variables?
3. Will I have any extra security if I block users from accessing scope data?

Answer 1

I can't comment because I don't have enough reputation, but even though I cannot answer your first question, I can give some insights on the other two:

2. Even if I block, is there any way that users may access the scope variables?

Yes. Everytime you are running application code in the client's machine, it is possible to access information on what's running. That holds true for every code that runs in the client side.

While you can try to make it more difficult for malicious users to uncover data, you can't really safeproof it from all harm.

In the specific case of angularjs applications, remember that your code is accessible from the browser and any user can use it (even if it is bundled and minified!). So, reverse engineering an app and running it in a controlled environment wouldn't be too hard.

3. Will I have any extra security if I block users from accessing scope data?

Well, that's arguable. As I explained in 2, it will still be possible to gain access to your scope variables, it might just be harder. I think the real question here should be: "Do I care if someone have access to my scope variables?"

The answer to this question should always be an emphatic no. What sensible informations do you hold in your client side? Should it be there? Remember that every sensible info should be stored encrypted and only passed through network in encrypted communications. If there's some logic in the client side that you absolutely can't allow access, it should be in the server side. And that is the answer for most of sensible information problems you might find.

TLDR: People will still be able to access your scope. You should design your app so you don't care about that.

Answer 2

The site uses

$compileProvider.debugInfoEnabled(false)

which primary task is to improve app performance.

Though it can be (loosely) considered a part of counter-measures against RE, I seriously doubt it would be a problem for any programmer that is capable of reverse-engineering an obfuscated app. If you aren't keen on compromising the codebase, don't use it on client side.

Even if I block, is there any way that users may access the scope variables?

Sure.

var scope;
angular.element(document.body).injector().invoke(function ($rootScope) {
  scope = $rootScope;
  console.log(scope);
});

Or simply angular.reloadWithDebugInfo(), as the guide above suggests.