Securing your application is the most important things when building an application. This is the basic that every programmer should follow, it’s a must. However, sometime programmer might forgot the basic, and the more complex your application is, the harder it is to maintain and looking for security holes. While securing your application doesn’t mean that you will be totally safe from a hack, since there is many factor of why a web can be hacked, but reduce the possibility is always a good practice.

This article will give you walkthrough on the basics of creating a secured PHP application. I will give some step by step to filtering input, keep your code up to date and standard. I’ll also give you some good practice I always do.

Filtering Input

A web application is operated by retrieving inputs from user and then decide what to do based of the inputs. Filtering your input is a must to prevent any unwanted code to get executed.

Making sure the input data type

This is the most basic you should take care of for filtering. For example if you are retrieving integer type, you will need to make sure you always get an integer. Here is some example of how to make sure you get an integer.

1
2

if ( ! is_numeric($_POST['number']) )
    die("You must input a number");

1
2

if ( $_POST['number'] != intval($_POST['number']) )
    die("You must input a number");

Mostly, input retrieved will be always have a string data type, so sometime, you will need to convert it to make sure you get a correct data type.

Validate the string

If you have a list of string you will be accepting, you will need to make sure you only retrieve this value. Here is some example you can do.

1
2

if ( $_POST['command'] != "edit" && $_POST['command'] != "add" )
    die("Unknown command");

1
2
3
4
5
6
7
8
9
10

switch ( $_POST['command'] )
{
    case "add":
    case "edit":
        // some code you will run
        break;
    default:
        die("Unknown command");
        break;
}

1
2

if ( ! preg_match('/^(edit|add)$/', $_POST['command']) )
    die("Unknown command");

I personally like the Regular Expression (regex) solution, since it is simple and need less work when you decide to accept a bunch of other strings. Also when you are accepting a pattern of string, it’s always good to use regex. Here is some example of basic email and URL filtering.

1
2

if ( ! preg_match('/^[A-Za-z0-9_.-]@[A-Za-z0-9_.-]\.[A-Za-z0-9]{2,4}$/', $_POST['email']) )
    die("You entered invalid email");

1
2

if ( ! preg_match('/^(http|https):\/\/[A-Za-z0-9_.-]\.[A-Za-z0-9]{2,4}$/', $_POST['url']) )
    die("You entered invalid url");

Remember that while PHP have two function to execute regex, POSIX Extended and PCRE, you must always use the PCRE solution as the other one has deprecated since PHP 5.3.0.

Escape your string

You should always escape your string before you insert it to your database. If your server have magic quotes turned on by default, you might be safe from this. But your code shouldn’t rely on server capabilities, your code should escape the string if the magic quotes is turned off. You also must check the magic quotes configuration to prevent you to escape your string twice.

1
2

if ( ! get_magic_quotes_gpc() )
    $name = addslashes($_POST['name']);

If you are using MySQL database, use mysql_real_escape_string instead.

1
2

if ( ! get_magic_quotes_gpc() )
    $name = mysql_real_escape_string($_POST['name']);

Finally, if you don’t want to accept html string, you can strip it or convert it to html entities.

1

$no_html = strip_tags($_POST['no_html']); // this will strip all html tags

1

$no_html = htmlentities($_POST['no_html']); // this will convert all html tags to entities

Wrap it out in a function

Making your code easier to maintain is one way to secure your application. Wrap it out in a function is a good solution. All you need to do is making sure the retrieved input has filtered in this function. So if you find any vulnerabilities, the first you will look is the function. This should save your time looking for the security holes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function input_filter( $input, $type = '' )
{
    $filtered_input = $input;
    if ( get_magic_quotes_gpc() )
        $filtered_input = stripslashes($filtered_input);
    switch ( $type )
    {
        case 'numeric':
            $filtered_input = intval($filtered_input);
            break;
        case 'email':
            $filtered_input = ( preg_match('/^[A-Za-z0-9_.-]@[A-Za-z0-9_.-]\.[A-Za-z0-9]{2,4}$/', $filtered_input) ) ? $filtered_input : '';
            break;
        case 'url':
            $filtered_input = ( preg_match('/^(http|https):\/\/[A-Za-z0-9_.-]\.[A-Za-z0-9]{2,4}$/', $filtered_input) ) ? $filtered_input : '';
            break;
        case 'html':
            $filtered_input = htmlentities($filtered_input);
            break;
    }
    return mysql_real_escape_string($filtered_input);
}

And the example to use this function.

