Zephyrex21/dev-tools-suite

## 为什么开发此工具 这些工具中的每一个都已经存在于网上的某个角落——它们分散在十几个布满广告的网站上，每个都在自己的标签页里，有自己的上传提示，还有各自的“我们重视您的隐私”横幅。DevKit 将其中的 30 个工具集中在一个地方，提供一致的界面，并遵循一个简单的规则：**没有任何数据会离开你的浏览器。** JWT 解码、AES 加密、RSA 密钥生成、文件哈希——所有这些都运行在 Web Crypto API 和客户端 JS 上，而不是运行在你必须信任的服务器上。 ## 功能 - **涵盖 7 个类别的 30 种工具** —— JWT、JSON、加密密钥生成、加密与哈希、密码与身份、编码以及日常网络实用工具。完整列表请见[下方](#tools)。 - **100% 客户端。** 无后端、无账号、无速率限制、无分析。打开网络标签页——什么数据都不会外传。 - **JWT Fuzzer** —— 生成涵盖真实攻击向量的变异 token（`alg:none`、RS/HS 混淆、`jku` 注入等），用于测试你自己的验证器。 - **文件感知工具** —— 拖入文件即可计算哈希，将图片和任意文件编码/解码为 Base64 并提供实时图片预览，将 `.json` 文件直接上传到任何 JSON 工具中。 - **真正的 JSON 语法高亮和行号** —— 手写代码，零依赖，应用于每个 JSON/JWT 面板。 - **命令面板** (`⌘K`) —— 瞬间跳转到任何工具。 - **奶油浅色主题 / 温暖深色主题**，带有标志性的金色渐变点缀，两者都经过调整以符合 WCAG AA 对比度标准。 - **随处可用的“下载为文件”** —— 适用于生成密钥、加密包、格式化后的 JSON、密码列表等所有实用的地方。 ## 截图 ## 工具

JWT Tools	JSON Tools
- Validator（解码 + 验证，HMAC 和 RSA/EC） - Encode（构建与签名） - Header & Payload Formatter - Secret Generator - Fuzzer（攻击向量变异）	- Formatter - Validator - Minifier - Converter（↔ YAML / XML / CSV） - Schema Validator (Ajv) - Path Finder (JSONPath) - Diff Tool - Generator - Sort Keys - Escape / Unescape - Tree Editor
Cryptographic Key Generators	Encryption & Security
- RSA/EC Key Pair Generator (RS/ES, PEM & JWK) - Encryption Key Generator (AES) - API Key Generator	- Symmetric Encryption (AES-256-GCM) - Asymmetric Encryption (RSA-OAEP) - Hash Generator (MD5/SHA-1/256/384/512，文本或文件)
Password & Identity	Data Encoding
- Password Generator（随机 / 易记 / PIN，批量） - UUID Generator (v1 / v4 / v5)	- Base64（文本、文件、图片） - URL Encoder/Decoder - Regex Tester（附带常见模式预设）
Web Resources
- Lorem Ipsum Generator - URL Parser - HTML Entities

