If you’ve signed up for a Google account, you will have seen Google’s own password strength meter.  Google’s password strength meter is unique in that it identifies whether the password would be easily cracked under a dictionary attack.  However, Google hasn’t made the source code available to the public.  So… I thought I’d make my own.

Firstly, I wanted my algorithm to calculate the strength of a password using statistical analysis.  Essentially, the algorithm should approximate the ammount of time it would take to crack a password subject to the following attack mechanisms:

• Dictionary Attack
• Hybrid-Dictionary
• Brute Force

Before I run over the math, I should say that I am not a statictician, although I am pretty good with applied mathematics.

Dictionary Attack

In order to calculate the strength of a password subject to a dictionary attack, we must start by determining how many "real" words exist containing 1 to n letters; where "n" is the length of the password.  We should also consider that the password will, on average, find the password after searching through half of the n-letter words.  We can express this mathematically as follows:

Brute Force Attack

In order to calculate the strength of a password subject to a brute force attack, we simply consider the number of character combinations possible for a password of length 1 to n letters.  The number of possibilities exitsing is a function of both the password length and character diversity.  In this sense, the diversity of a password depends on whether upper case letters, lower case letters, numbers and symbols are used.  The diversity of a password containing only lower case letters is 26.  This is because there are 26 letters in the english alphabet.

Note that we again take the coefficient of a half for the final term.  I explained why this is done in the dictionary attack section above.  What I found very interesting is how the strength of a password subject to a brute force attack varies as we change the diversity and length.  Many of the algorithms I have come across give a greater weight to the diversity.  I.e. they assume that the diversity of a password has a greater impact on the strength.  This is often not the case.  My only guess as to why they do this is that they have no way of identifying whether a password is vulnerable to a dictionary attack.  Hence, they make the assumption that passwords containing numbers and/or symbols will not be vulnerable to a dictionary attack.

Hybrid-Dictionary Attack

This type of attack is particularly difficult to model accurately.  Hence, I am going to estimate that the strength of a password undergoing a hybrid dictionary attack is simply the "dictionary strength" multiplied by the "brute force strength" of the suffix/prefix:

Calculating The "Real" Strength

The equations above allow us to calculate the strength of a password.  However, we now need to make sense of the result.  To do this, we can create a scale by estimating the speed at which a computer is capable of attempting to crack the password.  Obviously, this value will change significantly as time passes as it is determined by the processing power of the cracker’s computer.  Hence, I recommend that you change/tweak the setting in the PHP script.  By default, this is set to 2,000,000 passwords per second.

The PHP script then uses this speed to calculate the time it would take to crack the password.  I have defined a strength rating to a range in time (e.g. 0 < time < 1 day).  You can change or add more ratings as you please.

Where Can I Download This?

Before I make the script public, I’d appreciate some feedback.  You can request additional features by posting a comment below.  Please also post any passwords that you feel the script does a poor job of estimating the strength for.

Let’s write a short script to do the classic image rollover:

$(function() {
  $("#menu img").hover(function() {
    $(this).attr("src", $(this).attr("src").split(".").join("-hover."));
  }, function() {
    $(this).attr("src", $(this).attr("src").split("-hover.").join("."));
  });
});

You might have your markup something like this:

<ul id="menu">
	<li><a href="#"><img src="item1.gif" /></a></li>
	<li><a href="#"><img src="item2.gif" /></a></li>
	<li><a href="#"><img src="item3.gif" /></a></li>
</ul>

So what does the code do? Firstly, we initialize the document.ready() function - using the shorthand notation. You can read more about this in the 1st jQuery tutorial. Within this function, we attach the “hover” event to the images which together create the menu. You can see in the sample HTML markup that there are 3 images. These images are contained within unordered list elements.

Look one line down from where we attach the hover event and you’ll see:

$(this).attr("src", $(this).attr("src").split(".").join("-hover."));