1
2
3
4
5

$number = input_filter($_POST['number'], 'numeric'); // it will return 0 if it is not numeric
$email = input_filter($_POST['email'], 'email'); // it will return empty string if invalid
$url = input_filter($_POST['url'], 'url'); // it will return empty string if invalid
$no_html = input_filter($_POST['no_html'], 'html'); // it will return all html converted to entities
$string = input_filter($_POST['string']); // it will simply escape the string

Depends to your preference, you can wrap it to a numbers of separated functions or to a class. But I think wrap it in a function is not bad either if you are creating a simple application and only need a small numbers of filtering.

Keeping Your Code Up To Date and Standards

PHP keep growing. If you are writing your application in PHP 4, most likely, it will still working in PHP 5. However, some of them might not work anymore in PHP 6. Some example is the use of deprecated function. The function that deprecated in PHP 5 will still working for backward compability, but using this function is not safe anymore as they can be removed anytime in future.

Make sure you are up to date to the new PHP version. Always look the PHP manual for each function you use. Some time you can find a notice of how to correctly use the function. The user contributed notes is also helpful if you are looking for a solution related to that function.

Do not rely on register globals

Register globals has been turned off by default and deprecated since PHP 5.3.0. Incorrect use of register globals will make your code vulnerable. Always use superglobal variable instead.

However, it’s also a good practice to not use $_REQUEST variable if you don’t need to. This variable contains the content of $_GET, $_POST and $_COOKIE. Using this variable will prevent you to know where the variable came from, it’s always good to know where your variable came from. For example you would like some inputs came from post or cookie, but using $_REQUEST, the user can use get and it still get executed.

Always define a variable before use it

You must always define your variable before you use it. In some server, register globals might be turned on, and failing to do so might result in vulnerable codes.

1
2
3
4

if ( validate_user() )
    $safe = true;
if ( $safe )
    // some sensitive code

The above code is vulnerable if register globals is turned on. If user run the script by calling user.php?safe=1, the user will always get validated. You can do this instead.

1
2
3
4
5

$safe = false;
if ( validate_user() )
    $safe = true;
if ( $safe )
    // some sensitive code

Use strict error reporting in development

Checking each function you use to find a deprecated function is not fun. So in development environment you must show all PHP errors. You can do this by calling this function on top of your application.

1

error_reporting(E_ALL);

This way, you will know if you are using deprecated function. You will also know if there is any undefined variable. This also includes the array in superglobals variable. Making sure to check undefined variable with isset before you use it is also a good practice.

Turn off all error reporting in production

If your website is ready now, you will need to turn off all error reporting. Showing your error to everyone will not be a good thing, one thing is you will reveal something to your visitor, such as file structure. For example, your main code might not be vulnerable, but some of included codes might be vulnerable if requested directly. Keeping your file structure a secret might give you a better security.

One thing to note, you also shouldn’t show mysql_error value to your visitor. If somehow you don’t filter the inputs properly and you have a code like this.

1

$query = mysql_query("SELECT * FROM some_table WHERE some_field='$field_value'") or die(mysql_error());

The code above might look familiar as new programmer tends to use it to check for query error. However, if the $field_value variable is not filtered properly and vulnerable to injection, you will show the visitor the error and at the same time, you will reveal that your code is vulnerable. So instead of showing the error, you must log the error instead, this way only you can see the error.

Conclusion

So this is the basic you can use to secure your web application properly. Meeting this standard will make your application less vulnerable. Again, it will not guarantee that your application will be perfectly safe, as there is many other factors such as using an outdated web server or using some vulnerable library.

Hopefully, this will be useful for you. Do you also have a technique to write a secure web application? Please share in comment.

Final words, thank you to read this.

Having default text that we later removed when retrieving user input is common in today’s website. Many web developer use this to enhance usability of the website, so user know what to type in what field. There is a lot of way to do this, using both focus and blur event. For example, this is the shortest and easiest way that is commonly used:

1

<input type="text" id="example-field" name="example-field" value="Your name" onfocus="if (this.value=='Your name') this.value=''" onblur="if (this.value=='') this.value='Your name'" />

However, this approach will be a pain when you are managing a lot of input fields. You will need to type the default text three times, which can lead to a trivial typo. Also, since we check againts the default value, we will not be able to accept this value. Here is the solution, by using the simplicity and power of jQuery, this is a clean and a better way to do this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<input type="text" id="example-field2" name="example-field2" value="Your name" />
 
