Manage web-application permission policies with JavaScript

Question

I'm very curious to know what strategy usually use different developers for managing user permission policies to different parts of single-page web application.

Just for a case: under single-page web app I mean web application with only one HTML (JSP, PHP, whatever) page as entry point and all the other client UI components/pages built with JavaScript).

Are there are any best practices, approaches or frameworks for making this things more easy and straightforward?

Let's take an example:

• There is a single-page web application with 2 tabs: A and B
• Each tab has 3 components (grids, buttons, whatever): A1, A2, A3 and B1, B2, B3
• There are 3 user groups: U1, U2 and U3
• U1 has access to both tabs and all the components
• U2 has access to both tabs but only to components A1 and B1
• U3 has access only to tab A and all the components within this tab

One solution which lies on the surface is to build a global JS object on page load (or with separate AJAX request) and store the user groups there. And then use conditions in the code to verify the current group and allow or restrict a specific functionality. A simplified example would look something like this:

index.html

<script type="text/javascript">
    window.onload = function() {                
        MyApplication = {
            userGroup : 'U3' // can be also U1 or U2. This value comes from server
        };
    }
</script>   

And then in code we will have checks like:

if (MyApplication.userGroup == 'U1') {...}
if (MyApplication.userGroup == 'U1' || MyApplication.userGroup == 'U2') {...}
if (MyApplication.userGroup != 'U3') {...}

The example can be extended with the scenario of handling events in different ways depending on the user group. Let's say A1 is the button and A1OnClickHandler is its on-click-handler:

var A1OnClickHandler = function() {
    if (MyApplication.userGroup == 'U1') {
        console.log('A very private information'); 
    } else if (MyApplication.userGroup == 'U2') {
        console.log('Less private information'); 
    } else if (MyApplication.userGroup == 'U3') {
        console.log('Public information'); 
    }
}

A drawback of the approach I described is the possibility to change value of MyApplication.userGroup by user on the fly after the page is rendered. Just open console and type:

MyApplication.userGroup = 'U1';

Bingo, user of group U3 has now rights of U1 and will be able to see private information on A1 click. Ok, he will still not be able to see those components which have not been rendered on page because of the initial conditions. But he will still be able to access the functionality available after these post-checks conditions.

To be honest I was a bit surprised by not being able to find any specific information related to this issue in the web. Do I miss anything? It would be interesting if anybody could share own experience of solving this kind of things.

UPDATE: Of course all the actions that should not be done by users of groups U2 U3 will not be executed on the server because there are security checks on server as well. For example, even if a hacker will be able to show a button or a field on frontend, the action will not be executed on the backend. But what I'm looking for is not to give a chance to do this kind of things on frontend at all.

Answer 1

You can't use JavaScript for anything related to permissions or security: Users can simply open the browser console and edit your JavaScript. So this approach is a no-go (well, unless you don't care at all).

The correct solution is to implement security on the server and only send those components to the browser which a certain user (which you identified by some kind of login) can actually see/use as per the permissions stored on the server.

If a component contains sensitive parts, then you need to figure out a way to split it and send different versions to the browser, depending on the user.

[EDIT] Try to figure out a way to split your scripts into smaller parts (components). The ZK Framework works like this: You have a framework of HTML components (component = JavaScript, HTML template + CSS) plus a JavaScript core that loads components and configures them depending on a JSON configuration which the server prepares.

That way, you can build the UI structure in PHP, convert that to JSON, send it to the client which will render the UI using this "configuration". The components will be reusable and the same for all clients. There will be no need at all to check permissions on the client side because the client code never needs to know.