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.

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.

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.

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!

The WordPress 3 introduce a new feature that let us easily make our own custom post type. This is really a cool feature that give more possibility to customize the WordPress powered website. However, I find that the documentation is not complete yet.

In the recent problem I got, it requires me to check the current post type, something like is_single for post and is_page for page. Luckily enough, the is_singular is now changed to accept a parameter, and that is post type.

In current codex page, it still not updated. However, now we can use this to check whether we are on our post type page or not.

if ( is_singular(“my-post-type”) )
// whatever you want to do here

Great!

With coming of the CSS 3, it is now possible to draw using merely HTML and CSS. After seeing some awesome work that can be done with CSS 3, one of my friend suddenly get an idea to create a captcha. Thinking that bot today might haven’t able to pass this kind of captcha, I created this, CSS Captcha. The captcha that didn’t use any image. It just simply using HTML and CSS to draw characters in your screen. I might be not the first one to create this though.

Click here for demonstration

This is a very simple captcha. Giving the ability of CSS 3, we can create a better and more eye-candy captcha soon. Yeah, we know that it is possible to do animation in CSS 3. There is also some useful pseudo state in CSS, such as :hover (my favorite!), imagine the captcha that need a mouse hover to be completely seen! That might be impossible for bot.

However, the browser support is still minimum. Internet Explorer, on other hand, didn’t support CSS 3 until the version 9. So we still need to wait for a while until IE 9 officially released. Also, browser support for CSS 3 currently is still using browser specific property. So cross browser compability is a pain. Fortunately, I add a feature to automatically add browser specific properties, as long as one of the property is there, either using the browser specific property or from CSS specification.

Feature:
- Render captcha using HTML and CSS alone
- Rotation and scaling support
- Multiple text color (chosen randomly)
- Changeable background color
- Adjustable length (maximum 32 character)
- Changeable template/font
- Automatically add browser specific properties for cross compability
- Lightweight

The good:
- Since it only output the HTML and CSS, there is no much processing in the server
- It outputs directly to the HTML, there is no external resource needed at all, so it loads at the same time the page loaded

Downside:
- Support for Internet Explorer is minimum or no at all
- Rotation and scaling break the text a little (still readable), since it is only smart placement of multiple div element

Supported browser:
- Google Chrome 5.0
- Mozilla Firefox 3.6
- Opera 10.5
- Safari 5.0

Server Requirement:
- PHP 5

License: GNU GPL

Download

Enjoy!

With CSS 3, creating a stick figure is easy and fun. But it is even better if it can move. So here it is

Click here for the demo.

This currently worked on Google Chrome and Safari. However, in my test, Safari lagged a lot in the animation. So Google Chrome performed the best!

Enjoy…

Update: This is also submitted on Smashing Magazine CSS 3 Contest, you can preview and download from there too.

Menu dropdown is one of the feature that almost every today webs have and it is one of the most popular feature used in the web. In past, such feature need Javascript event. Such as using onMouseOver or onMouseOut event. However, since CSS introduced, the new psuedo classes now have this ability. Also, this solution is work for all major browser, except, of course for the CSS3 juice added, which is currently only worked on web-kit browser such as Chrome and Safari.

Here is the menu result

This is pure CSS, without any single Javascript involved. If you was using webkit browser, you will see a nice transition effect. The CSS 3 juice added here is border-radius, transition-property and transition-duration.

The trick for dropdown is done by using relative and absolute positioning. As you might know already, absolute position element is positioned relative to the parent that has position other than static. So, if we have relative position as the parent, absolute position element will get the position relative to the parent.

To hide and show the absolute child element, we use the :hover state. This worked fine on all major browser, except for the old IE 6, since the IE 6 can’t have :hover state work on all other element than a (anchor tag).

Now that CSS 3 has come, why bother with old browser anymore?