<script type="text/javascript">
jQuery(document).ready(function($){
	$('#example-field2').focus(example_clean_field).blur(example_reset_field).each(example_populate_field);
	function example_populate_field()
	{
		if ( ! $.data(this, 'default') )
			$.data(this, 'default', $(this).val());	
	}
	function example_clean_field()
	{
		if ( ! $(this).hasClass('hasfocus') )
			$(this).addClass('hasfocus').val('');
	}
	function example_reset_field()
	{
		if ( $(this).val() == '' )
			$(this).removeClass('hasfocus').val($.data(this, 'default'));
	}
});
</script>

You can see that we define three functions here, one for focus event, one for blur event and the other one to populate the default value. I’ll briefly explain how they work in short.

We add a callback to each fields with function example_populate_field, this function will make use of jQuery.data, which allow us to attach any data to DOM element. We will iterate to each fields, and store the data in “default” key.

Next, we have a focus callback, example_clean_field, this function check whether the field has “hasfocus” class, if it doesn’t then we add the class and clear the field. Note that we use the “hasfocus” class to determine the state of the field, whether it has been cleared or not.

Lastly, we have example_reset_field that we use for blur event. This function will check the current value, when it’s empty, we remove the “hasfocus” class and set the value back to the default.

The usage as shown above is very simple, you just need to select any input or textarea element, and it will work. For example, using this selector below will make this work to all text input and textarea element.

1

$('input[type=text], textarea') .focus(example_clean_field) .blur(example_reset_field) .each(example_populate_field);

That’s all. It’s simple, clean and it looks like the most elegant solution I can find.

Hope that will be useful for you as well. Enjoy.

So you are using custom taxonomy. You add terms to the taxonomy, and add the terms to your posts. Then, you use get_terms and list all your terms. Everything works fine, terms that doesn’t have any posts will not be returned if you set hide_empty argument to true. Now you move some of your posts to draft and you get a problem. Terms that doesn’t have any published posts still returned. This lead to 404 error when you click on the link of this term. It doesn’t look good now, we need to remove term that doesn’t have any published post.

So how to do that? The answer is by using WordPress filter. This piece of code below will solve the problem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function get_terms_filter( $terms, $taxonomies, $args )
{
	global $wpdb;
	$taxonomy = $taxonomies[0];
	if ( ! is_array($terms) && count($terms) < 1 )
		return $terms;
	$filtered_terms = array();
	foreach ( $terms as $term )
	{
		$result = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts p JOIN $wpdb->term_relationships rl ON p.ID = rl.object_id WHERE rl.term_taxonomy_id = $term->term_id AND p.post_status = 'publish' LIMIT 1");
		if ( intval($result) > 0 )
			$filtered_terms[] = $term;
	}
	return $filtered_terms;
}
add_filter('get_terms', 'get_terms_filter', 10, 3);

The code work like this. We add a filter to the get_terms hook. This hook is called before the terms is returned, so it is perfect to place the filter here. Next, we check each returned terms and see if they have any published post, by using our own query. Why didn’t I use the WordPress WP_Query instead? The answer is I can’t get it to work, beside, it builds a pretty complicated query that might increase your WordPress site load time if it is used too much. Using our own query, we make sure it only use the query that we need. If our query returned that the term has a published post, we add this term to our new array which we use to store the filtered terms. Finally, we return the filtered terms.

Now, when you are using get_terms, you will filter out all terms that doesn’t have any published post.

Hope that helps. I have a hard time to explain the situation, so let me know if it doesn’t clear.

Thank you.

Happy Independence Day for Indonesia! It has been 65 years since we have freed from colonialism, thanks to the patriots that fight back then. Well, this day remind me to my old school day where we have ceremony.

And as usual, Google also celebrate it by changing their logo.

Here I update the CSS Captcha, it is now on 0.2 beta! Thank you for the response of the previous version. While this can work nicely on major new browser, the compatibility with older browser is still minimum. Some mobile browser also haven’t implement some of CSS3 functionality, such as Opera Mini and Opera Mobile. So this is still experimental and shouldn’t be used yet on production website.

Please read the older version information here.

This update is merely a security update. The inline style is randomized now, which make it more difficult for bot to read. The order of the character is also randomized. Sure, it still doesn’t prevent the bot to read or make it impossible to read at all, but it should give more difficulty on creating such bot.

Still, no support for IE browser at all.

Change log 0.2b:
- Automatically randomize inline style
- Automatically randomize character order