## 技术栈 - **React 19 + TypeScript + Vite** —— 纯客户端，无 SSR - **React Router** —— 每个工具一个 URL，按路由延迟加载 - **Tailwind CSS v4** —— 设计 token 位于 `src/index.css`，包含奶油/深色主题 - **Web Crypto API** —— 用于所有签名、加密和哈希操作 - **[`jose`](https://github.com/panva/jose)** —— JWT 签名/验证 - **`js-yaml`, `fast-xml-parser`, `papaparse`** —— JSON 转换器 - **`ajv`** —— JSON Schema 验证 - **`jsonpath-plus`**, **`jsondiffpatch`** —— 路径查询与差异对比 - **`uuid`** —— UUID v1/v4/v5 - MD5 和 JSON 语法高亮器均为手写，非依赖项 ## 快速开始 ``` git clone https://github.com/Zephyrex21/dev-tools-suite.git cd dev-tools-suite npm install npm run dev # http://localhost:5173 ``` ``` npm run build # production build -> dist/ npm run preview # serve the production build locally npm run test # run the Vitest suite (92 tests: lib/ logic + component tests) npm run lint # oxlint ``` 无需环境变量，无需 API 密钥，无需配置后端。CI (GitHub Actions) 会在每次推送和 pull request 时运行 lint、type-check + build 以及完整的测试套件。 ## 部署 DevKit 是一个完全静态的网站——任何静态托管都可以。 - **Vercel** —— 使用 `vercel deploy`，或者在仪表板中连接仓库（Vite 会被自动检测）。 - **Netlify** —— 构建命令 `npm run build`，发布目录 `dist`。 - **Cloudflare Pages / GitHub Pages** —— 使用相同的构建命令和输出目录。 ## 项目结构 ``` src/ components/ Layout, Sidebar, TopBar, Panel, CodeArea, TokenStrip, ... hooks/ useTheme (light/dark persistence) lib/ jwt.ts, json.ts, crypto.ts, md5.ts, password.ts, uuidgen.ts, encoding.ts, jsonHighlight.ts — pure logic, no UI lib/__tests__/ Vitest suite for everything in lib/ routes/ Landing.tsx Marketing homepage Home.tsx In-app tool dashboard jwt/ 5 tools json/ 11 tools crypto/ 3 tools security/ 3 tools identity/ 2 tools encoding/ 3 tools resources/ 3 tools App.tsx Router config, lazy-loaded per route vercel.json SPA rewrite rule (required for direct links to any tool) .github/workflows/ci.yml Lint + build + test on push/PR ``` 每个工具都是一个路由组件 + `lib/` 中的一个纯逻辑模块。添加新工具意味着：在 `lib/` 中添加一个函数、一个路由组件、在 `lib/tools.ts` 中添加一个条目（为侧边栏、仪表板、命令面板和搜索提供数据），并在 `App.tsx` 中添加一行代码。 ## 测试 `src/lib/` —— 没有 UI 的纯逻辑层 —— 拥有一个包含 92 项测试的 Vitest 套件，涵盖了每个模块：JWT 编码/验证/fuzz、JSON 转换和往返测试、AES/RSA 加密、哈希（包括手写的 MD5，它在所有块填充边缘情况下与 Node 的 `crypto` 模块进行了对照检查）、密码熵计算、基于 RFC 测试向量的 UUID 生成、JSON 语法分词器以及崩溃报告格式化。一些组件测试（`@testing-library/react`）涵盖了需要真实渲染才能验证的内容，比如 JSON TreeEditor 的深度限制保护——该测试模拟了 120 次实际点击，以证明深度展开的树会被截断而不是崩溃，而不是仅仅断言常量存在。已知的测试向量取自 Node 自身的 `crypto` 模块或发布的 RFC，而不是凭记忆手动输入——这些测试的早期草稿中有几个手动输入的向量本身就是错误的，这正是这种方法所避免的失败模式。 ``` npm run test ``` CI 会在每次推送和 PR 时运行此测试套件、lint 和完整构建——参见 `.github/workflows/ci.yml`。 ## 针对病态输入的强化 一些工具接受任意的、无限制的用户输入，这需要超出常规错误处理的特定保护： - **Regex Tester** 在 Web Worker 中运行匹配，并设置了 2 秒的超时。像 `(a+)+$` 这样的模式匹配中等长度的字符串会触发灾难性回溯——单次正则表达式引擎调用可能会挂起几分钟，而 JavaScript 无法在同一线程内将其中断。如果 Worker 没有及时返回，它将被强制终止并重启，而不是冻结标签页。 - **Hash Generator** 在 Web Worker 中而不是主线程中计算文件（和粘贴的文本）的哈希，因为手写的 MD5 实现运行的是一个没有让步（yield）的同步循环——在大文件上，否则这会在完成任务前一直阻塞整个 UI。 - **JSON TreeEditor** 将递归限制在 80 层。`JSON.parse` 本身可以轻松处理比这深得多的嵌套，但递归*渲染*那么深的 React 组件树每层会消耗多得多的栈空间，并可能在解析之前就耗尽调用栈。 ## 可访问性与错误可见性 - 跳至内容链接、焦点受限的模态框（命令面板、移动导航抽屉），关闭时焦点会恢复到触发器，并且每个展开式控件（侧边栏手风琴菜单、JSON 树）上都有 `aria-expanded` 属性。 - 如果工具崩溃，错误边界（按路由划分，因此一个工具崩溃不会导致应用程序的其他部分瘫痪）会通过一键“Report on GitHub”链接显示发生的情况——该链接预填了错误、路由和浏览器信息，不涉及自动收集或第三方分析。 - 一个轻量级的全局监听器会捕获错误边界在结构上无法捕获的错误（事件处理程序中未捕获的 promise rejection），并通过可关闭的横幅提示相同的报告选项，而不是静默失败。 ## 许可证 [MIT](LICENSE) —— 随你怎么用。

标签：自动化攻击