Securing HTML elements in a SPA [closed]

Question

I am working on a SPA and wondering what the best approach to showing and hiding HTML elements on a page is depending on a users credentials.

I have a RestfulAPI backend and JS heavy client using AngularJS. Upon getting authenticated I want certain elements of the page to become visible and others hidden depending on what the user is authorized to do.
Right now I send in a JSON object from the server upon authentication that holds a list of permissions (just a string array) and show/hide elements depending upon the existence of the respective keys in the permissions array.
I have my server side APIs secured and make sure that before each request is processed - the user authorized.
This, I think, will help me with protect against people tampering with my HTML & JS and enabling elements on the client side and trying to make requests that they are not authorized to.

As another level of pseudo security I make sure that the permission names that are sent to the client are just an alias to the actual permission. When the APIs try to authorize the request, the claims that it looks for are named differently.
My question is - Is this a safe approach?
Is there a better approach out there?
Should I rather get HTML templates from the server only upon authorization containing only the HTML that the user is authorized to view?
If my server side authorization is airtight, does the ability for a user to view all the HTML even matter?

Answer 1

If my server side authorization is airtight, does the ability for a user to view all the HTML even matter?

This last part of your question is really the key to the whole thing.

Your server authorisation must be airtight, because there's nothing to stop anyone from making a direct http request to your ajax API. Once the API is public (which it is as soon as you publish your site), then those URLs could be called by anyone. So your server code needs to be absolutely solid from a security perspective.

But as for your client-side code, you're right, it really doesn't matter. There is nothing you can do to stop someone looking at the HTML, CSS and Javascript code on your site, so rather than worrying about trying to stop them doing so (which is impossible), you need to concentrate on making sure that it doesn't matter if they do.

If an element is on the page, then the user can get to it. That's the nature of client-side software.

But it's the data inside those elements that you need to protect, not the elements themselves.

If it's important that the user isn't allowed to see a given piece of data, then don't serve it to his browser in the first place. That's the only way. Once it's in the browser, the user has complete access to it, so make sure he's authorised before it gets sent.

Answer 2

If my server side authorization is airtight, does the ability for a user to view all the HTML even matter?

From the viewpoint of security, it doesn’t, and your approach is correct.

From the viewpoint of user experience, it is correct as long as you also ensure that your HTML rendering code is robust enough to not confuse the user with wrong elements appearing at the wrong time.