This is where things start to get interesting. $(this) is referencing the image that is hovered over. So couldn’t we have just written $(”#menu img”) instead of $(this)? Well… no. This is because $(”#menu img”) will select all the images instead of just the image that is being hovered over. We could have added a unique class (or ID) to each image and then have selected that for each image. The problem with this is that it involves a whole lot more of unnecessary code. We’d need to attach the hover event to each image.

The next part of that line is: “.attr(…)”. We can use this to change a property to a defined value. We can also use this to get the value of a defined property. For example, the following code changes the SRC property to “foo.gif”:

$("img#example").attr("src", "foo.gif");

We can also assign the current value of the SRC property to a variable by writing:

var srcValue = $("img#example").attr("src");

In the rollover code, we use both. We assign the SRC property a new value by taking the current value, splitting it at the “.” (period) and joining “-hover.” onto the end. You can read more about the “split” function. Essentially, this function splits a string into an array at the delimiter. In this case, we define the “.” (period) as the delimiter.

We pretty much do the reverse for when the cursor moves off the image. We define the delimiter as “-hover.”, thus removing these characters from the SRC property.

jQuery does not provide a quick method for creating functions. That’s because it doesn’t need to. So what are functions? Instead of giving you the standard definition, I’ll explain why/when you might want to create and use functions in your code.

Say that you have a block of code that you would like executed on multiple events. This code could do anything. The principal to consider is that you will need this code to be executed as multiple events are triggered. Instead of writing the code over and over again for each event, you could add this code to a function and then execute this function whenever you want the code to be executed.

Creating Functions

To create a function called “aFunction”, we could write:

function aFunction() {
}

Say that we wanted to alert the user each time this function is executed. We could write:

function aFunction() {
  alert("Hello World!");
}

In this example, the user is alerted each time the function is executed.

Executing Functions

We can execute the function when any event is triggered. If we wanted the function to be executed when the page has loaded, we could write:

$(document).ready(function() {
  aFunction();
});

This is pretty straightforwards… but there’s more to functions.

Passing Arguments

We can pass values into the function that are used when the code is executed.  To demonstrate this, I’ll continue with the example that I’ve been using.  Instead of displaying “Hello World!” whenever the function is executed, we could pass the message into the function:

function aFunction(msg) {
  alert(msg);
}

We could now execute the function as follows (to display any old message to the visitor) when the page has loaded:

$(document).ready(function() {
  aFunction('Just a short message');
});

We could pass multiple arguments by separating them with a comma:

function addNumbers(num1,num2) {
  var total = num1 + num2;
  return total;
}

The function above will simply return the total value of the two numbers passed as arguments. It is important to note that the value returned will not by output to the page. You could print the returned value to the page by using document.write:

$(document).ready(function() {
  document.write(addNumbers(3,5));
});

I’m a big fan of the jQuery library.  Since most of the applications I build use jQuery, developing with this library would be the most logical approach.  But wait…  It looks like there are 2 jQuery plugins that allow elements to be sorted.  These are the jQuery Interface plugin and jQuery UI.

At first, I started working with “Interface”.  I soon ran into problems as I started working with styled lists.  For some reason, the list elements lost their styling as they were being dragged.  I just couldn’t quite put my finger on the problem - perhaps I missed something.  I then started working with jQuery UI.  This plugin retained the styling - perfect!

However, neither of these plugins provide a method to easily save and reload the list element order.  Hence, should a user change the order of the list, these changes would be lost as the page is refreshed.

Saving the Reordered List

I determined that the easiest way to accomplish this is through the use of a cookie.  The jQuery UI plugin already allows you to send the ID’s of the list elements (in order) to an array.  Using Klaus Hart’s Cookie plugin, we can easily save the list element order to a cookie.  But how do we retain/reload the element order saved to the cookie?

To restore the element order, I decided to remove all the sortable list elements from the DOM and then immediately append them to their parent element (in the order sepcified by the cookie).  This is all done after the document has loaded.

The HTML Markup

<ul id="list1">
<li id="item-1">List Item 1</li>
<li id="item-2">List Item 2</li>
<li id="item-3">List Item 3</li>
<li id="item-4">List Item 4</li>
<li id="item-5">List Item 5</li>
<li id="item-6">List Item 6</li>
</ul>

The Javascript

/////////////////////////////////////////////////////////////////
/////  EDIT THE FOLLOWING VARIABLE VALUES  //////////////////////
/////////////////////////////////////////////////////////////////
 
// set the list selector
var setSelector = "#list1";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;
 
/////////////////////////////////////////////////////////////////
/////  YOU PROBABLY WON'T NEED TO EDIT BELOW  ///////////////////
/////////////////////////////////////////////////////////////////
 
// function that writes the list order to a cookie
function getOrder() {
	// save custom order to cookie
	$.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}
 
// function that restores the list order from a cookie
function restoreOrder() {
	var list = $(setSelector);
	if (list == null) return
 
	// fetch the cookie value (saved order)
	var cookie = $.cookie(setCookieName);
	if (!cookie) return;
 
	// make array from saved order
	var IDs = cookie.split(",");
 
	// fetch current order
	var items = list.sortable("toArray");
 
	// make array from current order
	var rebuild = new Array();
	for ( var v=0, len=items.length; v<len;>
		rebuild[items[v]] = items[v];
	}
 
	for (var i = 0, n = IDs.length; i &lt; n; i++) {
 
		// item id from saved order
		var itemID = IDs[i];
 
		if (itemID in rebuild) {
 
			// select item id from current order
			var item = rebuild[itemID];
 
			// select the item according to current order
			var child = $("ul.ui-sortable").children("#" + item);
 
			// select the item according to the saved order
			var savedOrd = $("ul.ui-sortable").children("#" + itemID);
 
			// remove all the items
			child.remove();
 
			// add the items in turn according to saved order
			// we need to filter here since the "ui-sortable"
			// class is applied to all ul elements and we
			// only want the very first!  You can modify this
			// to support multiple lists - not tested!
			$("ul.ui-sortable").filter(":first").append(savedOrd);
		}
	}
}
 
// code executed when the document loads
$(function() {
	// here, we allow the user to sort the items
	$(setSelector).sortable({
		axis: "y",
		cursor: "move",
		update: function() { getOrder(); }
	});
 
	// here, we reload the saved order
	restoreOrder();
});

There are 2 functions to be concerned with in the above code.  The first, “getOrder()”, writes the order of the list elements to a cookie.  The second, “restoreOrder()”, fetches the order saved to the cookie and restores that order.  We execute “getOrder()” each time the list order is changed.  We execute “restoreOrder()” after the document has loaded.

Using the code provided above, you should only need to change the variables (at the very top) to get this working with your page.  Just remember to include the jQuery library and jQuery UI plugin!  I hope this is helpful!