Archive for the ‘Web Design’ Category

PHP – Password encryption with salts

Password encryption is highly important when designing websites. It’s not at all recommended to pass, or store the password as plain text. Instead it is recommended to use a hashing algorithm such as md5 or sha1 to encrypt the password before it is stored in the database.

In addition to the encryption of the password it is also advisable to have a salt. A salt is a small piece of text that can be applied to the password to ensure that, even if the user types a weak password, the password is still strong. So for example the user types “apple”, the salt could be something as complex as “Ju9n#1£xFL” therefore the password plus salt would be appleJu9n#1£xFL

The salt doesn’t necessarily have to go on the end, it could go anywhere, you could even duplicate the salt.

For added security it is recommended to unique id with a random number on at the beginning. You can then encrypt the number with md5 and use substr to alter the salt length.

Once you have created your salt you can then use sha1 to encrypt the salt with the password. Finally, add the salt to the beginning of the created hash. Therefore, if someone tries to decrypt your hash, the decrypted string will be nonsensical without knowing the salt.

It is worth taking note that even with a salt, if the salt falls into the wrong hands, a password can still be hacked. So never store the salt anywhere that you would want others to see it.

Password comparison (Login forms)

It is advisable that you do not try to decrypt the password, instead compare the password given by the user, with the password stored in the database. You should have the salt stored with the password, or if fixed length be able to decipher which part is the salt. You then just need to encrypt the user given password the same way the stored password was, and compare the two.

function generateHash($plainText, $salt = null){
define('SALT_LENGTH', 11);
if ($salt === null){
$salt = substr(md5(uniqid(rand(), true)), 0, SALT_LENGTH);
$salt = substr($salt, 0, SALT_LENGTH);
echo $salt . sha1($plainText . $salt)."<br/>";
function checkPassword ($hash,$salt) {
$password = '<password from database>';
if ($salt . sha1($password. $salt ) == $hash){
echo '<br/>The password is correct';
echo '<br/>Wrong password!';


PHP – Redirect to previous page

July 25, 2011 9 comments

If you wish to redirect your users back to the page they were on previously, then you need to issue the following command:

header( 'refresh: 10; url='.$ref);

The refresh indicates the time in seconds between being on the current page and redirecting them back to the previous page.

PHP – Dynamic CSS Error – Stylesheet was not loaded because its MIME type…

July 22, 2011 3 comments

When creating a dynamic css stylesheet you need to remember to include the header() to tell the stylesheet that it is of type text/css. If you do not include this then even if you include text/css in the stylesheet link, Firefox and other browsers will still assume the type is of text/html. If this occurs you will see the following from within Firefox’s error console. (Located under Tools > Error Console):

Error: The stylesheet http://localhost/ukshopdesign/inc/default.css.php was not loaded because its MIME type, "text/html", is not "text/css".
Source File: http://localhost/ukshopdesign/shopfront.php
Line: 0

To overcome this error place the following at the start of your dynamic css stylesheet:

header('Content-type: text/css');

Further Reading

HTML5 – Pattern regex on input boxes

July 21, 2011 5 comments

The new HTML5 pattern functionality added to the input boxes in forms allows you to have inline real-time validation. This allows the client-side to do a lot of the validation before it even hits the server.

When using the pattern option you must also specify the title option, this allows your users to know what they must include in their input to pass validation.

A simple example would be checking the users name only contains letters:

<input name="forename" type="text" id="forename" placeholder="forename" value="'.$_POST['forename'].'" pattern="[a-zA-Z]*" title="Forename must only contain letters" required/>

A more complicated example would be when creating a strong password field that requires:

  1. at least one uppercase character
  2. at least one lowercase character
  3. at least one numeric
  4. at least one symbol of either # \ _ or $
  5. first character must be a upper or lower case character
  6. must not contain spaces
  7. must be between 8 – 15 characters long

<input name="password" type="password" id="password" pattern="^(?=[a-zA-Z])(?=.*[0-9])(?=.*[#\$_])(?=.*[A-Z])(?=.*[a-z])(?!.*[^a-zA-Z0-9#\$_])(?!.*\s).{8,12}$" title="Password must be 8-12 characters, have at least one uppercase letter, at least on lowercase letter, at least one number, and one special charater #\$_ The first character must be a character upper or lower, and no spaces allowed." required/>

This shows how regex can be used on the client-side to assist with website security, only passing to the server validated strings. Of course, you should still include server-side validation where necessary.

Linux – Curl command

July 19, 2011 2 comments

The curl command is used to retrieve/send documents/files from/to the server using any of the following protocols: (HTTP, HTTPS, FTP, GOPHER, DICT, TELNET, LDAP or FILE). It is designed to work without any form of interactivity. It can perform a shed load of functions including but not limited to user authentication, cookies, FTP upload etc

In my case I wanted to action a script via HTTP with user authentication. This can be done in curl by issuing the following:

$ curl --user username:password

It’s also possible to user curl in the same way you would post a form in html by using the –data flag:

$  curl --data "variable1=<variable"

So for example you have the following form…

<form method="POST" action="submit.cgi">
 <input type=text name="username">
 <input type=text name="birthyear">
 <input type=submit name=press value="OK">

and are passing username, year of birth, etc… it would be something like:

$ curl --data "username=kerrirobberts&birthyear=1986&submit=ok"

Further Reading

There are many more commands that curl can perform, these can be found in the following more detailed articles:

PHP – Dynamic CSS

July 18, 2011 2 comments

To create dynamic CSS with PHP you need to create the CSS within a PHP file.

You then need to remember to do the following:

  • Wrap the entire code in <?php ?> tags
  • Include the header() at the top to define the content-type as text/css
  • Define the variables at the top of the code
  • Include the print <<<_CSS command before the css
  • When calling the variable encase it in ${}
  • End the dynamic CSS with  _CSS;


header('Content-type: text/css');
$variable1 = <variable>;
print <<<_CSS
<object> {
<attribute>: ${<variable1>};

Real-life example:

header('Content-type: text/css');
$color1 = red;
print <<<_CSS
body {
color: ${color1};