Archive for June, 2007
How to Make a Password Strength Meter Like Google
Posted on June 27, 2007, under Code Snippets, Development, How To, Security, Tools and Services, Web Design.
Password strength meters are becoming more and more popular amongst web services. Google uses one when creating a Google account. One can argue how useful these meters really are, but non-the-less they are fairly cool for users. So how does one go about making one of these meters? Well it’s fairly straight forward.
The basic break down is we add an event handler on your password field that will check the password for every key input the user types. This allows for an updated meter as the user types the password. When you get into the algorithm that actually checks how secure a password is, there are many routes you can go. When researching for this project, I chose to base my code off of the kind folks over at Intelligent Web. There theory is to calculate how many different combinations there are for the password you enter, then determine how many days it would take to crack your password. The algorithm returns a percentage that we then in turn convert to a nice GUI for the end user to see. So let’s take a look at the code:
The JavaScript is fairly straight forward. There are settings at the top for different checks to enable or disable. Here is the JavaScript:
[ftf]
// Password strength meter v1.0
// Matthew R. Miller - 2007
// www.codeandcoffee.com
// Based off of code from http://www.intelligent-web.co.uk
// Settings
// — Toggle to true or false, if you want to change what is checked in the password
var bCheckNumbers = true;
var bCheckUpperCase = true;
var bCheckLowerCase = true;
var bCheckPunctuation = true;
var nPasswordLifetime = 365;
// Check password
function checkPassword(strPassword)
{
// Reset combination count
nCombinations = 0;
// Check numbers
if (bCheckNumbers)
{
strCheck = “0123456789″;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Check upper case
if (bCheckUpperCase)
{
strCheck = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Check lower case
if (bCheckLowerCase)
{
strCheck = “abcdefghijklmnopqrstuvwxyz”;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Check punctuation
if (bCheckPunctuation)
{
strCheck = “;:-_=+\|//?^&!.@$£#*()%~<>{}[]“;
if (doesContain(strPassword, strCheck) > 0)
{
nCombinations += strCheck.length;
}
}
// Calculate
// — 500 tries per second => minutes
var nDays = ((Math.pow(nCombinations, strPassword.length) / 500) / 2) / 86400;
// Number of days out of password lifetime setting
var nPerc = nDays / nPasswordLifetime;
return nPerc;
}
// Runs password through check and then updates GUI
function runPassword(strPassword, strFieldID)
{
// Check password
nPerc = checkPassword(strPassword);
// Get controls
var ctlBar = document.getElementById(strFieldID + “_bar”);
var ctlText = document.getElementById(strFieldID + “_text”);
if (!ctlBar || !ctlText)
return;
// Set new width
var nRound = Math.round(nPerc * 100);
if (nRound < (strPassword.length * 5))
{
nRound += strPassword.length * 5;
}
if (nRound > 100)
nRound = 100;
ctlBar.style.width = nRound + “%”;
// Color and text
if (nRound > 95)
{
strText = “Very Secure”;
strColor = “#3bce08″;
}
else if (nRound > 75)
{
strText = “Secure”;
strColor = “orange”;
}
else if (nRound > 50)
{
strText = “Mediocre”;
strColor = “#ffd801″;
}
else
{
strColor = “red”;
strText = “Insecure”;
}
ctlBar.style.backgroundColor = strColor;
ctlText.innerHTML = “” + strText + ““;
}
// Checks a string for a list of characters
function doesContain(strPassword, strCheck)
{
nCount = 0;
for (i = 0; i < strPassword.length; i++)
{
if (strCheck.indexOf(strPassword.charAt(i)) > -1)
{
nCount++;
}
}
return nCount;
}
[/ftf]
On the HTML side, I have setup a simple form to display the interaction the user will receive.
[ftf]
[/ftf]
The magic lies inside the event handler I spoke about above. The “onkeyup” event passes the current password, and the ID for this input item. The ID is used to reference the below div tags that show the strength meter and text. The ID allows for you to have more than one password meter per form, per page.
[ftf]
[/ftf]The algorithm can be enhanced if you wish to get more complicated with the strength checking. One can also adjust the colors and text for the various strength levels displayed to the user.[ftf]
// Color and text
if (nRound > 95)
{
strText = “Very Secure”;
strColor = “#3bce08″;
}
else if (nRound > 75)
{
strText = “Secure”;
strColor = “orange”;
}
else if (nRound > 50)
{
strText = “Mediocre”;
strColor = “#ffd801″;
}
else
{
strColor = “red”;
strText = “Insecure”;
}
[/ftf]
Further features could be displaying when a user has not entered a valid password, for example not a long enough length.
Here is a demo of the above code, and download links so you can implement this into your sign up pages. Enjoy!
Right Click to Download:
73 Comments
Free Stock Icons for Your Next Application
Posted on June 26, 2007, under Development, Tools and Services, Web Design.
There are plenty of stock icons out there that one can buy, and for your purchase you will get a very large set of stock icons in many different sizes and formats. However, if you need to do icons on the cheap there are a good amount of free icon sets out there that you can use. Below are a couple of my favorite icon sets.
6 Comments
How to Setup a Subversion Server on Linux
Posted on June 22, 2007, under How To, Networking, Software, Tools and Services.
With my recent move over to Linux. over this last week I have been resetting up my file server and getting everything setup that way it was back when it ran that other operating system. On of the functionalities my file server has, is running a subversion server. There are many ways to setup subversion, tapped into apache, using xinetd, running as a daemon, ssh, ssl… the list goes on. At home I am behind a firewall and this server has no access to the outside word, so for me it was definitely a KISS (keep it simple stupid) moment. I chose to setup subversion with xinetd. Now Ubuntu made this dead simple, but I like to learn how to do things manually as that’s the spirit of being a geek. So lets take a look at hoe to get this thing up and running:
1) Install Subversion and xinetd
There are many ways to accomplish this: Yum, apt-get, up2date, or your favorite package manager. For this tutorial lets use apt-get.
[ftf]
apt-get install subversion
apt-get install xinetd
[/ftf]
2) Create a Subversion Repository
Your repositories can be located anywhere, for me there were on a NAS device. we use the fantastic tool ’svnadmin’.
[ftf]
svnadmin create /path/to/your/svn/myfirstrepository
[/ftf]
3) Configure xinetd
In this step we will configure the superserver to make it run an svn service. The configuration file for xinetd is located at ‘/etc/xinetd.conf’ under most circumstances. The configuration file should look something like the one below. Make note of the path to where your repositories are located, not the path to the actual repositorie: ‘/path/to/your/svn’. Also make note of the ‘user’ parameter. Whatever you set this user to, needs to have read and write access to your svn path.
[ftf]
# Simple configuration file for xinetd
#
# Some defaults, and include /etc/xinetd.d/
defaults
{
}
service sshd
{
port = 22
server = /usr/sbin/sshd
}
service svn
{
port = 3690
socket_type = stream
protocol = tcp
wait = no
user = www-data
server = /usr/bin/svnserve
server_args = -i -r /path/to/your/svn
}
includedir /etc/xinetd.d
[/ftf]
4) Setup User Access to Your Repositories
Subversion has many ways you can setup access to your repositories, for the sake of this tutorial lets just setup a simple user name and password. Modify the file ‘/path/to/your/svn/myfirstrepository/conf/svnserve.conf’ and setup the simplest way of adding users, with the ‘passdb’ file. Your file should look something like this;
[ftf]
anon-access = none
auth-access = write
password-db = passwd
[/ftf]
What you are doing here is letting subversion no that users with no authentication access ‘anon-access’ should have no access to this repository, and users with authentication ‘auth-access’ access should have write access. The last line is letting subversion that we are using the ‘passwd’ file located in the same directory for the user list. That file, ‘/path/to/your/svn/myfirstrepository/conf/passwd’, you can now add users in the format of:
[ftf]
username = password
[/ftf]
5) Conclusion
Now, if all went well, you should be able to check out from your new repository:
[ftf]
svn co svn://localhost/myfirstrepository
[/ftf]
If you want more information on how to setup a subversion server including running it with apache, ssh, ssl, or other methods; I highly recommend the “Version Control with Subversion” book.
5 Comments
Implementing a Captcha with Ruby on Rails in 10 Minutes or Less
Posted on June 20, 2007, under Code Snippets, Development.
I needed to put together a captcha fifteen minutes before a demo the other day, so I scrambled a researched for five minutes and settled on Simple Captcha. It had the features I needed, and looked like it could be implemented fast. So how did I accomplish this, well simple:
Install ImageMagick:
You can get your hands on the binary releases here, and install them appropriately for your Operating System.
Install RMagick:
On Linux, it was actually as simple as this:
sudo gem install rmagick
Here are the install instructions for OSX and for Windows you will need to get the rmagick-win32 gem.
Install the Simple Captcha Plugin:
From your application root, you can run:
ruby script\plugin install svn://rubyforge.org/var/svn/expressica/plugins/simple_captcha
Done!
In Your Code:
To show a captcha in your view, just use the following tag:
<%= show_simple_captcha %>
There are further formatting options that you can use to configure the captcha image.
In your controller to validate:
—-
if simple_captcha_valid?
end
—-The site has further examples on how to implement a model based approach, but my quick needs this was good. Later on I went back and cleaned it up some, and attached it to a model with further conditions.
If you already have ImageMagick install, getting up and running with Simple Captch will be even quicker. For some Linux distributions, you might have to install ImageMagick from source which might cause some problems for those not too familiar on how to do this.
Simple Captcha Features:
- Provides eight different style of images
- Can be implemented as controller based or model based
- Automated removal of old images(one hour old)
- Now, we can add customized CSS to the image, lable and the text field
- Simple Captcha will bypass the functional/unit tests, so the there will not be any mess in our test cases.
- Provides three levels of distortion of images as low, medium or high… so now, we have three levels for complexities of images.
3 Comments
Firefox Plugin of the Day: Pearl Crescent Page Saver
Posted on June 18, 2007, under Browsers, How To, Software.
Pearl Crescent Page Saver makes taking screenshots of websites a breeze, and is how I take all of my screenshots for blog articles. The Firefox extensions gives you the ability to take a screenshot of the entire page or a certain portion of it. The free version has the basic options to change the output image type and quality, but the pro version gives you a few more bells and whistles and only costs $15 that will in turn help further develop the extension.
1 Comment
The Best WordPress Theme Resource Website
Posted on June 18, 2007, under Blogging, Tools and Services, Web Design, WordPress.
I have been asked many of times where the best place to find WordPress themes is. Over time the answer to this question has varied, but recently I have been hooked on once source: WP Themes Free. This site is very well designed and easy to navigate. It includes the standard features of a Theme community website, including: voting, new themes, popular themes, categories, thumbnail previews, testing themes, etc. However, the coolest feature that helps them stand apart from other WordPress theme websites is the individual statistics for each theme. Each theme page has neat statistical graphs for the number of times a theme was viewed, tested, and downloaded. This gives great feedback on how popular that theme is, and is a good way to feel out how many blogs might be using this theme.
No Comments
How to Save on Blog and Website Bandwidth Bills
Posted on June 18, 2007, under Development, How To, Tools and Services, Web Hosting.
Plagued by high bandwidth bills for your blog or website? There are multiple solutions out there that can drastically reduce the amount you shell out every month.
Outsource your Blog Hosting:
There are many free blog hosting services out there, Blogger and WordPress being the most popular. If you do not mind not having complete control of your blog, then these are cheap solutions for blog hosting.
Outsource Image Hosting:
Images can lead to large bandwidth bills, especially if you have a lot of them or large images. There are many cheap or free ways to host images or other media files. Flickr is probably the most obvious choice, there is even a nice WordPress plug in. Additionally Amazon Simple Storage Service is a great, inexpensive service for any type of media files you may have.
Optimize Templates and HTML Code:
With HTML there is a lot of white space that adds up over time. Javascript, CSS, and HTML files are plagued with extra whitespace characters in between tags. I have written in the past about how to Optimize Wordpress and HTML templates, Compressing your JavaScript, and Compressing your CSS files. All good practices that will result in lower bandwidth charges over time.
No Comments
Why is eBay unwilling to offer Google Checkout?
Posted on June 14, 2007, under Development.
Even though I am not a fan of Google Checkout, TDavid over at Make you go Hmm, posts some good points challenging eBays decision to not offer Google checkout to customers. This topic has my mind racing with other situations that companies choose profit over a good user experience.
At sport stadiums you can only get one type of beer, and pay a ton for it on top of that. Retail stores play this game as well, where they will only offer products from a certain company or brand. The whole cable vs. satellite war has professional sports signing exclusive contracts with one or the other. There is no choice anymore.
Yeah, yeah, yeah, I know it’s Americana at it’s finest; but take a look at Dell. They are trying to reinvent them self by giving customers the choice again; like offering Ubuntu as an alternative to Windows, or solid state drives as apposed to traditional hard drives.
If you make it harder for someone to buy you something, and give you money; say they go to your store and you do not offer the brand they need, so they go elsewhere. In the long run you lose. In the future, customers will be more likely to go elsewhere for what they need. You are basically putting a sign on your door that say “we do not have what you want, go elsewhere.”
No Comments
Why Didn’t Apple Buy iphone.com?
Posted on June 13, 2007, under Gadgets, Podcasts.
So the iPhone is all over the news lately, and has a launch date coming up soon. The phone is not for me. It looks too delicate, requires iTunes to setup, and is pricey. Non-the-less, cheers to Apple for changing the market yet again. Markets become stale when people find something that works, and innovation is stifled so that companies can continue to have a steady profit. Hopefully Apple will do for the phone market what it did for the music market and dealing with the RIAA.
My only question to Apple, is why did you not buy iphone.com? Seems they have been getting some traffic lately.
No Comments
Does Auto-Complete Search Limit You?
Posted on June 12, 2007, under Search.
Auto complete is a great feature in most cases, but lately I have found some frustration with it to the point I turned it off in Firefox. When I search for something, I generally know what to put in as a query to find what I am looking for. In other cases I am looking for something so specific that I need to find an exact match, like an error code or something from debugging. In these cases, I have found auto-completion a hindrance to my query. I am looking for something specific, I do not need to know what others have searched for an how many results they pulled.
I will admit that for some cases Auto-complete is good, like if you are searching for names of places, people, etc. But more often than not I have not found it valuable, and it really gets in the way for what I am searching for.
