How-to

Articles On Single HOW-TO Tutorial

Tutorial: How to change plugin table structure in WordPress

Some of us will have problem updating or changing your table structure in your WordPress plugin after it has been released to the public. Many people will come up with different ideas to change their existing plugin structure to a new one. Idea such as checking for that particular column existence either through pure SQL or mixture of SQL and PHP. However, the approach here may be a bit overkill. There is a much simpler way.

Mistakes Made By WordPress Developers

In most plugin tutorial on Google, we will see the normal declaration that everyone is familiar.

$table = $wpdb->prefix."hungred_post_thumbnail";
$structure = "CREATE TABLE  `".$table."` (
	hpt_post varchar(255) NOT NULL,
	hpt_name longtext NOT NULL,
	hpt_url longtext NOT NULL,
	hpt_loc longtext NOT NULL,
	UNIQUE KEY id (hpt_post)
);";
$wpdb->query($structure);

This is the usual code instruction during a plugin tutorial. However, the problem with this is that it makes maintenance of plugin difficult. Assuming you are trying to update the table structure with the above statement. You will find difficulty and resort to different means of getting your plugin table structure updated while keeping the same declaration in WordPress. This is not the right way to create a WordPress table!

Powerful way of creating plugin table in WordPress

We need something more powerful to take the job. In WordPress, there is a function dbDelta which will compare the structure between the existing table and the one in the WordPress database. It will automatic update the missing or extra field and alter the table for you. However, this method doesn't exist in WordPress default setup. You will have to import update.php to get this function. Furthermore, dbDelta will required a few criteria to be met before it is usable.

  • You have to put each field on its own line in your SQL statement.
  • You have to have two spaces between the words PRIMARY KEY and the definition of your primary key.
  • You must use the key word KEY rather than its synonym INDEX

Hence, you will have the following declaration.

$table = $wpdb->prefix."hungred_post_thumbnail";
$structure = "CREATE TABLE `".$table."` (
	hpt_post varchar(255) NOT NULL,
	hpt_name longtext NOT NULL,
	hpt_url longtext NOT NULL,
	hpt_loc longtext NOT NULL,
	UNIQUE KEY id (hpt_post)
);";
require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
dbDelta($structure);

Just that simple. Once you utilized this, changing the structure of your WordPress plugin table will be an ease.

Various Ways To Fix Container Height To Float Element In CSS

Float in CSS is something every web designer or font-end developer will come across very frequently in a normal web development process. Especially when web designers are trying to layout a particular element into a CSS design. But laying out float element might not always be smooth sailing. Nonetheless, solutions can be easily spotted. Personally, I was having a few problems with my floating element being floated out of the container as shown below,

problem

After some research it seems like there are various ways we can fix this problem so that the container will takes the floating element height instead of having the floating element getting 'out of bound' situation. Applying these solutions will gives us something we desire as shown below,

solution

Block The Float

One of the way is to block the float from going 'out of bound'. The float element went out of the container because there wasn't anything that stopped it from moving out. Therefore, we can use clear:both; on the element below the container to prevent the element from floating out.

<div id='container'>
<div id='float'></div>
</div>

<div id='next-container' style='clear:both;'>
</div>

With the declaration above, you will see something like this as shown on the image.

float-clear-both

Notice that it still goes over the line but the element did not went under it this time. You can also block it nicely where the block container is placed before the end of line of the container.

<div id='container'>
<div id='float'></div>
<div style='clear:both;'></div>
</div>

<div id='next-container'>
</div>

In return, it will give you the same result as

solution

however, this will cost you another tag needed to block the floating element from overlapping other elements. If you use many div block in your design until it is completely difficult to manage. Try helping yourself by avoiding such method.

Block it with efficient

This method still does the blocking of element. However, in a much better way. We can do this by introducing :after pseudo code!

<style type='text/css'>
#container:after{
clear:both;
}
</style>
<div id='container'>
<div id='float'></div>
</div>

This substitutes the required div block needed to block the floating element from getting out of bound! However, this does have its own fault. We all know that :after is not supported in every version of a browser. Hence, using this might means additional hacks required to perform the same task for other browsers. You can read more on fixing container height with floating element on this article which describe much more detail regarding this method. The result can be seen as

solution

well, its still the same desired result we want. The previous one will be much easier to achieve 🙂

Common CSS approach

The common CSS approach that many will practice is to make use of the declaration 'overflow'. From the image we saw above, the image appeared to be overflowing the container height. Hence, we can prevent such overflow by declaring overflow: auto; which automatically extend the height of the container when the element went overflow. 

