1. 为什么我要用 Codex 手搓一个本地密码管理器浏览器里存着几十个账号每次登录都要翻备忘录用在线密码工具又担心数据被同步到不知道哪台服务器上。这个场景你应该不陌生。我这次想做的事情很直接用 Codex 从零生成一个纯本地的密码管理器所有数据只留在自己的浏览器里主密码派生密钥、AES-256-GCM 加密存储、随机密码自动生成一条龙跑通。核心检索词先摆出来Codex 本地密码管理器、AES 加密存储、主密码派生密钥、随机密码自动生成。它是什么就是一个跑在浏览器里的单页应用用 Web Crypto API 做加密用 localStorage 做持久化不依赖任何后端。能做什么保存网站/邮箱/银行/社交账号的密码一键生成强密码实时评估强度加密导出备份。适合谁想练手 Codex 生成完整项目的前端同学、对密码安全有基本要求但不想把数据交给第三方的普通用户、以及想理解 AES-GCM 和 PBKDF2 怎么在浏览器里落地的人。整个项目我拆成四层crypto.js 负责加解密和密钥派生storage.js 负责数据读写和自动锁定generator.js 负责密码生成app.js 负责 UI 串联。下面每一步的提示词和生成结果我都会贴出来你可以直接复制去跑。环境上只需要 Node 20 和最新版 Codex CLI先确认一下node -v # v20.16.0 codex --version # codex-cli 0.9.x这里有个前提说明本项目用 Web Crypto API 的 AES-256-GCM这是浏览器原生提供的加密能力数据不经过任何服务器。但生产环境还是建议用 Bitwarden、1Password 这类成熟工具我们做的是教学和自用场景。2. TaoToken 统一 Key 与 API 通道的前置准备Codex 在生成代码的过程中会频繁调用模型如果你本地没有稳定的 API 通道生成到一半断掉会非常难受。我自己的做法是走 TaoToken 的统一 Key 通道把模型调用集中管理Codex 侧只需要配置一个 Base URL 和一个 Key。TaoToken 是什么它是一个统一的模型 API 接入层把不同模型的调用收敛到同一个入口适合 Codex、Cline、Claude Code 这类编码工具长期使用。官网入口在这里https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 地址后面不加 UTM 参数。你需要准备三件套Base URL、API Key、Model ID。Base URL 填https://taotoken.net/apiAPI Key 在控制台的 API Keys 页面创建Model ID 根据你用的模型填比如claude-sonnet-4-20250514或gpt-4o这类。创建 Key 的入口在 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。如果你用的是 Claude Code 做润色或补全配置方式类似参考 https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 。长期做编码和 Agent 任务的话Coding Plan 会更划算入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。配置好之后Codex 的请求就会走这条通道。我实测下来生成一个完整项目大概需要十几轮对话通道稳定的话基本不会中断。这里要提醒一句不要把生产数据库的直连信息塞进 MCP 配置里我们只做本地文件生成不碰任何线上数据。3. 可复制的项目结构与加密模块配置先让 Codex 初始化项目骨架。提示词我写得很具体把文件结构和加密要求都列清楚codex 创建本地密码管理器项目 password-vault。文件结构 - index.html - css/style.css - js/crypto.js AES-256 加解密模块 - js/storage.js 加密数据存储 - js/generator.js 密码生成器 - js/app.js 主入口 先创建加密模块使用 Web Crypto API 实现 1. PBKDF2 从主密码派生 256 位密钥 2. AES-256-GCM 加密/解密函数 3. 主密码哈希验证 所有注释用中文Codex 执行后会生成js/crypto.js核心配置我贴出来你可以对照检查const CRYPTO_CONFIG { ALGORITHM: AES-GCM, KEY_LENGTH: 256, IV_LENGTH: 12, SALT_LENGTH: 16, ITERATIONS: 600000, HASH: SHA-256 }; async function deriveKey(masterPassword, salt) { const encoder new TextEncoder(); const keyMaterial await crypto.subtle.importKey( raw, encoder.encode(masterPassword), PBKDF2, false, [deriveKey] ); return crypto.subtle.deriveKey( { name: PBKDF2, salt: salt, iterations: CRYPTO_CONFIG.ITERATIONS, hash: CRYPTO_CONFIG.HASH }, keyMaterial, { name: CRYPTO_CONFIG.ALGORITHM, length: CRYPTO_CONFIG.KEY_LENGTH }, false, [encrypt, decrypt] ); }加密函数把 salt、IV、密文拼成一个字节数组再转 Base64解密时按固定长度切回来。这里的关键参数是ITERATIONS: 600000PBKDF2 迭代次数越高暴力破解成本越大但派生密钥也越慢。600000 是当前比较推荐的平衡值实测在普通笔记本上派生一次大约 200-400ms用户感知不明显。如果你用 TOML 或 JSON 管理配置可以这样写{ crypto: { algorithm: AES-GCM, keyLength: 256, ivLength: 12, saltLength: 16, iterations: 600000, hash: SHA-256 }, autoLockMinutes: 5 }注意deriveKey的最后一个参数是[encrypt, decrypt]不要写成[encrypt]否则解密会报InvalidAccessError。另外extractable设为false密钥不可导出安全性更高。4. 验证请求与三步跑通加密写入、解密读取、生成强度校验代码生成完怎么确认它真的能跑我设计了三个验证动作你按顺序做一遍。第一步加密写入。打开浏览器控制台手动调用一次const salt generateRandomBytes(16); const key await deriveKey(MyMasterPass123!, salt); const encrypted await encryptData(hello-vault, MyMasterPass123!); console.log(加密结果:, encrypted); // 输出类似: 3q27wAAAAB...base64...如果控制台返回一串 Base64 字符串说明加密链路通了。这里注意encryptData内部会自己生成 salt 和 IV所以不需要你手动传。第二步解密读取。把上一步的密文传回去const decrypted await decryptData(encrypted, MyMasterPass123!); console.log(解密结果:, decrypted); // 输出: hello-vault如果输出hello-vault说明加解密闭环成立。故意传错主密码应该抛出解密失败主密码不正确这是 AES-GCM 的认证标签校验在起作用。第三步生成强度校验。调用生成器生成一个 20 位密码再评估强度const pw generatePassword({ length: 20, lowercase: true, uppercase: true, digits: true, special: true }); console.log(生成密码:, pw); const strength evaluatePasswordStrength(pw); console.log(强度:, strength.label, 得分:, strength.score); // 强度: 极强 得分: 4三步都通过后打开index.html设置主密码添加一条记录刷新页面再用主密码解锁数据应该还在。这一步验证的是 localStorage 持久化和主密码哈希校验。如果刷新后数据丢失检查saveVault是否在addEntry之后被调用。5. 本篇常见错误排查401、local proxy failed、reading choices、OAuth生成和运行过程中我踩过几个坑对照着看能省不少时间。401 UnauthorizedCodex 调用模型时返回 401通常是 API Key 没配或配错。检查~/.codex/config.toml里的api_key字段确认 Key 没有多余空格。如果你走 TaoToken 通道Base URL 要填https://taotoken.net/api不要漏掉/api路径。local proxy failed本地代理启动失败一般是端口被占用或代理配置指向了不存在的地址。先确认没有其他进程占用 Codex 默认端口再检查配置文件里的base_url是否可达。可以用curl https://taotoken.net/api/models测试连通性。reading choices 报错模型返回结构里没有choices字段通常是请求体格式不对或模型 ID 写错。检查 Model ID 是否拼写正确比如claude-sonnet-4-20250514不要写成claude-sonnet-4。另外确认请求头Content-Type: application/json没丢。OAuth 相关报错如果你用 Claude Code 的 OAuth 流程报OAuth token expired时重新走一遍授权即可。参考 https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 里的配置说明Base URL、Key、Model ID 三件套要写全。还有一个容易忽略的点crypto.subtle只在 HTTPS 或 localhost 下可用。如果你用file://协议直接打开index.htmlcrypto.subtle会是undefined。解决办法是用npx serve或python -m http.server起一个本地服务访问http://localhost:3000。6. 继续用 Codex 扩展你的密码管理器跑通基础版本后你可以继续让 Codex 加功能。比如自动锁定提示词写「监听页面可见性变化切到其他标签页时隐藏所有已显示的密码5 分钟无操作自动锁定」。Codex 会在app.js里加上visibilitychange和blur事件监听。再比如加密导出提示词写「导出时用当前主密码重新加密整个 vault生成 JSON 文件下载导入时用导出时的主密码解密按标题用户名去重合并」。这样备份文件即使泄露没有主密码也解不开。如果你想把模型调用也统一管理可以在 Codex 配置里把 Base URL 指向 https://taotoken.net/api Key 用 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 创建的Model ID 按需选。需要验证模型效果时可以用 https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 快速对话测试。长期做编码任务的话Coding Plan 入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。最后提醒一句这个项目是教学性质的本地工具主密码一旦忘记无法找回因为密钥是从主密码派生的没有后门。生产环境请用成熟密码管理器。你现在就可以打开终端把第 3 节的提示词复制进去让 Codex 开始生成。
1. 为什么我要用 Codex 手搓一个本地密码管理器浏览器里存着几十个账号每次登录都要翻备忘录用在线密码工具又担心数据被同步到不知道哪台服务器上。这个场景你应该不陌生。我这次想做的事情很直接用 Codex 从零生成一个纯本地的密码管理器所有数据只留在自己的浏览器里主密码派生密钥、AES-256-GCM 加密存储、随机密码自动生成一条龙跑通。核心检索词先摆出来Codex 本地密码管理器、AES 加密存储、主密码派生密钥、随机密码自动生成。它是什么就是一个跑在浏览器里的单页应用用 Web Crypto API 做加密用 localStorage 做持久化不依赖任何后端。能做什么保存网站/邮箱/银行/社交账号的密码一键生成强密码实时评估强度加密导出备份。适合谁想练手 Codex 生成完整项目的前端同学、对密码安全有基本要求但不想把数据交给第三方的普通用户、以及想理解 AES-GCM 和 PBKDF2 怎么在浏览器里落地的人。整个项目我拆成四层crypto.js 负责加解密和密钥派生storage.js 负责数据读写和自动锁定generator.js 负责密码生成app.js 负责 UI 串联。下面每一步的提示词和生成结果我都会贴出来你可以直接复制去跑。环境上只需要 Node 20 和最新版 Codex CLI先确认一下node -v # v20.16.0 codex --version # codex-cli 0.9.x这里有个前提说明本项目用 Web Crypto API 的 AES-256-GCM这是浏览器原生提供的加密能力数据不经过任何服务器。但生产环境还是建议用 Bitwarden、1Password 这类成熟工具我们做的是教学和自用场景。2. TaoToken 统一 Key 与 API 通道的前置准备Codex 在生成代码的过程中会频繁调用模型如果你本地没有稳定的 API 通道生成到一半断掉会非常难受。我自己的做法是走 TaoToken 的统一 Key 通道把模型调用集中管理Codex 侧只需要配置一个 Base URL 和一个 Key。TaoToken 是什么它是一个统一的模型 API 接入层把不同模型的调用收敛到同一个入口适合 Codex、Cline、Claude Code 这类编码工具长期使用。官网入口在这里https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 地址后面不加 UTM 参数。你需要准备三件套Base URL、API Key、Model ID。Base URL 填https://taotoken.net/apiAPI Key 在控制台的 API Keys 页面创建Model ID 根据你用的模型填比如claude-sonnet-4-20250514或gpt-4o这类。创建 Key 的入口在 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。如果你用的是 Claude Code 做润色或补全配置方式类似参考 https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 。长期做编码和 Agent 任务的话Coding Plan 会更划算入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。配置好之后Codex 的请求就会走这条通道。我实测下来生成一个完整项目大概需要十几轮对话通道稳定的话基本不会中断。这里要提醒一句不要把生产数据库的直连信息塞进 MCP 配置里我们只做本地文件生成不碰任何线上数据。3. 可复制的项目结构与加密模块配置先让 Codex 初始化项目骨架。提示词我写得很具体把文件结构和加密要求都列清楚codex 创建本地密码管理器项目 password-vault。文件结构 - index.html - css/style.css - js/crypto.js AES-256 加解密模块 - js/storage.js 加密数据存储 - js/generator.js 密码生成器 - js/app.js 主入口 先创建加密模块使用 Web Crypto API 实现 1. PBKDF2 从主密码派生 256 位密钥 2. AES-256-GCM 加密/解密函数 3. 主密码哈希验证 所有注释用中文Codex 执行后会生成js/crypto.js核心配置我贴出来你可以对照检查const CRYPTO_CONFIG { ALGORITHM: AES-GCM, KEY_LENGTH: 256, IV_LENGTH: 12, SALT_LENGTH: 16, ITERATIONS: 600000, HASH: SHA-256 }; async function deriveKey(masterPassword, salt) { const encoder new TextEncoder(); const keyMaterial await crypto.subtle.importKey( raw, encoder.encode(masterPassword), PBKDF2, false, [deriveKey] ); return crypto.subtle.deriveKey( { name: PBKDF2, salt: salt, iterations: CRYPTO_CONFIG.ITERATIONS, hash: CRYPTO_CONFIG.HASH }, keyMaterial, { name: CRYPTO_CONFIG.ALGORITHM, length: CRYPTO_CONFIG.KEY_LENGTH }, false, [encrypt, decrypt] ); }加密函数把 salt、IV、密文拼成一个字节数组再转 Base64解密时按固定长度切回来。这里的关键参数是ITERATIONS: 600000PBKDF2 迭代次数越高暴力破解成本越大但派生密钥也越慢。600000 是当前比较推荐的平衡值实测在普通笔记本上派生一次大约 200-400ms用户感知不明显。如果你用 TOML 或 JSON 管理配置可以这样写{ crypto: { algorithm: AES-GCM, keyLength: 256, ivLength: 12, saltLength: 16, iterations: 600000, hash: SHA-256 }, autoLockMinutes: 5 }注意deriveKey的最后一个参数是[encrypt, decrypt]不要写成[encrypt]否则解密会报InvalidAccessError。另外extractable设为false密钥不可导出安全性更高。4. 验证请求与三步跑通加密写入、解密读取、生成强度校验代码生成完怎么确认它真的能跑我设计了三个验证动作你按顺序做一遍。第一步加密写入。打开浏览器控制台手动调用一次const salt generateRandomBytes(16); const key await deriveKey(MyMasterPass123!, salt); const encrypted await encryptData(hello-vault, MyMasterPass123!); console.log(加密结果:, encrypted); // 输出类似: 3q27wAAAAB...base64...如果控制台返回一串 Base64 字符串说明加密链路通了。这里注意encryptData内部会自己生成 salt 和 IV所以不需要你手动传。第二步解密读取。把上一步的密文传回去const decrypted await decryptData(encrypted, MyMasterPass123!); console.log(解密结果:, decrypted); // 输出: hello-vault如果输出hello-vault说明加解密闭环成立。故意传错主密码应该抛出解密失败主密码不正确这是 AES-GCM 的认证标签校验在起作用。第三步生成强度校验。调用生成器生成一个 20 位密码再评估强度const pw generatePassword({ length: 20, lowercase: true, uppercase: true, digits: true, special: true }); console.log(生成密码:, pw); const strength evaluatePasswordStrength(pw); console.log(强度:, strength.label, 得分:, strength.score); // 强度: 极强 得分: 4三步都通过后打开index.html设置主密码添加一条记录刷新页面再用主密码解锁数据应该还在。这一步验证的是 localStorage 持久化和主密码哈希校验。如果刷新后数据丢失检查saveVault是否在addEntry之后被调用。5. 本篇常见错误排查401、local proxy failed、reading choices、OAuth生成和运行过程中我踩过几个坑对照着看能省不少时间。401 UnauthorizedCodex 调用模型时返回 401通常是 API Key 没配或配错。检查~/.codex/config.toml里的api_key字段确认 Key 没有多余空格。如果你走 TaoToken 通道Base URL 要填https://taotoken.net/api不要漏掉/api路径。local proxy failed本地代理启动失败一般是端口被占用或代理配置指向了不存在的地址。先确认没有其他进程占用 Codex 默认端口再检查配置文件里的base_url是否可达。可以用curl https://taotoken.net/api/models测试连通性。reading choices 报错模型返回结构里没有choices字段通常是请求体格式不对或模型 ID 写错。检查 Model ID 是否拼写正确比如claude-sonnet-4-20250514不要写成claude-sonnet-4。另外确认请求头Content-Type: application/json没丢。OAuth 相关报错如果你用 Claude Code 的 OAuth 流程报OAuth token expired时重新走一遍授权即可。参考 https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecodeutm_campaignrewrite 里的配置说明Base URL、Key、Model ID 三件套要写全。还有一个容易忽略的点crypto.subtle只在 HTTPS 或 localhost 下可用。如果你用file://协议直接打开index.htmlcrypto.subtle会是undefined。解决办法是用npx serve或python -m http.server起一个本地服务访问http://localhost:3000。6. 继续用 Codex 扩展你的密码管理器跑通基础版本后你可以继续让 Codex 加功能。比如自动锁定提示词写「监听页面可见性变化切到其他标签页时隐藏所有已显示的密码5 分钟无操作自动锁定」。Codex 会在app.js里加上visibilitychange和blur事件监听。再比如加密导出提示词写「导出时用当前主密码重新加密整个 vault生成 JSON 文件下载导入时用导出时的主密码解密按标题用户名去重合并」。这样备份文件即使泄露没有主密码也解不开。如果你想把模型调用也统一管理可以在 Codex 配置里把 Base URL 指向 https://taotoken.net/api Key 用 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 创建的Model ID 按需选。需要验证模型效果时可以用 https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 快速对话测试。长期做编码任务的话Coding Plan 入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。最后提醒一句这个项目是教学性质的本地工具主密码一旦忘记无法找回因为密钥是从主密码派生的没有后门。生产环境请用成熟密码管理器。你现在就可以打开终端把第 3 节的提示词复制进去让 Codex 开始生成。
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
