Access Control in ExtJS applications

When you implement large applications using Ext Js, you will definitely come across access control. Your application will have different type of users and you don't expect all users to have access to all features. Basically may have roles or groups defined for users and the big question is how do you implement it on to the front end of your application.

Before we proceed further you should remember an important point that permissions should be always be implemented on server side and JavaScript security is always secondary! This is because anybody with a JavaScript debugger and other web development tools can easily compromise the client side security. So, what is the use of adding client side security?

The client side security is used to improve user experience and abstract user so that he see only features or data that he have access to. So, the next question is how do we do it?

You will find many ways to implement the access control but the important point is avoiding unnecessary JavaScript logic to be downloaded when your access your application. At the same time, you can implement access control by avoiding code execution if its not available to the user.

Approach 1 : Permission Configuration
This is a simple approach wherein permission configurations is used to handle security. According to the role of the user who is accessing the application, a configuration class is dynamically built. This class is used to decide what the user can access and what not. When the user login to the application a JSON is created with list of accessible features.

Approach 2 : Control through Dynamic JavaScript
In this approach we will generate the JavaScript need for the user. Hence he will not get any code that he is not allowed to execute. When an user login to the application, his role or group to which he belongs to is determined. Using his role, the JavaScript is generated dynamically using a server side script (I used JSPs). The JavaScript file inclusion will look like:

<script type="text/javascript" src="scripts/application.jsp?role=${userRole}"></script>

Inside application.jsp, the administrator menu is only accessible if the user has the appropriate role.

<c:if test="${userRole=='ADMIN'}">

topMenuObject.add({id:'adminMenu',
text: 'Administrator',
handler: adminMenuHandler});
</c:if>

This approach has some disadvantages as well. The development can be little messy because you are coding JavaScript in JSP file. Also, there is an overhead created when you dynamically generate the JavaScript all the time. You will have to use caching mechanism in-order to reduce the overhead.

That's all for now. You are welcome to comment on these approaches and share other techniques if you have.

Read other ExtJS related articles!