How can I add a password stength check?

Posted

Internet users are famous for using the simplest possible passwords and using the same password on many sites. In some cases that is unimportant but if you have any sensitive or valuable material on your site you may want to ensure that user passwords are at least reasonably secure. This FAQ shows you how to add a strength checker to a password input.

This FAQ uses MooTools and is written for CFv4 - see here for a CFv5 version.

There are several Password Strength checkers available, I chose to use Dimitar Christoff's StrongPass which is written for MooTools 1.4 (used on Joomla! 2.5+). StrongPass provides neat cisual feedback, allows customised rules and includes a 'block' list for very common passwords. There is more information and links to demonstrations on the StrongPass GitHub page.

To use StrongPass with ChronoForms you need to click the ZIP icon on the GitHub download and unzip the package. We will only need the StrongPass.js in the Source folder.

On the website where I am using StrongPass I added a new 'extras' folder: /components/com_chronoforms/extras and uploaded StrongPass.js to it.

In the form I added a Load JS and a Load CSS action to the form On Load action; and in the preview window I added an Password Box input and gave it the name and ID password_1

You can use a different folder for the StrongPass.js file, or a different name and ID for the Password Box provided that you adjust the following code to match.

 In the Load JS action add the following code making sure that the highlighted code matches the settings on your site:

<?php
// if you are using this code in Joomla! 3 please uncomment the next line
// JHtml::_('behavior.framework', true); 
$doc =& JFactory::getDocument();
$doc->addScript(JURI::root().'components/com_chronoforms/extras/StrongPass.js');
?>
window.addEvent('domready', function() {
  new StrongPass("password_1");
});

Note, there are several console.log lines here that are commented out, each of these is an event triggered by StrongPass that you could use to customise StongPass on your site by showing a message, changing CSS styles, etc. In this FAQ we only use the default settings.

In the Load CSS action add this CSS which is used to style the message bar under the password box:
div.pass-container {
  height: 30px;
  padding-left: 150px;
}
div.pass-bar {
  height: 11px;
  margin-top: 2px;
}
div.pass-hint {
  font-family: arial;
  font-size: 11px;
}
Again you can edit this to meet your preferences, this is the default CSS except for the 150px padding left which is used to move the pass-container under the input box in a standard ChronoForms form layout.
Save your form and test that StrongPass is working, if there is a problem, check the password box ID is correct; and that there are no JavaScript errors on the page that need to be resolved.

Setting options

StrongPass has a range of options with default values that you can change by over-riding them in the Load JS action. For example, to over-ride the minimum password length we could add this line:
  new StrongPass("password_1", {
    minChar: 8 // too short while less than this
  });

The options include various styling and placement settings; the text used for messages (you can change the language using these); and setting for password strength checking and banning. See the StrongPass.js file for the full set.

Here's an example with the language settings:

 

  new StrongPass("password_1", {
    label: 'Try for five stars: ',
    verdicts: [
      'x',
      '*',
      '**',
      '***',
      '****',
      '*****'
    ], bannedPass: 'You can\'t use that', });

Setting events

More advanced than this tutorial but StrongPass also has four events  that you can use to fire actions. They are onReady, onPass, onFail, and onBanned. You could for example have the input box flash red when a banned password is entered:

 

 new StrongPass("password_1", {
    onBanned: function(word) {
      $('password_1').highlight('#f00');
    }
});

Banned Passwords

StrongPass contains a short built in list of banned passwords that it will not allow.  This was based on a list from the Trustwave 2012 Global Security Report (registration required). There are many other lists available, Mark Burnett, the author of Perfect Passwords included this list of 500, and has since published a list of 10,000. InfoSec Daily also have a list of 62,000 common passwords if you are really interested.
You should probably update the basic StrongPass list with new years for the passwords like Spring2012, and with any obvious passwords like the name of your site. The simplest way to do this is to edit the StrongPass.js file, though you could also add a new list using an option in the Load JS action.