Demonstration
Download

Enjoy! Any comment is appreciated.

Only on August 2010, you will get 25% discount on my service, which includes:

• PSD to XHTML and CSS conversion (start at $45)
• PSD to WordPress conversion (start at $130)
• PSD to Magento conversion (start at $270)

This promotion only apply to new customer and only for the first transaction.

To get a free quote, please contact me with your project detail.

Few days ago, I was shocked when Manga Toshokan finally taken down the majority of series they host. That means, almost all of the scanlated manga is gone in their site, leaving to manhwa and manhua (Korean and Chinese comic respectively). While I read some manhwa and manhua, it still sad to see all of the manga gone, since Manga Toshokan have a huge collection of manga that I can’t find anywhere.

That’s not ended here. One Manga will also close in a week time. One Manga is my favorite online reader site, though the quality is not as good as the one hosted in Manga Toshokan, it is much faster to load. Now they still have a good time updating any manga they had until the closing end. That’s the final week for them.

Two of the big sites have taken down for now or continue with lesser series, now there is also another big name that likely to follow them. Manga Fox for example. They still have majority of the series now, but the big three (as you might now, the big three is Bleach, One Piece and Naruto) is already taken down. So it seems that’s only time until the other series follow.

Ok, don’t get me wrong. I love manga, I always read them whenever I have time, I read scanlation manga, and whenever my favorite series published in my country, I buy them. I read both, scanlation and published manga. I love scanlation because they have updated series, so I don’t need to wait for months before it published in my country just to know the continuation of the story. There is also, many and many awesome manga that’s not published here, that leaves me with only scanlation manga to read them.

So why did the scanlation sites is taken down? The reason is, recently, US and Japanese publisher are forming a coalition to fight scanlation sites. You can read more on this news on ANN, U.S., Japanese Publishers Unite Against Manga Scan Sites.

Now that it come to this, there should be a solution, for both sides. I know that scanlation is illegal due to copyright issue, but there is a lot of manga that is not available everywhere and not as update as in Japan. I won’t mind if I have to pay to get a licensed manga to read online, so I hope there is still a way, that we can still read manga online, no matter if it is paid or not.

At least, to the extent we can see now, there is two solution. First is the upcoming Open Manga. The second? Obviously, underground… IRC or P2P to get the latest scanlation… lol

Hope everything will be well, but, farewell One Manga. It’s a good year I had with you. I still won’t said farewell to Manga Toshokan, as I will still open them regularly to check for updated manhwa and manhua.

Update: One Manga has taken down all of their manga, farewell One Manga! Now let’s see how’s other sites going.

Custom post type is one of the most powerful WordPress feature. It allows us to create just any content we need, combined with custom taxonomy, the possibility is just endless. WordPress have allowed to have custom post type and taxonomy for some while, but with WordPress 3, everything is far more easier. We have register_post_type and register_taxonomy created specifically for this purpose.

While this two combined to be a wonderful addition for your WordPress blog, there is still a lot of things that is not yet documented. Here is a few useful tips I collected when working with custom post type and taxonomy.

Add taxonomy to more than one post type

There is few ways to doing this, depend to your code. If you register the post type first, then when register taxonomy, you’ll be able to include it to any post types you want.

Example (taken from codex).

1
2
3
4
5
6
7

  register_taxonomy('genre',array('book','magazine','post'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'genre' ),
  ));

See the line 1 above, the second parameter for register_taxonomy function is the list of post types you can include. It accept both string and array, as you can expect, we use array when we want to include many post type, and use string when you only need one. The same thing is applied if you register the taxonomy first, you can assign any taxonomy you like when register the post type.

Example (taken from codex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true, 
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'menu_position' => null,
    'taxonomies' => array('genre','grade','category'),
    'supports' => array('title','editor','author','thumbnail','excerpt','comments')
  ); 
  register_post_type('book',$args);

As you can see, the taxonomies parameter can be used to assign any taxonomy you like to the post type you just registered. Again, it accept both array and string.

But what if you want to add taxonomy to certain post type later, after they are defined? WordPress have a function to do this, it is register_taxonomy_for_object_type. Take a look on the example below.

Example

1

register_taxonomy_for_object_type('genre', 'book');

Handy, huh?

Querying more than one post type

Let’s say, for example, you have defined post type for book, comic and magazine. Then, somewhere in your web page, you want to show the latest list of all of these post types together. As you might know already, custom post type is not included in normal WordPress loop, so you’ll need to add your own query and loop, whether by using query_posts, get_posts or by creating a new instance of WP_Query object.

