DEV Community

jiebang-tools
jiebang-tools

Posted on

Building a Secure Password Generator in JavaScript: A Practical Guide

#tutorial #security #webdev #javascript

Password breaches happen every year, and weak passwords are the low-hanging fruit for attackers.

Why Password Strength Matters

Password Type Example Crack Time
6-digit numeric 123456 Instant
16 chars mixed aR7$kM3!pX9#nL2@ ~trillions of years

The core of password strength is entropy — essentially, randomness.

The Three Pillars of Secure Password Generation

1. Random Source Quality 

// ❌ Insecure: Math.random() is pseudo-random
const weakPassword = Math.random().toString(36).slice(2);

// ✅ Secure: crypto.getRandomValues() uses OS-level randomness
const array = new Uint32Array(1);
crypto.getRandomValues(array);
Enter fullscreen mode Exit fullscreen mode

2. Character Space

Character Set Count
Digits 10
All combined 94

3. Frontend vs Backend Generation

Frontend generation is safer — the password never travels over the network.

Comparing Password Solutions

Browser Built-in Generators

Pros: Free, auto-fill
Cons: Not customizable, sync breach risk

Password Managers (1Password, Bitwarden, KeePass)

Pros: All-in-one management
Cons: Master password = single point of failure

Online Password Generators

Pros: Free, no installation, customizable
Cons: Must verify the tool runs client-side only

Command Line 

openssl rand -base64 16
head -c 16 /dev/urandom | xxd -p
Enter fullscreen mode Exit fullscreen mode

How to Tell if an Online Tool is Safe

Check 1: Watch Network Requests

Open F12 → Network. A client-side tool should have zero network requests.

Check 2: Inspect Source Code 

// Good: Uses Web Crypto API
crypto.getRandomValues(array);

// Dangerous: Calls backend
fetch("/api/generate-password");
Enter fullscreen mode Exit fullscreen mode

Building a Secure Generator 

class SecurePasswordGenerator {
    constructor(options = {}) {
        this.length = options.length || 16;
        this.useUppercase = options.useUppercase ?? true;
        this.useLowercase = options.useLowercase ?? true;
        this.useNumbers = options.useNumbers ?? true;
        this.useSymbols = options.useSymbols ?? true;
        this.excludeAmbiguous = options.excludeAmbiguous ?? false;
    }

    buildCharset() {
        let charset = "";
        if (this.useUppercase) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        if (this.useLowercase) charset += "abcdefghijklmnopqrstuvwxyz";
        if (this.useNumbers) charset += "0123456789";
        if (this.useSymbols) charset += "!@#$%^&*()_+-=[]{}|;:,.<>?";
        if (this.excludeAmbiguous) {
            charset = charset.split("")
                .filter(c => !"Il1O0o".includes(c)).join("");
        }
        return charset;
    }

    generate() {
        const charset = this.buildCharset();
        const password = new Array(this.length);
        const randomValues = new Uint32Array(this.length);
        crypto.getRandomValues(randomValues);
        for (let i = 0; i < this.length; i++) {
            password[i] = charset[randomValues[i] % charset.length];
        }
        // Fisher-Yates shuffle
        for (let i = password.length - 1; i > 0; i--) {
            const j = randomValues[i] % (i + 1);
            [password[i], password[j]] = [password[j], password[i]];
        }
        return password.join("");
    }
}
Enter fullscreen mode Exit fullscreen mode

Key points:

  1. crypto.getRandomValues() instead of Math.random()
  2. Fisher-Yates shuffle for position randomization
  3. Ambiguous character exclusion for readability

Calculating Password Entropy 

Entropy = length × log2(charset_size)
Enter fullscreen mode Exit fullscreen mode
Configuration Entropy (16 chars) Rating
Digits only 53 bits Weak
All ASCII 105 bits Excellent

NIST recommends minimum 80 bits. Aim for 100+ for high security.

Use a Ready-Made Tool

👉 Online Password Generator - JieBang Tools

Runs entirely in browser, no server requests, supports custom length and character types.

Summary

Three non-negotiable rules:

  1. Secure random source (Web Crypto API)
  2. No network transmission (client-side only)
  3. Customizable parameters

Password security starts with refusing weak passwords.

Top comments (0)