web tutorial

Establishing a Secure Password Generator for Your User-base

Modern website registration has changed drastically from its conception. Automated programs now attempt to “brute force” into accounts, browsers automatically remember any and all passwords a user enters, and the users have the ability to reset their passwords at any time through e-mail. This accumulation of security risks and relaxed password policy has altered the ideas people used to have about password creation. It is not uncommon for a viewer to use a different password for each website he or she visits. I personally find myself just mashing the keyboard at random, as I know my browser is capable of remembering it for me; and in the yet-to-occur case where my password is not automatically entered, I can just use the “Forgot Password?” feature implemented in most websites.


In a time where passwords are becoming more obscure and not memorized by the individual, why is it not more popular to help viewers in this scenario? I believe it’s a trend on the rise, and cPanel implements it extremely well in its MySQL user creation form.


password generator


View Demo


Such a form is not hard to implement at all. A password generator is a very simple code with a very efficient output, meaning it has miniscule bandwidth overhead for the benefit.


There are really only three aspects to a password generator – the characters to be used, the concatenation of them, and the randomization process. All three are extremely basic programming principles, yet such systems are surprisingly still rare. I will cover different methods of encompassing password generation – flat output, functional, objected based, and server-side (PHP) — for your ease-of-use.


To elaborate on the process, for those learning JavaScript, I’ll cover each of these three aspects in depth via a flat output example.


First, the character list:



var characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789`~!@#$%^&*()_-+=[{]}|;:,.<>/?";



This is a list of characters that are valid for the password. These are all found on a common keyboard to ensure they are compatible with all languages, don’t require the installation of multiple languages to view (thus alienating many users with limited language sets installed), and are compatible with most database character encodings. To note, there is no space in this generator. This is due to readability. If the space were to randomly be assigned to the beginning or end of the generated password, the user may not notice that it is there. This could be a problem if, for example, the user attempts to copy-paste the plaintext password to a separate location for safe keeping and accidentally leaves out the invisible space.


To retrieve the random character, we just make use of JavaScript’s String.charAt and Math.random methods. We can retrieve the index of a random character in the characters variable by using Math.floor(Math.random() * characters.length).


Math.random() * characters.length will give us a number between 0 and the number of characters in the string. Flooring this value via Math.floor will turn that decimal number into an integer that we can use as an index to pinpoint a single character. There is no character at the “one and a half” position of the string, but there is a character at the first and second positions.


Of course, the method of concatenation depends on your use. For flat output, we can just document.write the character to the screen. For a function or object, one may fare better using += concatenation to a variable. Either way, the most efficient method is to use a for loop, which raises the important question of how many characters long the password should be.


A study by the Georgia Tech Research Institute found that every time you add another character [to your password], your protection goes up exponentially, by 95 times. The minimum length recommended by the researchers is 12 characters, because anything shorter is already or would soon become vulnerable to brute forcers.



for (var x = 0; x < 12; x++) document.write(characters.charAt(Math.floor(Math.random() * characters.length)));



In other forms,




var characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789`~!@#$%^&*()_-+=[{]}|;:,.<>/?"; for (var x = 0; x < 12; x++) document.write(characters.charAt(Math.floor(Math.random() * characters.length)));

Function, do note the length parameter:


var password = function(length) { var characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789`~!@#$%^&*()_-+=[{]}|;:,.<>/?", temp = ""; for (var x = 0; x < (typeof(length) == "undefined" ? 12 : length); x++) temp += characters.charAt(Math.floor(Math.random() * characters.length)); return $temp; };



var password = { characters: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789`~!@#$%^&*()_-+=[{]}|;:,.<>/?", generate: function(length) { var temp = ""; for (var x = 0; x < (typeof(length) == "undefined" ? 12 : length); x++) temp += this.characters.charAt(Math.floor(Math.random() * this.characters.length)); return $temp; } };


While not quite more efficient than the password function, the object will allow you to incorporate your own tweaks, such as manipulating the page (perhaps adding a set method to set the value of the password input field to the one generated) or adding a password strength calculator.

Server-Side (PHP):


function password($length) { $characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789`~!@#$%^&*()_-+=[{]}|;:,.<>/?"; $strlen = strlen($characters); $temp = ""; for ($x = 0; $x < $length; $x++) $temp .= $characters[rand(0, $strlen - 1)]; }


With such an easy to implement tool that offers great convenience and increased safety for users, I would personally be shocked to not see such a system implemented on the majority of serious websites in the near future, given the revolutionary changes in both security risks and browser technology.


Share your thoughts with us and do not forget to subscribe our RSS so you do not miss our valuable articles.



Written by Charles Stover

Charles Stover is a self-taught, freelance web programmer. If you want to contact the author, you should follow @CharlesStover on Twitter and send him a message or visit his contact page.


    1. Elenise says:
    2. i like your post. great stuff and new ideas. so keep it up.

    1. Aletéia says:
    2. if you write more posts like it, i will be definitely following them.

    1. Albenise says:
    2. nice thank you for sharing most informative ideas and also your good view.

    1. Alma says:
    2. the effort you made to write this article is the proof of how you like to help us, thanks for all.

    1. Evelyni says:
    2. congratulations, you have very good writing skills, appreciated your work.

    1. Anatole says:
    2. information was very great to read.

    1. Élias says:
    2. thank you for providing us so many information, i always learn something here.

    1. Brian says:
    2. Great article, i am working on a php theme and this will be useful for the user sign up.

      thanks for sharing

    1. Carol says:
    2. thank you for providing us so many information, i always learn something here.

    1. Sumon @ WP Cypher says:
    2. Very useful.. thanks for sharing!

    1. http://tinyurl.com/delieaton29968 says:
    2. It appears you really understand quite a lot pertaining to
      this topic and this exhibits via this specific blog, given the name “Establishing
      a Secure Password Generator for Your User-base | CODER-DESIGN”.
      Thanks a lot ,Genia

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>