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" 

	/**
	* Quick and dirty login function with hard coded credentials (admin/admin)
	* This is just an example. Do not use this in a production environment
	*/
	function login() {
	if(!empty($_POST['email']) && !empty($_POST['password'])) {
	// normally you would load credentials from a database.
	// This is just an example and is certainly not secure
	if($_POST['email'] == 'admin' && $_POST['password'] == 'admin') {
	$user = array("email"=>"admin", "firstName"=>"Web", "lastName"=>"Scents", "token"=>base64_encode(openssl_random_pseudo_bytes(16)));
	$_SESSION['user'] = $user;
	echo json_encode($user);
	}
	else {
	$error = array("error"=> array("text"=>"You shall not pass..."));
	echo json_encode($error);
	}
	}
	else {
	$error = array("error"=> array("text"=>"Username and Password are required."));
	echo json_encode($error);
	}
	}
	/**
	* Authorise function, used as Slim Route Middlewear (http://www.slimframework.com/documentation/stable#routing-middleware)
	*/
	function authorize() {
	return function () use ( $role ) {
	// Get the Slim framework object
	$app = Slim::getInstance();
	// First, check to see if the user is logged in at all
	if(!empty($_SESSION['user'])) {
	if($_SESSION['user']['token'] == $_SERVER['HTTP_X_CSRF_TOKEN']) {
	//User is logged in and has the correct permissions... Nice!
	return true;
	} else {
	// If a user is logged in, but doesn't have permissions, return 403
	$app->halt(403, 'ACCESS DENIED');
	}
	} else {
	// If a user is not logged in at all, return a 401
	$app->halt(401, 'PLEASE LOGIN FIRST');
	}
	};
	}

view raw index.php hosted with ❤ by GitHub

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

	login: function (event) {
	event.preventDefault(); // Don't let this button submit the form
	$('.alert').remove(); // Hide any errors on a new submit
	var url = './service/login';
	$('.btn-login').button('loading');
	var formValues = {
	email: $('#tEmail').val(),
	pwd: $('#tPwd').val()
	};
	$.ajax({
	url:url,
	type:'POST',
	dataType:"json",
	data: formValues,
	success:function (data) {
	if(data.error) {
	$('.alert').remove();
	$('.login-wrap').prepend('<div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><strong>Warning!</strong> '+data.error.text+'</div>');
	$('#tEmail').select().focus();
	} else {
	$.ajaxSetup({
	headers: {'X-CSRF-Token': data.token}
	});
	Backbone.history.navigate("/", { trigger: true, replace: true });
	}
	$('.btn-login').button('reset');
	}
	});
	}

view raw login.js hosted with ❤ by GitHub

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.