Recently, I have the opportunity to review the initial plugin and make some amendment to it. Please feel free to download and explore the source code.
The purpose of the plugin is to help user to choose a strong password. I wanted to emphasize that the plugin can only do the following:
- Check if password contains x number of Uppercase characters (A-Z)
- Check if password contains any Lowercase characters (a-z)
- Check if password contains x number of Base 10 digits (0 through 9)
- Check if password contains x number of allowable Nonalphanumeric characters
- Check if password meet the Minimum and Maximum password length requirement
- Check if password exceeded the allowable Maximum consecutive repeated character
You need to write additional code/logic if you want to add functionality to perform the following:
- Prevent obvious keyboard sequence (i.e., 123456, qwerty, …)
- Prevent user from using previous x history password
- Password maximum age
- Prevent user from entering common character (i.e, Apple, Chicken, ...)
- etc…
- Sample code using MVC4, MVC3, ASP.NET Web application/Project and classic ASP are in one solution
- New attribute to specify maximum number of successive repetitions character (maxConsecutiveRepeatedChars)
- The passwordpolicy.xml file can be displayed in new window or modal using jQuery BlockUI plugin
- The plugin is accepting xmlFileLocation and passwordPolicyLinkId options
- Minor changes
Refer to figure 1. The sample code contains a web site, web project, MVC3 and MVC4 web applications utilizing the plugin.
Note: In most of the projects, the demos are not on the home page. Here are the locations of the demo for the following projects
PasswordStrengthIndicator.Test.Web
PasswordStrengthIndicator.Test.MVC3
- On the home view, there should be a Register link on the page content and on the top right corner of the page. Click on the link to navigate to the Create New account page
PasswordStrengthIndicator.Test.MVC4/PasswordStrengthIndicator.Test.WebApp
- On the home or other view, there should be a Register link on the top right corner of the page. Click on the link to navigate to the Create New account page.
Figure 1
There are two methods in the Helper class library namely GetPasswordSetting() and IsPasswordMeetPolicy(string strPassword). The GetPasswordSetting read all the password policy properties from a XML file. The IsPasswordMeetPolicy method creates the regular expression and validate if the password meet the password policy. You can add additional logic in this class to check for obvious keyboard sequence, Password maximum age, etc…
First, copy the PasswordPolicy.xml, PasswordPolicy.xslt and jquery.password-strength.js files into your application. Make sure both of the PasswordPolicy .xml and .xslt files are in the same location. The XSL is to transform the XML document into HTML. Let said both the files were being copied into the "XmlDoc" folder. Then, define a new key passwordPolicyXMLLocation under the application setting in the web.config file. Refer to figure 2. The PasswordStrengthIndicator.Core library will get the path to the XML file location based on the key.
Figure 2
The password attributes rules in the PasswordPolicy.xml file can be customized to tailor your organization specification. The maxConsecutiveRepeatedChars is a new attributes in version 2.0. As mentioned earlier, this new attributes is to control the maximum number of consecutive repeating characters in a password. By default, the value is 0, no restriction on how frequent consecutive character repeating in a password. I would suggest setting the value to 1, that case it will also catch repeating string such as "T3chT3ch" or "NinjaNinja".
After that, add a reference to the PasswordStrengthIndicator.Core library to the web application/project. Next, add the plugin scripts into the web application. Depending on the project type, the way to referencing the plugin script (jquery.password-strength.js) could be vary. Shown in Listing 1 and Listing 2 are sample markup code from ASP.NET web and MVC applications. The blockUI plugin is optional, without it, the password policy popup will open on a new window instead of modal dialogs fashion.
Listing 1
<asp:Label runat="server" ID="lblPassword"
AssociatedControlID="txtPassword">Enter Password:</asp:Label>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
<a id="passwordPolicy" href="#">Password policy</a>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<script src="Script/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="Script/jquery.password-strength.js" type="text/javascript"></script>
<script src="Script/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var myPlugin = $("#<%=txtPassword.ClientID%>").password_strength({
appFolderXMLPath: "<%= Page.ResolveUrl(@"~/") %>",
passwordPolicyLinkId: 'passwordPolicy'
});
$("#<%=btnSubmit.ClientID%>").click(function () {
return myPlugin.metReq(); //return true or false
});
});
</script>
Listing 2
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery.password.strength")
<script type="text/javascript">
jQuery(document).ready(function () {
var myPlugin = jQuery("input[id='Password']").password_strength({
appFolderXMLPath: "@Url.Content("~/")XmlDoc/",
passwordPolicyLinkId: 'passwordPolicy'
});
jQuery("[id='btnSubmit']").click(function () {
return myPlugin.metReq(); });
});
</script>
}
In the previous plugin (v1.0), user has to specify the exact XML file location in the .aspx page and inside the plugin script. In version 2.0, there is an option in the plugin to allow user to specify the path to the XML file. The syntax could be different depending on the application framework. The purpose of Page.ResolveUrl or Url.Content method in this context is to help find the root path to the web application. This is very useful moving from environment to environment. For instance, let said the virtual path in the local development environment was set to "/" and the XML and XSLT files are both under the root application. In the .aspx page, we specify appFolderXMLPath: "/". In this scenario the plugin will look for the PasswordPolicy.xml file under the application root and everything will work out fine. What if application virtual path is set to "/MyApp_Dev" on the development server? The plugin will not work in this setting because it can't find the xml file under "/". It will be troublesome if we hardcoded the path and then has to modify it for each environment.
There also an option in the plugin to allow user to specify the password policy link id. This is where the new window appears and displaying the XML file content in HTML format when user clicks on the anchor link. Previously the anchor click event was on the .aspx page and now the hookup is inside the plugin script.
Shown in listing 3 is an example on how to call the helper method to validate the password strength on the server side.
Listing 3
void btnSubmit_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(txtPassword.Text) && PasswordStrengthIndicator.Core.Helper.IsPasswordMeetPolicy(txtPassword.Text))
{
ResultLabel.Text = "Password meet password policy!";
}
else
{
ResultLabel.Text = "Password does not meet password policy!";
}
}
Shown in listing 4 is the regular expression generated by the plugin based on the setting in the PasswordPolicy.xml file to validate the password. You can test it out on regexlib.com; make sure to uncheck the Case Insensitive checkbox. If the result displayed as "No Results", that mean the password does not satisfy the regular expression.
Listing 4
(?=^.{12,25}$)(?=(?:.*?\d){2})(?=.*[a-z])(?=(?:.*?[A-Z]){1})(?=(?:.*?[!@#\\$%*()_+^&}{:;?.]){1})(?!.*\s)^(?i:(?!([0-9a-zA-Z!@#\\$%*()_+^&}{:;?.]+)\1{1,}).)*$
Shown in table 1 is the breakdown of the regular expression in listing 4 and a brief description.
Table 1
| Regular Expression Group |
Description |
| (?=^.{12,25}$) |
Password length: Minimum 12, maximum 25 |
| (?=(?:.*?\d){2}) |
At least 2 number |
| (?=.*[a-z]) |
At least one Lowercase characters |
| (?=(?:.*?[A-Z]){1}) |
At least 1 Uppercase characters |
| (?=(?:.*?[!@#\\$%*()_+^&}{:;?.]){1}) |
At least 1 special character listed in the […] |
| (?!.*\s) |
No space |
| ^(?i: (?!([0-9a-zA-Z!@#\\$%*()_+^&}{:;?.]+)\1{1,}).) |
Turn on case-insensitivity matching, string or character in the password must not repeat more than 1 time |
I hope someone will find this information useful and make your programming job easier. If you find any bugs or disagree with the contents or want to help improve this article, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept because I might miss some important information in this article. Please send me an email if you want to help improve this article.
Tested on: Internet Explorer 11,10,9.0, Firefox 43, Google Chrome 25.0 and Apple Safari 5.1.7
12/26/2015 - Initial version
http://download.ysatech.com/ASP-NET-jQuery-Password-Strength-v2/
PasswordStrengthIndicator_v2.zip (external link)
ASP.NET - Password Strength Indicator using jQuery and XML
Passwords must meet complexity requirements