<div id='container' style='overflow:hidden'>
<div id='float'></div>
</div>

Automatically, it will gives us the result we want.

solution

Simple and efficient! A detail explanation can be seen here.

Summary

I believe these are some of the ways people used to fixed their container height according to float elements in CSS. If you have different methods of doing this. Please feel free to share! I will love to know!

Web File And Folder Permission – Security

I believe majority of us will have their website host on a shared environment as it is cheaper and more cost effective. Even if you have a dedicated server plan, the network administrator will not be 'automatic' enough to educate you about file and folder permission on your web environment. Your best bet is to approach them and discuss this topic hoping for a more secure environment through some dedication from your side (since all file and folder permission are managed by you instead of network administrator). But often we get standard answers from these network administrator who might not be very knowledgeable on this topic and you might ended up getting 'standard' answer from a predefined QnA text on their side. I believe everyone have certain knowledge on file and folder permission but in details what are the security risk we are facing if we ignore them? In this article, we will discuss them and hopefully get some idea and understanding on the security impact of file and folder permission in our web environment.

File and folder permission

Although many already know this, it is still a good practice to explain to those that are still new to file and folder permission. Personally, i think the best way to illustrate a file and folder permission is through a diagram. So i wrote out a sort of diagram like representative below,

  7       7     7
user   group  anyone
r+w+x  r+x    r+x
4+2+1  4+0+1  4+0+1  = 755

The permission mode is computed by adding up the following values for the user, the file group, and anyone.

  • Read 4 - Allowed to read files
  • Write 2 - Allowed to write/modify files
  • execute 1 - Read/write/delete/modify/directory

This will pretty much explain everything the diagram shows. So if we have chmod 777

  7       7     7
user   group  anyone
r+w+x  r+x+x  r+x+x
4+2+1  4+2+1  4+2+1  = 777

It is quite easy to understand what does the number means but how about each type of users?

  • User: it refers to the permission given to the owner of the file/folder.
  • Groups: it refers to the permission given to the group that was allocated to the file/folder
  • Anyone: basically refers to the permission given to outsider like normal visitors of a site

This should sum up the permission access you should give to a particular file or folder in a web environment.

What File and folder permission protect?

It is necessary to understand that file and folder permission protects only your file and folder (obvious). This means that other than files and folders, other stuff is unprotected such as databases.

Permission 777

Most likely majority of your file and folder will be set to permission 777 unless it is told otherwise. It is indeed dangerous to have everything set to permission 777 and might become a security risk. However, it is largely depends on whether your web server is being configure correctly. The main problem is that many server are not being configured correctly which is why users have to protect themselves through file and folder permission. (although permission also can act as another layer of protection for your file and folder). Is it safe for some directory to have permission 777? Yes, if you have a proper configure server. But you should be cautious and only give each folder or file with sufficient permission.

Why we need to set different permission

We will have to be cautious on the different level of permission permit for each type of user if we do not trust our network administrator on the configuration done to the server. The reason is that a hacker might hack into your system through a vulnerable web service on the server. However, the type of user the hacker get hold might not be the owner and having different permission level might just save yourself.

Type of damage

There are many types of damage a hacker might caused to your web environment. Assuming the same scenario happen which the hacker managed to get hold certain access which allows him to execute code as the user of the service. If a user neglect permission level (777 for all file and folder) and its server configuration is done poorly, an attacker can caused the sever damage to your system. Below listed some damage that could happen.

  • add/delete/modify any file or folder
  • implant virus or Trojan that will infect your visitors
  • Steal important information
  • Legal action might be make against you for poor security
  • implant bot
  • Etc.

Confusion on inherit of permission

Files do not inherit the permissions of the containing directory. This means that even though the uploads directory is executable, the files uploaded into it are not. (You should be explicitly setting the permissions for uploaded files in your upload script.) If the files are supposed to be read-only, don't hesitate to set them as 444.

Remove Execute permission

PHP files only have to have the execute bit set if you are running PHP in CGI mode. If you have PHP as an Apache module (mod_php), then it doesn't matter whether the files are executable or not.

Tutorial: How To Sort An Array In JavaScript

In JavaScript, we are given a method Sort() to perform sorting. Although Sort() is said to be used for sorting an array, it can also be used to sort anything other than an array itself. In this article we will discuss all about JavaScript array.

Sort() in JavaScript

By default, the method Sort() in JavaScript takes a given array and sort it in lexicographical order and not alphabetical order! This means that the Sort() method sort a given array in dictionary order. Let's consider the following example of Sort method.

