ExtJS and page authorization (server-side)

Question

I'm looking for information on how to implement secure pages using ExtJS 4. By secure pages I mean the user will log into our website using Siteminder (SSO) and so we will have the user's identity. Then we would determine what roles the user would have by making a database/LDAP call and only render those views/components that the user has access to.

Several questions come to mind:

1.) Of course I would expect we would do the authorization check prior to rendering the pages on the server-side, so how do you do this prior to firing Ext.onReady()? I need to have the ExtJS wait for the response from the server?

2.) What is the best way to organize a page's components where the case may be someone could see a particular component and another person cannot?

3.) How do I deliver the resulting page (i.e., the pieces the user has access to) to the client?

TIA!

Answer 1

1. Use a server side technology to pre-process authorization by putting your JS App launch script into a JSP/GSP. What this does is forces server side components to kick off first and then render the HTML/JS/CSS to the client. For full RIA app use index.gsp(or jsp) and the your URL stays "domain/contextroot" .

2. You can interrogate access privs to content via ajax request to server or alternatively you could set JS variables via again JSP technology that is processed first before the rest of the client response is returned.

< g:javascript>

  //global env var definition 
   var env = "${System.getProperty(Environment.KEY)}";

< /g:javascript>

Both of these are not 100% safe as client side code can be altered. The real security enforcement must be handled on server side when data is submitted for processing.

'3. Easy way would be to hide/show views etc based on 2. above. There are also some experimentation out there with modularizing the client side MVC application by lazy(manually) initializing controllers that may or may not be needed.

Hope this helps.

DB :)

Answer 2

If you're working from a Java background and are comfortable using Spring, I wrote up an approach using Spring Security here. This will allow you to plug-in any authentication mechanism you want. The main difference is that instead of using an index.html to bootstrap the application, I have a JSP so that the Spring Servlet Filter will fire for authentication. The Ext JS app blocks until the user is authenticated and the user's roles/permissions are provided.

Answer 3

I am currently experimenting with the following solution. Although it will only work for apps with a rather simple set of users, it could be of some help to you.

To begin with, user authentication is done without extjs, using a simple HTML/CSS page. Once the user logs in, its details (user id, role) are saved into the PHP session. And then the page redirects to one of two extjs apps.

One app for normal users (I'll call them clients), these are people who's client side JS does not include any admin functionality. The other app is for admins.

Both apps have their classes inherit from base classes. So we have, for example, base.mainMenu from which both admin.mainMenu and clients.mainMenu inherit. The only difference in the app.js script is the controllers loaded, and per extJS 4 dynamic loading module, only the related views are loaded (ie, seen on the client side). In my case, all pages load dynamically anyway, so my users can only dynamically load pages in their mainmenu.

The admin app blocks certain features using a global JS variable that includes the user's role. So for example, the hiding of an 'edit' button from moderators (an admin group with less rights) is done once the view is loaded (in practice this is actually done by not loading a plugin that allows editing on the view).

To wrap it all up, any call to the server checks whether the session user has rights for the requested operation, so regardless of client side scripts, server operation can only be performed by people with the appropriate rights.

To summarise, you have 3 different strategies that you can mix-and-match:

• Loading different apps for different users. If your classes all inherent from base classes, this is easier than maintaining 2 or more completely different apps.
• Using a global JS variable to disable/enable certain features for certain users. This is only good if you don't have a problem with the client side loading features that are then disabled (but still seen by debuggers).
• Regardless of anything, all server-side calls are checked against session variable.

Answer 4

1. check out Role-based access control. I use Yii's database-based RBAC, and have a php script that returns the rbac rules in json format when ext starts up

2. on the client, the best bet is to simply hide or disable functionality that is not allowed.

3. on the server, you should throw a 403 http error if the user is not allowed to perform a function. handle ajax exceptions in ext and check for 403s.