Example

1
2
3
4
5
6
7
8

$args = array(
    'post_type' => array('book', 'comic', 'magazine'),
    'posts_per_page' => 5
);
query_posts($args);
while ( have_posts() ): the_post;
    // and so on
endwhile;

See the line 2. You can add any post type you need in the post_type parameter. As always, it also accept both array and string.

Querying the custom taxonomy

You know how to querying multiple post type now, but how if you want to filter it by taxonomy? While post category and tags offer many ways to filter it, the custom taxonomy is still limited. The only way I can find right now is to filter the taxonomy by the slug.

Example

1
2
3
4
5
6
7
8
9
10

$args = array(
    'post_type' => array('book', 'comic', 'magazine'),
    'taxonomy' => 'genre',
    'term' => array('science', 'fiction'),
    'posts_per_page' => 5
);
query_posts($args);
while ( have_posts() ): the_post;
    // and so on
endwhile;

From the example above, I filtered the result by including only science and fiction genre from all three post types we defined. Unfortunately, I haven’t find any way to filter it by multiple taxonomies at once.

The custom post type feed

Custom post type also have its own feed. Depend to your permalink structure, you can find it by either

http://www.yourwordpresswebsite.com/?feed=rss2&post_type=book

or

http://www.yourwordpresswebsite.com/feed/?post_type=book

Unfortunately, again, I can’t find any way to get the feed for multiple post type.

So that’s it for now. If you find any good tips, you can share it in comment.

Recently I try my luck on offering service for PSD to XHTML and CSS conversion on Kaskus, the biggest local forum in Indonesia. I have done many PSD to XHTML and CSS conversion before, often, I also do conversion to WordPress and Magento. While I want to list my previous work here, unfortunately, due to the contract, I’m not permitted to list them. So basically, you can see how well my blog markup is for an example of my work.

Details for my service can be found here. For international user, you can just contact me for a quote.

For this service, I will offer a promotion every month. For July, you will get a limited offer for a free PSD to XHTML and CSS conversion, only for 1 person. The following condition is apply for this promotion:

• You must agree and give me permission to list the work on my portfolio page and Kaskus (with a clear position of me as the PSD to XHTML and CSS converter, the design is still yours of course, no worries )
• Turn around is in a week (I’ll work on it when I have time, but I’ll make sure it completed in a week)
• Only for 1 page (additional page will be charged with normal price)
• I will choose the design that sent to me
• Only for client that haven’t working with me before (sorry for returning client )

Deadline is August 1. Your design will be converted to XHTML and CSS in a week after the deadline.

Welcome to my new redesigned blog! It’s been a year and a half since the last time I changed the design. I have always wanted to change it, but I just always don’t have enough time. I know I’m not that good enough in designing, but at least, this is the best design I ever made until now!

The idea behind this design is, to make a simple, usable layout and still looks beautiful. There is a lot of tutorial on the web that helped me when making this. I try to make the website small in size, so you’ll able to load it fast enough. There is also a cool trick on the background, which still make the markup small without much wrapping div over div to accomplish the effect. I also realize the importance on social networking nowadays, so I add links to some of my account.

With CSS 3 coming, I won’t forget to add some CSS 3 elements. I add a little transition, on the sidebar links and the social network icon above. You won’t see it if you don’t use webkit browser though, so if you use Google Chrome 5 and Safari 5, then you are in. This transition have no importance at all, the purpose is just to enrich the user experience, but won’t lose any functionality without it. Another CSS 3 property I used is the border-radius. I used this on some input fields you can find. There is also some jQuery here, although I’m only using it on input fields now, it might become handy in future.

While I haven’t check this on all browser yet, but I’m sure it will work fine on all major browser, includes Internet Explorer 8, Mozilla Firefox 3.6, Opera 10, Google Chrome 5 and Safari 5. While I’m not supporting older Internet Explorer version, it still, on some basic level, works fine. I even can confirm that the IE 7 load almost everything fine, but it just not perfect yet. I have some issues on the logo and button, same as IE 6. This might get fixed soon.

I wish I could write the process on making this design. I might be able write it, but I won’t promise that. In short, there is 2 steps at least. First is design it in PSD, the second is convert it to WordPress. I’m skipping the step to convert it to XHTML/CSS first though, well, that’s just how I work.

I hope you will have one or two minute to type down a comment to share your opinion, so I can get better. Thanks!