HSM Kit

HSM Kit - Professional Online Encryption Toolkit

📖 Introduction

HSM Kit is a professional online encryption toolkit designed for developers, testers, and security engineers in finance, payment, and security domains. It provides 44+ tools covering HSM key management, payment security, PKI certificates, and cryptographic algorithms, all running entirely in the browser.

Core Values

• Security First - 100% client-side computation, keys and sensitive data never leave your device
• Professional & Complete - 44+ tools covering HSM key management, payment security, PKI certificates, and cryptographic algorithms
• Ready to Use - Open browser and start working, supports PWA installation, works on Mac/Windows/Linux/mobile
• Open Source - Code is publicly auditable, meets financial industry compliance requirements

✨ Features

🛠️ Tool Modules

🔐 Encryption/Decryption Tools (5)

🔑 Key Management Tools (8)

🔐 PKI Tools (2)

💳 Payment Security Tools (21)

🧰 General Tools (9)

📚 Knowledge Base

HSM Kit includes a built-in knowledge base (/guides/) with 42 in-depth technical articles in each of English and Chinese, covering encryption algorithms, payment security, HSM key management, and more. Articles are cross-linked and directly connected to corresponding tools.

Knowledge Base Features

• 📝 Markdown Rendering - Code blocks, tables, internal links
• 🔗 Tool Integration - Direct links to related tools and articles
• 🌍 Bilingual - English and Chinese, 43 articles each, fully translated
• 📖 Table of Contents - Right-side TOC navigation with scroll highlighting
• 🔍 Search - Full-text search across articles

📁 Project Structure

hsmkit/├── public/                     # Static assets│   ├── favicon.svg             # Website logo│   ├── favicon-*.png           # PWA icons (48/192/512)│   ├── apple-touch-icon.png    # iOS icon│   ├── sitemap.xml             # Sitemap (144 URLs with hreflang)│   ├── robots.txt              # Crawler instructions│   ├── _headers                # HTTP headers (Cloudflare)│   └── _redirects              # SPA route redirects│├── scripts/                    # Build scripts│   ├── generate-favicon-png.js # Favicon generation│   ├── generate-guide-og.js    # Per-guide social image generation│   ├── prerender-guides.js     # Static guide-page generation│   ├── check-tool-pages.js     # Production page smoke checks│   └── update-sitemap-lastmod.js # Guide/tool sitemap maintenance│├── src/│   ├── components/             # Reusable components│   │   ├── cipher/             # Encryption tool components│   │   ├── common/             # Common components│   │   │   ├── PageLayout.tsx  # Page layout + Schema.org│   │   │   ├── ToolPage.tsx    # Tool page factory│   │   │   ├── SEO.tsx         # SEO meta tags + prerender│   │   │   ├── ResultCard.tsx  # Result display (aria-live)│   │   │   ├── ErrorCard.tsx   # Error display (role="alert")│   │   │   ├── LengthIndicator.tsx # Shared input length/format states│   │   │   ├── ExampleButton.tsx # Context-preserving example loading│   │   │   ├── ErrorBoundary.tsx # Error boundary│   │   │   ├── ReloadPrompt.tsx # PWA update prompt (dark mode)│   │   │   └── ...│   │   ├── generic/            # General tool components│   │   ├── keys/               # Key management components│   │   ├── payment/            # Payment tool components│   │   └── pki/                # PKI tool components│   ││   ├── hooks/                  # Custom hooks│   │   ├── useLanguage.tsx     # Multi-language switching│   │   ├── useTheme.tsx        # Theme switching│   │   ├── useToolForm.ts      # Tool form hook│   │   ├── useRecentTools.ts   # Recent tools and local favorites│   │   └── ...│   ││   ├── data/                   # Tool metadata and examples│   │   ├── examples.ts         # Non-production example values│   │   ├── toolRelations.ts    # Related-tool workflow graph│   │   └── toolGuidesMap.ts    # Tool-to-guide links│   ││   ├── locales/                # Translations (6 languages)│   │   ├── en/                 # English│   │   ├── zh/                 # Chinese│   │   ├── ja/                 # Japanese│   │   ├── ko/                 # Korean│   │   ├── de/                 # German│   │   └── fr/                 # French│   ││   ├── utils/                  # Utility functions│   │   ├── analytics.ts        # Privacy-safe tool action events│   │   ├── crypto.ts           # Core crypto utilities│   │   ├── crypto.test.ts      # Crypto unit tests│   │   ├── hex.ts              # Hex utilities│   │   ├── hex.test.ts         # Hex unit tests│   │   ├── logger.ts           # Production-safe logger│   │   └── ...│   ││   ├── App.tsx                 # Root component + routes│   ├── routeConfig.ts          # Route configuration│   ├── routes.tsx              # Lazy-loaded page components│   └── main.tsx                # Entry point│├── vitest.config.ts            # Test configuration├── vite.config.ts              # Build configuration├── tsconfig.json               # TypeScript config (strict mode)└── package.json                # Dependencies

