Thursday, March 30, 2006

Password Strength Indicator

(Apologies for the format of this post)
(Feel free to use this, but if you do please let me know)

The other day I registered a friend with MSN Messenger and was impressed by their password strength indicator. Today I decided to implement my own. The results are below.

Basically I use a regular expression to evaluate the strength of the password. Weak = 6 characters at least, Medium = a combination of characters, and numbers, Strong = combination of characters, numbers, and special characters.




The JavaScript is:

<script language="javascript">
var ieDOM = false, nsDOM = false;
var stdDOM = document.getElementById; function initMethod()
{
//Determine the browser support for the DOM
if( !stdDOM )

{
ieDOM = document.all;

if( !ieDOM )

{
nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4));
}
}

passwordChanged();
}

function getObject(objectId)

{
if (stdDOM) return document.getElementById(objectId);
if (ieDOM) return document.all[objectId];
if (nsDOM) return document.layers[objectId];
}

function getObjectStyle(objectId)

{
if (nsDOM) return getObject(objectId);

var obj = getObject(objectId);

return obj.style;
}

function showDefault(objectId)

{
showCell(objectId, "#E2E2E2", "#E2E2E2");
}

function showCell(objectId, foreColor, backColor)
{
getObjectStyle(objectId).color = foreColor;

getObjectStyle(objectId).backgroundColor = backColor;
}

function showWeak()

{
showCell("pwWeak", "Black", "#FF6666");

showDefault("pwMedium");

showDefault("pwStrong");
}

function showMedium()

{
showCell("pwWeak", "#FFCC66", "#FFCC66");
showCell("pwMedium", "Black", "#FFCC66");

showDefault("pwStrong");
}

function showStrong()

{
showCell("pwWeak", "#80FF80", "#80FF80");
showCell("pwMedium", "#80FF80", "#80FF80");
showCell("pwStrong", "Black", "#80FF80");
}

function showUndetermined()

{
showDefault("pwWeak");
showDefault("pwMedium");
showDefault("pwStrong");
}


function passwordChanged()
{
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");


var pwd = getObject("txtPassword").value;
if( false == enoughRegex.test(pwd) )
{
showUndetermined();
}
else if( strongRegex.test(pwd) )
{
showStrong();
}
else if( mediumRegex.test( pwd ) )
{
showMedium();
}
else
{
showWeak();
}
}
</script>



The password strength indicator table is:

<TABLE style="BORDER-RIGHT: black thin solid; BORDER-TOP: black thin solid; FONT-SIZE: 75%; BORDER-LEFT: black thin solid; BORDER-BOTTOM: black thin solid"

cellSpacing="0" cellPadding="0" width="100%">

<TR>

<TD id="pwWeak" style="BORDER-RIGHT: black thin solid" align="center" width="34%" title="Has at least six characters">Weak</TD>

<TD id="pwMedium" style="BORDER-RIGHT: black thin solid" align="center" width="33%" title="Has a mix of numbers, lower & upper case characters.">Medium</TD>

<TD id="pwStrong" align="center" width="33%" title="Has numbers, special characters, lower & upper case characters.">Strong</TD>

</TR>

</TABLE>



And this required an action to be added to the txtPassword. As this is ASP.NET we use the following in the page load event for the class:

txtPassword.Attributes.Add("onKeyUp", "passwordChanged()");

2 comments:

Anonymous said...

im confused about the javascript getObject() working with .net

Wont you have a name mangling issue?

Nyancode said...

Very usefulllll. I make a copy of the 2 regex to the regex tester, you take take a look at here
Medium password pattern

Strong password pattern