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.