🚀 Quick Start

Online

Visit https://hsmkit.com to use all tools directly.

PWA Install

After visiting the website, your browser will prompt "Install HSM Kit". Click to install to desktop.

Local Development

# Clone repositorygit clone https://github.com/hsm-kit/hsmkit.gitcd hsmkit
# Install dependenciesnpm install
# Start development servernpm run dev# Visit http://localhost:5173

Build for Production

# Build (includes sitemap update + Puppeteer prerender + PWA Service Worker)npm run build
# Preview production buildnpm run preview

When a release changes tool-page functionality, refresh only the 44 tool-page dates without rewriting homepage, legal, or guide dates:

node scripts/update-sitemap-lastmod.js --tools-date YYYY-MM-DD

Note: Chrome is required for building. The prebuild script automatically installs it via npx puppeteer browsers install chrome.

Type Checking

# TypeScript type checking (strict mode)npm run typecheck
# ESLint code checkingnpm run lint
# ESLint auto-fixnpm run lint:fix

Testing

# Run all testsnpm test
# Smoke-test every generated tool and guide pagenpm run test:pages
# Watch modenpm run test:watch
# Test coveragenpm run test:coverage

🏗️ Tech Stack

⚡ Performance

🔐 Security

• Client-side Encryption - All crypto operations run in browser using Web Crypto API and crypto-js
• Zero Data Transfer - Keys and sensitive data never leave your device
• Open Source - All code is publicly auditable
• Compliance Ready - Meets financial industry security requirements
• CSP Protection - Content-Security-Policy prevents XSS attacks
• Production Logging - Debug logs silenced in production, only errors recorded

♿ Accessibility

HSM Kit follows WCAG 2.1 AA standards with comprehensive accessibility support:

• Skip-to-content Link - Keyboard users can quickly jump to main content
• ARIA Labels - Navigation, buttons, form elements have proper aria-labels
• aria-live Regions - Dynamic results and errors are announced by screen readers
• Keyboard Navigation - All interactive elements support Tab/Enter/Space
• Focus Management - Clear focus indicators and logical focus order
• Semantic HTML - Uses role="banner", role="main", role="alert" etc.

🌍 Internationalization

HSM Kit supports 6 languages with 100% translation coverage:

Translation files are located in src/locales/ with lazy loading for optimal performance.

🌍 Deployment

HSM Kit can be deployed to any static hosting service:

# The dist/ directory can be deployed directly after buildnpm run build

Search Discovery

• Set BING_SITE_AUTH in the build environment to the verification value supplied by Bing Webmaster Tools.
• After Cloudflare Pages finishes deploying, open GitHub Actions → Submit URLs to IndexNow → Run workflow. Leave the URL empty to submit the sitemap, or enter one changed URL. Local submission remains available through npm run submit:indexnow.
• AI-readable resources are published at /llms.txt, /ai/tools.json, and each guide's index.md URL.

🤝 Contributing

Welcome to submit Issues and Pull Requests!

1. Fork this repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Submit a Pull Request

Adding New Knowledge Base Articles

1. Create {slug}.md in src/content/guides/en/ (and zh/ for Chinese)
2. Update src/data/guides/en.json and zh.json with metadata
3. Add routes in prerender.config.ts
4. Add URL in public/sitemap.xml
5. Run npm run build to verify

📄 License

MIT License - See LICENSE file

🔗 Links

• 🌐 Website
• 📚 Knowledge Base
• 📦 GitHub Repository
• 🐛 Issue Tracker