最近把之前做的密码生成器重构了一遍，做成了一套完整的密码安全工具站。全部纯前端实现，所有计算在浏览器本地完成，不上传任何数据，甚至可以离线使用。
为什么做这个项目？ 平时经常需要生成随机密码，但发现市面上的工具要么：
需要后端接口（担心隐私泄露）
界面太丑，体验差
功能单一，没有场景推荐 于是决定自己做一个，核心原则：纯前端、本地计算、好看好用。
三个工具的设计思路
- 密码生成器 核心难点不是生成随机字符，而是让用户"知道"这个密码有多强。 做了几个细节：
健康度评分：0-100分 + 熵值(bits) + 安全等级，让用户直观看到密码强度
场景推荐：WiFi密码(16位)、银行卡(6位数字)、邮箱/社交(12位混合)、加密文件(20位+)
一键复制：生成后自动复制，提示"建议保存到密码管理器"
javascript // 熵值计算核心逻辑 function calculateEntropy(password) { const charSetSize = getCharSetSize(password); // 根据字符类型计算字符集大小 return Math.log2(Math.pow(charSetSize, password.length)); }
- 密码短语生成器 这是最有意思的部分。传统随机密码 s9QeX5Y25x92rxaW 根本记不住。 改用随机单词组合： amber-duck-infinity-coral-755 然后加一个中文记忆口诀： "穿越琥珀的鸭子，抵达无限之境，珊瑚迎接勇者，编号755" 这样既有高强度（4个单词熵值约44 bits，5个约55 bits），又能记住。 技术实现上，维护了一个常用英文单词表，前端随机组合，支持连字符/下划线/空格分隔。
- 密码泄露检测 最敏感的功能。必须保证原始密码不上传。 方案：前端计算 SHA1 哈希，取前5位调用 Have I Been Pwned 的 range API，本地比对后5位。
javascript // 核心逻辑 async function checkLeak(password) { const hash = await sha1(password); const prefix = hash.slice(0, 5); const suffix = hash.slice(5);
// 只传前5位，后端返回所有匹配的后5位
const response = await fetch(`https://api.pwnedpasswords.com/range/${prefix}`);
const leakedSuffixes = await response.text();
return leakedSuffixes.includes(suffix); // 本地比对
} 虽然实际调用API时网络环境受限，但架构上是安全的。 技术栈
纯 HTML/CSS/JavaScript，无框架
CSS Grid + Flexbox 响应式布局
原生 Web Crypto API 生成随机数
localStorage 保存生成历史
一些踩坑记录 随机数安全 不要用 Math.random() 生成密码！用 crypto.getRandomValues() ：
javascript function secureRandom(max) { const array = new Uint32Array(1); crypto.getRandomValues(array); return array[0] % max; } 移动端适配 密码生成器这种工具，手机端使用率其实很高。做了两套布局：
PC：左右分栏，参数面板在右侧
手机：上下堆叠，参数收进折叠面板 批量生成性能 生成1000个密码时，DOM操作会卡顿。优化方案：用 DocumentFragment 批量插入，或者直接用 textarea 输出文本。 在线体验 工具站地址：qingyin.monster/tools/passw… 三个页面：
/password.html - 密码生成器
/passphrase-generator.html - 密码短语生成器
/password-leak-check.html - 泄露检测 全部开源思路，欢迎提建议或交流实现细节。
后续计划
补完泄露检测的 PDF 安全报告
SEO 优化（独立页面标题、结构化数据）
PWA 支持，可添加到手机桌面 如果这篇文章对你有帮助，欢迎点赞收藏。有做类似工具的朋友也可以交流，一起把前端工具站做好用。
