An Elementary JavaScript Tutorial

Modern website registration has changed drastically since its conception. Automated programs attempt to brute force into accounts, browsers automatically remember any password a user enters, and users have the ability to reset their passwords at any time through email. 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 your users to have a different password for each website they visit. I often 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 manager does not automatically enter my password for me, I can just use the “Forgot Password?” feature implemented by most websites.

In a time where passwords are becoming more obscure and less memorized by the individual, why is it not more popular to help new users in securing their accounts? cPanel implements it extremely well in its MySQL user creation form.

cPanel’s MySQL password generator

Such a form is not hard to implement. A password generator is a very simple piece of code with a very efficient output. 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.

First, the character list:

Note: You should still allow the user to manually enter whatever characters they want.

This is a list of characters that are valid for the randomly-generated password. These are all found on a common keyboard to ensure they are compatible with all languages, don’t alienate users with limited language packs installed, and are compatible with largest number of 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.prototype.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. “Floor”ing this value via Math.floor will turn that decimal number into an integer by rounding down. We we can use that integer 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 or second position.

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

As such an easy to implement tool that offers great convenience and increased safety for users, and the revolutionary changes in both security risks and browser technology, it’s a shame it is not implemented on more websites.

BONUS: an implementation in PHP

Share your thoughts in the comments below!