var list =["Zebra", "Monkey", "Donkey"]
list.sort() //["Donkey", "Monkey", "Zebra"]

The above look fine when sorting an array of string but when it comes to number we will face a little problem.

var list =[ 39, 108, 21, 55, 18, 9]
list.sort() //[108, 18, 21, 39, 55, 9]

Looking at the result of the sort function seems to be unsorted but the fact that it is sorted according to lexicographical order does makes it in an ordered form after using the default sort method. Lucky, JavaScript doesn't force you to follow lexicographic order. You may also define a function to sort them in your own way.

Reverse Sort()

We get our result in lexicographical order after we performed a Sort() function. What if we want the reverse order of the sort function instead? In JavaScript, there is a function Reverse() which can help us to reverse the result of the array in the opposite order of the result. Consider the following example to illustrate Reverse() method in JavaScript.

var list =["Zebra", "Monkey", "Donkey"]
list.sort() //["Donkey", "Monkey", "Zebra"]
list.reverse() //["Monkey", "Zebra", "Donkey"]

Simple and powerful.

Customize Sort

The default Sort() function in JavaScript is quite simple and clear. Now, we will look at how we can customize this sort function. JavaScript Sort function does take in a parameter which is a function. Short to say, Sort() Method will sort your array instructed in the given function. However, the return value of the function must be as follow,

  • returns a value less than 0: parameter 'a' value is less than parameter 'b' value. 'a' come BEFORE 'b'.
  • returns a value greater than 0: parameter 'a' value is more than parameter 'b' value. 'a' come AFTER 'b'
  • returns exactly 0: parameter 'a' and 'b' have the same value. no change.

With the above rule, we can create a function that sort our array in numerical order instead of lexicographic order.

function sortmyway(data_A, data_B)
{
	if ( data_A < data_B ) // data_A come before data_B
		return -1;
	if ( data_A > data_B ) // data_A come After data_B
		return 1;
	return 0; // data_A == data_B, no change.

}
var list =[ 39, 108, 21, 55, 18, 9]
list.sort(sortmyway) // [9, 18, 21, 39, 55, 108]

The above example look good but the function seems to be a bit lengthy. You can change the comparison statement in a shorter form using the '?' symbol and we will get a shorter version of the code above.

function sortmyway(data_A, data_B)
{
return ((data_A < data_B) ? -1 : ((data_A > data_B) ? 1 : 0));
}
var list =[ 39, 108, 21, 55, 18, 9]
list.sort(sortmyway) // [9, 18, 21, 39, 55, 108]

We can even shorten the above declaration to perform the same task as shown below,

function sortmyway(data_A, data_B)
{
	return (data_A - data_B);
}
var list =[ 39, 108, 21, 55, 18, 9]
list.sort(sortmyway) //[9, 18, 21, 39, 55, 108]

All the methods above sort the array in ascending order.

Sort Descending order

Using the shortest method i have above, i can declare a sorting function which sort in descending order as follow,

function sortmyway(data_A, data_B)
{
	return (data_B - data_A);
}
var list =[ 39, 108, 21, 55, 18, 9]
list.sort(sortmyway) //[108, 55, 39, 21, 18, 9]

You can also achieve this by using the Reverse() method to eliminate the need to declare two sort function for ascending and descending order.

Random Sort Array

Well, we can also take advantage of the sort function to randomize our array. This way, we do not have to perform any loop which also contribute to function efficiency.

function sortmyway(data_A, data_B)
{
	return 0.5 - Math.random(); //random gives us result between 0 and 1
}
var list =[ 39, 108, 21, 55, 18, 9]
list.sort(sortmyway) //[21, 9, 39, 108, 18, 55]

Summary

Other than array, we can also sort unordered and ordered list. Sort() method in JavaScript can help us perform different kind of sorting in every type of element not restricting to array only. However, using JavaScript to perform sort of other element other than array can be a lot of pain. Personal advice is to use JavaScript framework such as jQuery or Mootools to ease the job. On the other hand, Sort() method can also be used to substitute unnecessary loop to create a more efficient code especially when comparing each element in an array is required. (we just have to eliminate the return value to perform such task) . Even eliminating duplication in an array is possible with Sort() method!

Solutions to Cross-Site Request Forgery Attacks

Let's see..previously i was researching on session attacks and find it really useful in ensuring a web portal to be secured on the server side. Preventing client side security was also discovered on XSS. However, i missed out something important on the client side that is required to protect my users! Another important security measure that i forgotten was cross-site request forgery! Therefore, in this article i will write all the things i know about such attack and how serious it can affect your web portal.

Cross-Site Request Forgery

