how safe is ng-if to hide secure information

Question

A div(contains secure information) in my HTML page has to be displayed based on a permission.

• How safe is it to use ng-if to hide the div in this scenario?
• Will a user be able to hack and view the div which contains secure information?

Answer 1

You should not be hiding anything for security purposes in the 'front-end' (ie. using Angular). It is trivial for a user to access content hidden using ng-if, ng-show, ng-hide, etc.

You should instead hide this data on the back-end and never pass it to the browser in the first place.

Simple security rule: If the browser has access to it, so does the user.

Answer 2

Adding to the points already mentioned in these answers, you should keep in mind that the when you are running webapps, then the user has access to your entire client's code. So, you should, never even think of hiding sensitive data at client side.

Also, you should know a little more about difference between ng-if and ng-show,ng-hide. Quoting from AngularJS's website

ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. A common case when this difference is significant is when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes.

So, it is NOT safe to hide sensitive data at front-end. Depending on the user's permission level, you can make a separate API call to fetch the data. At the server, verify the permission and return appropriate response.