Monday, January 20

More security added for your BackboneJS apps

I've been exploring this simple login mechanism used by Clint where he simply depends on the PHP session to authorize the user on every request made to PHP REST server. Alhamdulillah it solves my problem on how to authenticate user on BackboneJs apps (star or fork it here). But I still feel something is not right because when you are building the Ajax apps, you cannot simply authorize the session or cookie just like you usually do your traditional PHP apps. I read more about how to validate, authorize, authenticate, etc the AJAX apps.

After spending time reading this, I thought Clint's apps lack of basic CSRF. So here is snippet to make your BackboneJs Apps more secure

Please refer to index.php file where you can see all the slim framework code, look for function name "login" and "authorize" 

Simply replace the code above. The snippet now will authenticate every request made to the server. Check this out in your debugger console.

Before user login

After login and request protected data






As for the front end, you will need to modify your login script by define the request header

The flow with this approach may go something like this:
  1. The user navigates in their browser to the BackboneJs application
  2. The server returns a basic web page and a JavaScript application
  3. The JavaScript application can’t find an authentication token in the web site’s cookies
  4. The JavaScript application displays a login form
  5. The user enters correct login credentials and then submits the form
  6. The server validates the login information and creates an authentication token for the user
  7. The server sets the authentication token in a cookie/session and returns it to the JavaScript application
  8. The JavaScript application makes a request for some protected data, sending the authentication token in a custom header
  9. The server validates the token and then returns the data
as you noticed, i used jQuery's function and Twitter Bootstrap's CSS class.

2 comments:

EvT said...

Hi, thanx for showing this enhancement, just what I was looking for.

The synchronizer token should be inaccessible to other sites, that's why it should be in a cookie.
You put in in the $_SESSION in your PHP login script, and thus in a cookie.

However, you also send it in JSON to the browser in the user array. Should it not ONLY be sent in the cookie?

Sham Kamarul said...

if your application often make use of ajax, then you should consider to place the token in the request header. It can help you to avoid other sites make abuse of your site.

If you have any other thought, perhaps you can share it here.

Thanks for your thoughts