HailBytes Password Strength Analyzer

Zero-dependency web component — works in Hugo, React, Vue, plain HTML, or any SPA framework. Install via npm or drop in via a <script type="module"> CDN tag.

---

What it is

A single JavaScript file that registers a custom HTML element <hailbytes-password-strength>. Drop it anywhere and it works. It uses the Web Components standard (Custom Elements + Shadow DOM) so:

• 🔒 Styles are fully encapsulated — no CSS bleed in or out
• 🧩 Framework-agnostic — works in React, Vue, Angular, Svelte, Hugo, Next.js, or plain HTML
• ⚡ No build step — just a <script type="module"> tag
• 📦 Zero external dependencies

Features

• Real-time strength meter (5 levels: Very Weak → Very Strong)
• Entropy calculation & estimated crack time
• Keyboard pattern detection (qwerty, asdf, 1234, etc.)
• Common password & dictionary word detection
• Character composition breakdown
• Toggle password visibility
• Light/dark theme support
• Fires a password-score event on every keystroke for programmatic use
• Static analyze(password) method — no DOM element needed

---

Install

npm install @hailbytes/password-analyzer

Or use it without a bundler via a CDN (see below).

Quick Start

1. npm (bundlers, Next.js, Vite, Webpack, etc.)

// Side-effect import registers the <hailbytes-password-strength> custom element.
import '@hailbytes/password-analyzer';

// Or import the pure DOM-free analyzer:
import { analyze } from '@hailbytes/password-analyzer';
console.log(analyze('Tr0ub4dor&3').score);

<hailbytes-password-strength theme="dark"></hailbytes-password-strength>

2. Plain HTML / Hugo / Static Sites

<!-- Load the component -->
<script type="module" src="hailbytes-password-strength.js"></script>

<!-- Use it anywhere on the page -->
<hailbytes-password-strength></hailbytes-password-strength>

<!-- Dark theme, white-label (no "by HailBytes" footer) -->
<hailbytes-password-strength theme="dark" branding="off"></hailbytes-password-strength>

3. Via CDN (jsDelivr — no download needed)

<!-- From npm via jsDelivr (recommended — version-pinned) -->
<script type="module"
  src="https://cdn.jsdelivr.net/npm/@hailbytes/password-analyzer/hailbytes-password-strength.js">
</script>

<!-- Or directly from GitHub main (always latest) -->
<script type="module"
  src="https://cdn.jsdelivr.net/gh/HailBytes/password-analyzer@main/hailbytes-password-strength.js">
</script>

<hailbytes-password-strength theme="dark"></hailbytes-password-strength>

4. React / Vue

// In your entry point or component file:
import 'hailbytes-password-strength.js'; // registers the custom element

// React — tell TypeScript/JSX to treat it as an intrinsic element if needed
// Add to your react-app-env.d.ts or a global.d.ts:
// declare namespace JSX {
//   interface IntrinsicElements {
//     'hailbytes-password-strength': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & { theme?: string };
//   }
// }

// React component
export function PasswordField() {
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    const handler = (e) => console.log('Score:', e.detail.score);
    el.addEventListener('password-score', handler);
    return () => el.removeEventListener('password-score', handler);
  }, []);

  return <hailbytes-password-strength ref={ref} theme="dark" />;
}

<!-- Vue 3 -->
<template>
  <hailbytes-password-strength
    theme="dark"
    @password-score="onScore"
  />
</template>

<script setup>
import 'hailbytes-password-strength.js';
const onScore = (e) => console.log(e.detail);
</script>

---

API

Attributes

Attribute	Values	Default	Description
theme	"light" / "dark"	"light"	Color theme for the component
branding	"off"	(shown)	Hide the "by HailBytes" footer for white-label embeds

Custom Events

password-score

Fired on every keystroke. Bubbles up through the DOM.

document.querySelector('hailbytes-password-strength')
  .addEventListener('password-score', (event) => {
    const { score, label, entropy, checks } = event.detail;
    // score: 0–100
    // label: "Very Weak" | "Weak" | "Fair" | "Strong" | "Very Strong"
    // entropy: number (bits)
    // checks: object with per-rule pass/fail results
    console.log(`${label} (${score}/100) — ${entropy} bits entropy`);
  });

Static Method: analyze(password)

Use the scoring engine directly without a DOM element:

import HailbytesPasswordStrength from './hailbytes-password-strength.js';
// or with the named export:
import { analyze } from './hailbytes-password-strength.js';

const result = HailbytesPasswordStrength.analyze('MyP@ssw0rd!');
// result: { score, label, entropy, crackTime, checks, patterns, dictionaryWords, composition }

console.log(result.score);    // e.g. 72
console.log(result.label);    // "Strong"
console.log(result.entropy);  // e.g. 65.4
console.log(result.crackTime); // "Centuries"

Result Object Shape

{
  score: number;           // 0–100
  label: string;           // "Very Weak" | "Weak" | "Fair" | "Strong" | "Very Strong"
  color: string;           // hex color matching the strength level
  level: 1 | 2 | 3 | 4 | 5;
  entropy: number;         // bits of entropy
  crackTime: string;       // human-readable crack time
  checks: {
    [key: string]: {
      pass: boolean;
      label: string;
    }
  };
  patterns: string[];      // detected keyboard/sequential patterns
  dictionaryWords: string[]; // detected common/dictionary words
  composition: {
    length: number;
    lowerCount: number;
    upperCount: number;
    numberCount: number;
    symbolCount: number;
    uniqueChars: number;
  };
}

---

Scoring Methodology

Factor	Max Points
Password length (≥16 chars = full)	30
Character diversity (lower/upper/number/symbol)	25
Entropy bonus	20
Unique character ratio	15
Keyboard pattern penalty	−10 per pattern
Dictionary/common word penalty	−15 per match
Common password penalty	−30

Strength levels: Very Weak (0–19) · Weak (20–39) · Fair (40–59) · Strong (60–79) · Very Strong (80–100)

---

See also

Part of the HailBytes calculator suite — drop-in web components for security and risk:

• @hailbytes/password-analyzer — password strength + entropy analyzer (this package)
• @hailbytes/pentest-calculator — penetration testing scope and cost estimator (repo)
• @hailbytes/vulnerability-calculator — vulnerability scanner infrastructure sizing (repo)
• @hailbytes/security-roi-calculator — security awareness training ROI (repo)

---

License

Mozilla Public License 2.0

---

Enterprise Support

Running phishing simulations at scale? HailBytes SAT delivers managed GoPhish with enterprise support, on AWS and Azure Marketplaces.

Get Enterprise Support ->

---

About HailBytes

HailBytes provides cybersecurity training, phishing simulation, and security awareness tools for organizations.

Part of the HailBytes open-source security toolkit.