HSM Kit

HSM Kit - Professional Online Encryption Toolkit

🔐 Professional encryption & key management tools, 100% client-side, secure & reliable

English | 简体中文 | 日本語 | 한국어 | Deutsch | Français

📖 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 repository
git clone https://github.com/hsm-kit/hsmkit.git
cd hsmkit

# Install dependencies
npm install

# Start development server
npm run dev
# Visit http://localhost:5173

Build for Production

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

# Preview production build
npm 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 checking
npm run lint

# ESLint auto-fix
npm run lint:fix

Testing

# Run all tests
npm test

# Smoke-test every generated tool and guide page
npm run test:pages

# Watch mode
npm run test:watch

# Test coverage
npm 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 build
npm 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

⚠️ Note: This tool is intended for testing and development environments. Please ensure compliance with relevant security standards before using in production.

Made with ❤️ by HSM Kit Team