SimpleClix Studio

As the demand for web application is increasing, a lot of web applications are getting more complicated.? So it is time to split the task into multiple tasks, so it will greatly increase the usability.

However, with the security in mind, how can we avoid people using javascript or url injection to avoid skipping steps?

Today, I am going to share my experience with you.

The most simple way to keep track of what step the user is on is to use a hidden field locally, such as:

<input type=’hidden’ name=’current_step’ value=’1′/> <!– the user is on step one–>

However, the above method has a big security issue.? User can use javascript to change the hidden feild to other numbers to skip the current step.

Let’s move the keep tracking variable to the server, and don’t use any local hidden field.

So, we can use a session variable to keep track of the steps:

$_SESSION['step'] = 1;

With the above method, the user cannot change the session variable.? However, there is still a problem.? If the user click the back button to go back to the previous steps, and change the previous validated information, and then continue with the current step.

So, what is the best way to achieve the goal securely?

Let’s try to combine both local and server to keep tracking of the steps.

so let’s create a session variable on the server side, such as $_SESSION['step'], and create a hidden field such as <input type=’hidden’ name=’step’ value=’1′/>

Sample code:

$cur_step = 1;

$post_cur_step = ($_POST['cur_step'] == “”)? 1:(int)$_POST['cur_step'];

/*step logic*/
if(!isset($_SESSION['step']) || $post_cur_step < 1) $cur_step = $_SESSION['step'] = 1;
else if($post_cur_step >= $_SESSION['step']) $cur_step = $_SESSION['step'];
else if($post_cur_step < $_SESSION['step']) $cur_step = $_SESSION['step'] = $post_cur_step;

Let’s explain the code above.

First we get the step data from the local form from POST variable.

And then we create the session variable ’step’ and set it to 1 or the first step.

1. In case, the user try to modify the hidden field to skip the step, the logic can force the user going back to the current step.

2. In case, the user clicks the back button to go back to the previous steps, then the logic above can detect it, and set the $_SESSION['step'] to the previous step.

Now we fix the skipping step problems, but how can we have some control of the steps on the server side, such as when there is any errors detected during the session, and have to force the user going back to previous steps.? So, how can we control it?

It is actually easy, we can change the $_SESSION['step'] to point to any previous step number, then the logic will force the user going back to the previous step.

This is just one of the many methods, if you find any problems or have a better solution, please post it here, and share with others.

I made a review on my coding style today and I found that I made a big mistake.

I always made a folder called “JS” and “CSS” when I first start scatching a website from blank. And I will put all different .js and .css files insides. For example, if I have 3 pages called “aboutus.php”, “main.php” and “jobs.php” in my website, I will put at least 3 different CSS files into the CSS folder; well, they will be mostly called “aboutus.css”, “main.css” and “jobs.css”. For certain of time, I found this very useful, like when I need to change the style of some elemetns under “main.css”, I can just look under the “main.css” and I don’t have to scroll the whole “css.css”.And ALL of these are stored in the files call “top.php” that will be contained in each pages.

However, I found this is a big problem today. IT INCREASE THE TIMES OF HTTP REQUEST!!!

OK, I guess no one will have the “style” in each different elements nowadays when we are going to write out the whole site. Most people, I will say 99.99%, will have the .css files as external links outside of the page. And example will be:

<link rel="stylesheet" href="css/index.css" media="screen"/>

Actually, when the browser loads this website, and it “sees” this line, it will make a request to the server for this “css/index.css” file. Here the first time. Like I said, if I have 3 different files, the browser will actually make 3 request to the server. This might not sound too bad. However, if I have another 3 .js files there. Then for each page, it will at lease send 6 requests to the server for all these external files before the page <body> tag was load; yes, that means, before you see anything on your screen, the server has 7+ requests already. Plus, there will be some more requests for the images and all different other medias (I will talk about those later on.)

Let’s say, if you only have 1 picture and 2 divs in your page, then your browser will make at lease 10 requests, and 6 of them were made before your page was displayed. And I have 3 pages, if the person is interested in my site and he/she wants to read all of these, then there will be 18 requests before pages’ content was loaded.

If we merge all these .css files into one, and all the .js files into one .js. We can save 2/3 of the requests in this case before the page content is loaded.