Cross-site request forgery which is also known as CSRF. CSRF attacks exploit the trust that a site has for a particular user. This means that the attacks is launched by one of the users of the website. Unlike XSS which exploits the trust a user has for a particular site, CSRF exploits the trust that a site has in a user's browser. As mention on XSS article where images can be placed with URL instead of image is the exact thing that is happening on CSRF.

Example of Cross-Site Request Forgery

Let's consider an example of cross-site request forgery. Assume there is a user 'Attacker A' in your system. Your system is an auction site or any site that required credit on an account in order to perform a service or purchase a product. Currently, 'Attack A' do not have any credit. He wants to find a way to get it and CSRF is something he wished to do.
Let's say the attacker send an email to the administrator to enquiry him on a particular issues and embedded some harmful links back to their site as shown below,

Hi,

i have a problem updating the following images 

<img src='http://example.com/givecredit.php?give=clay&credit=9999' width='200px' height='200px'/>
into your form <a href='http://example.com/givecredit.php?give=clay&credit=9999'>this</a> particular page to purchase credit. 
i tried and it return me an error message. Please help me out on this. 

Regards,
Clay

On the PHP part we have a handler givecredit.php as written below,

<?php
	#validate session and cookie to check whether the user is logged in
	if(isLogin())
	{
		$clean['give'] = filter($REQUEST['give']);
		$clean['credit'] = filter($REQUEST['credit']);
		addAmount($clean['give'], $clean['credit']);
		#other instructions
	}
?>

Our not careful administrator entered the link on the email to verify (this is also used to trick administrator of a site to attempt an XSS attack) and an attack was launch on the site easily. Please take note that the display on the email is totally pure text and images without any html code written unless the user change the mode of viewing. On the other hand, the administrator is logged in, the code will be valid and whatever within the code will be run. This is the best way to illustrate cross-site request forgery (CSRF).

Requirement of Cross-site request forgery

An attacker will have to consider a few requirement before CSRF can be achieved.

  • A site that doesn't check the Referrer header (which is common) or a victim with a browser or plugin bug that allows Referrer spoofing
  • A form submission page that is useful for the attacker (example, getcredit.php)
  • Guess all the correct value needed for such submission page to be valid. If there is a need for a valid identifier in the previous page and the attacker can't guess, CSRF will fail.
  • Attack must lure the user to the page or mail to click on the link provided or visit the page to cause the damage

Different CSRF Attacks Location

There are many places that CSRF codes can be placed to lure victim into clicking them. Some doesn't even required any clicking as it is embedded on the page itself. Below are some examples.

#IMG SRC
  <img src="http://example.com/getcredit.php?give=clay&credit=9999">
 
#SCRIPT SRC
  <script src="http://example.com/getcredit.php?give=clay&credit=9999">
 
#IFRAME SRC
  <iframe src="http://example.com/getcredit.php?give=clay&credit=9999">
  
#JavaScript Methods
'Image' Object
  <script>
  var obj = new Image();
  obj.src = "http://example.com/getcredit.php?give=clay&credit=9999";
  </script>
 
#'XMLHTTP' Object, $_POST is vulnerable as shown below
 #IE
<script>
	var post_data = 'give=clay&credit=9999';
	var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	xmlhttp.open("POST", 'http://example.com/getcredit.php', true);
	xmlhttp.onreadystatechange = function () { 
	if (xmlhttp.readyState == 4) 
		xmlhttp.responseText;
	
	}; 
	xmlhttp.send(post_data);
</script>
 
#Mozilla
  <script>
  var post_data = 'give=clay&credit=9999';
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.open("POST", 'http://example.com/path/file.ext', true);
  xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4)
	xmlhttp.responseText;
  
  };
  xmlhttp.send(post_data);
      </script>

As shown above, using GET, POST or REQUEST can still be vulnerable. But using POST can caused certain level of difficulty for the attackers. Thus, using POST is still preferable.

Solutions to cross-site request forgery

We see above how CSRF can be used to attack our server and caused important monetary value to be wrongly distributed. We won't want this to happen to our users. Hence, some protection has to be implement into our server. On the other hand, end user will also be advisable to perform certain action on a portal to further protect themselves in a website (in the case where CSRF can be launch against you)

End user

Below list some solutions for end user to protect themselves from poor implementation site.

Always log out

It is a good practice to always log out any web application after finish using. Logging out will help ensure any attempt to use your account for attacker benefit is eliminated.

Don't save password/username

It is best not to save any password and username on any browser to prevent other form of attacks. 'Remember Me' feature should not be used as it will usually logged in the user automatically upon accessing the site. Hence, 'Always log out' principle became invalid since every visit will always automatic logged in the user.

Use difference browser for different purpose

Pure surfing and accessing sensitive data on your web application should be separated to prevent attacks on your sensitive data. Default browser will always be used for pure surfing while other non default browser should be used for sensitive data access usage. This will help ensure that links or unknown page accidentally visited will not caused major damage to your sensitive data.

Plain text email

Although it is always secure to view your email in plain text to easily identify any attacks and eliminate script from running through opening an email. However, it is not practical to do this. Thus, always try to use plain text for any suspicious email or check the links on the mail before clicking it.

Avoid Spam Mail

Spam mail are usually mails that contains such attacks which are being reported by other users to the email provider. Hence, avoid displaying external images or not clicking links in "spam" or untrusted e-mails may also help.

Developer

Below listed some ways to protect our users against cross-site request forgery attacks.

Always use POST method

Although using POST can still be vulnerable to CSRF attacks through flash application or XMLHttps request as shown above. Nonetheless, it does make it harder for attackers to exploit your system structure than using pure GET or REQUEST method. However, this doesn't really solved CSRF attack problem.

Always check HTTP Referrer header

Another simple counter measurement against CSRF attacks is to check the HTTP Referrer header. However, the header is optional and may not be present. In some browsers, it is disabled and is not available when interactions occur between HTTPS and HTTP served pages. The risk of header spoofing exists, and tracking the valid sources of invocations may be difficult in some applications. Hence, empty or invalid HTTP Referrer header should be marked as dangerous and access should be denial.

Automatic Log out

Implement automatic log out mechanism for your web application will greatly help your user to secure their account from being attacked. One of the criteria that makes CSRF attack possible is when user remain logged in to the website while links or page is being visited. Automatic log out mechanism can help minimize such mistake made by the users and reduce the risk of CSRF attacks.

Authenticate POST and Cookie data

Another security measure is to authenticate your variable POST and Cookie data. We can ensure that the global variable is being authenticate by ensuring certain criteria is being met such as length, data type, value and etc. This can help ensure other form of attack is eliminated and possible CSRF attack is being minimized. On the other hand, Cookie data can be manipulated by attacker and is required to be authenticate always through some information such as information previously stored in the cookie that can be verify through your database or user browser.

Double Confirm Form Submission

Another simple method you can apply is to write a simple script to alert the user of an action to be performed on behalf of the user before processing so that the user is aware that some form of submission is being create out. Another more proper way of handling such confirmation is to send in an email or sms to authenticate the action by providing an action code to be submitted by the account user themselves. This will help prevent the attackers from getting what they want when they do not hold the email or sms of the system provided. (sniffing is possible but the whole process harden the system security)

Secret Key Required

Make all form submission required a secret key to be passed along. The key will act as a protection for our user as the key is generated by a self made authentication process that will change in every form submission. typically this key is tied to the user session and validate that you get the same value back in the form post. In this way, we can ensure that the session contains such secret key and post method also return such key to verify that the submission is valid and previous page was a form. The form is the one which initial the session key and post key that will be bought to the submission page. If the user have not visited the form page and was bought directly to the form submission page, the attack will fail since the key wasn't provided and generated on the form page previously. Consider the following form which create the key initially.

<?php
session_start();
$key = md5(uniqid(rand(), TRUE));
$_SESSION['key'] = $key;
$_SESSION['key_time'] = time();
 
?>
<form action="givecredit.php" method="post">
<input type="hidden" name="key" value="<?php echo $key; ?>" />
<p>
To: <input type="text" name="give" /><br />
Credit: <input type="text" name="credit" /><br />
<input type="submit" value="Submit" />
</p>
</form>

On the form submission page we will validate whether the submission and post value is the same.

<?php
if(isset($_POST['key']) && isset($_SESSION['key']))
if ($_POST['key'] == $_SESSION['key'])
{
   $key_age = time() - $_SESSION['key_time'];
	if ($key_age <= 600)
	{
		/* Less than ten minutes has passed. */
	}
}
?>

if we didn't get the post key value and session key value to be identical, we can assume there is an attempt of attack on our system and you might consider to log that up for further investigation and protection.

Below contains some recommended reading which is pretty good in this topic.

Good Reading

Below are some resources on CSRF

Summary

Even Digg, GMail, and Wikipedia suffer CSRF attacks previously. Do not make such mistake and protect your system carefully before it become a problem in your system. The solutions above might not be full bullet proof solution for future cross-site request forgery attacks. Nonetheless, it can be used for discussion on solutions of future such attack.