纯前端RSA加密解密工具：基于JSEncrypt的浏览器端数据加解密实践

前言

在前端开发中，我们经常需要处理敏感数据的传输安全问题。RSA作为一种非对称加密算法，能够在不安全的信道上安全地交换密钥或加密小量数据。然而，搭建一个完整的RSA加解密环境通常需要后端服务支持。本文将介绍一个**纯前端、零依赖（仅引入JSEncrypt）**的RSA加密解密工具，它完全在浏览器中完成密钥生成、公钥加密和私钥解密，为日常测试与学习提供了极大的便利。

工具概览

这个工具是一个单页静态HTML应用，包含三个核心模块：

密钥管理：支持生成1024/2048/4096位的RSA密钥对，并可手动填写或粘贴公钥、私钥。密钥区域默认折叠隐藏，点击"显示"按钮才展开，保护密钥信息安全。
公钥加密：输入明文，使用当前公钥加密并输出Base64密文。
私钥解密：粘贴密文，使用当前私钥解密并还原明文。

界面采用双栏卡片式布局，左侧管理密钥，右侧操作加解密，交互流畅，并有实时的字节数统计和长度超限提示。

技术实现

核心技术栈

JSEncrypt：封装了RSA算法的JavaScript库，提供密钥生成、加密、解密等功能。
Web API ：TextEncoder用于准确计算字符串的UTF-8字节数，Clipboard API实现一键复制。
原生CSS/HTML：采用CSS自定义属性、弹性布局和细腻的过渡动画，无需任何前端框架。

密钥生成与格式处理

使用JSEncrypt可以轻松生成标准的RSA密钥对，输出为PEM格式字符串：

javascript 复制代码

const crypt = new JSEncrypt({ default_key_size: 2048 });
crypt.getKey();
const publicKey = crypt.getPublicKey();  // 公钥 PEM
const privateKey = crypt.getPrivateKey(); // 私钥 PEM (PKCS#1)

生成的密钥会自动填充到对应文本域。为了安全起见，私钥默认是折叠隐藏的，需要用户手动点击"显示"按钮才可见。

加密解密核心流程

加密时，先校验公钥格式和明文长度，然后调用encrypt.encrypt()：

javascript 复制代码

const encrypt = new JSEncrypt();
encrypt.setPublicKey(publicKey);
const ciphertext = encrypt.encrypt(plaintext);

解密流程类似，使用私钥：

javascript 复制代码

const decrypt = new JSEncrypt();
decrypt.setPrivateKey(privateKey);
const plaintext = decrypt.decrypt(ciphertext);

所有操作均提供加载状态（旋转图标）和结果提示（Toast消息），避免用户误操作。

数据长度限制与提示

RSA算法本身对加密数据的长度有限制。采用PKCS#1 v1.5填充时，最大加密字节数 = (密钥位数 / 8) - 11。例如2048位密钥最多加密245字节。

工具在明文输入框下方实时显示当前文本的UTF-8字节数和上限，超出时数字变为红色警示，并在点击加密时弹出明确错误提示，有效防止加密失败。

javascript 复制代码

function getMaxEncryptBytes(keySize) {
  return Math.floor(keySize / 8) - 11;
}

使用TextEncoder准确计算字符串字节数，支持中文等多字节字符：

javascript 复制代码

const byteLength = new TextEncoder().encode(text).length;

折叠与隐私保护

公钥和私钥输入框默认隐藏，按钮文字为"👁️ 显示"。点击后展开对应的文本框和复制按钮，按钮文字变为"🙈 隐藏"。生成或填充新密钥时，相关区域会自动展开，兼顾了操作便捷性与界面简洁。

代码：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RSA 加密解密工具（含预设密钥对）</title>
    <script src="https://cdn.jsdelivr.net/npm/jsencrypt/bin/jsencrypt.min.js">
    </script>
    <style>
        :root {
            --bg: #f0f4f8;
            --card-bg: #ffffff;
            --primary: #4a6cf7;
            --primary-hover: #3651d5;
            --primary-light: #eef1fd;
            --success: #10b981;
            --success-light: #ecfdf5;
            --warning: #f59e0b;
            --warning-light: #fffbeb;
            --danger: #ef4444;
            --danger-light: #fef2f2;
            --text: #1e293b;
            --text-secondary: #64748b;
            --text-muted: #94a3b8;
            --border: #e2e8f0;
            --border-focus: #4a6cf7;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
            --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
            --radius: 12px;
            --radius-sm: 8px;
            --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', 'Monaco', 'Courier New', monospace;
            --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-sans);
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body::before {
            content: '';
            position: fixed;
            top: -40%;
            left: -20%;
            width: 80%;
            height: 80%;
            background: radial-gradient(ellipse at center, rgba(74, 108, 247, 0.04) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }
        body::after {
            content: '';
            position: fixed;
            bottom: -30%;
            right: -15%;
            width: 70%;
            height: 70%;
            background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px 20px 40px;
            position: relative;
            z-index: 1;
        }

        .header {
            text-align: center;
            margin-bottom: 32px;
        }
        .header .icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            background: var(--primary);
            border-radius: 16px;
            margin-bottom: 16px;
            box-shadow: 0 8px 20px rgba(74, 108, 247, 0.3);
        }
        .header .icon-wrapper svg {
            width: 28px;
            height: 28px;
            fill: none;
            stroke: #fff;
            stroke-width: 2;
        }
        .header h1 {
            font-size: 1.75rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            color: var(--text);
            margin-bottom: 6px;
        }
        .header .subtitle {
            font-size: 0.9rem;
            color: var(--text-secondary);
            font-weight: 400;
        }

        .main-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            align-items: start;
        }

        @media (max-width: 860px) {
            .main-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .header h1 {
                font-size: 1.4rem;
            }
            .header .icon-wrapper {
                width: 44px;
                height: 44px;
                border-radius: 12px;
            }
            .header .icon-wrapper svg {
                width: 22px;
                height: 22px;
            }
            .container {
                padding: 16px 12px 32px;
            }
        }

        .card {
            background: var(--card-bg);
            border-radius: var(--radius);
            padding: 24px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border);
            transition: var(--transition);
        }
        .card:hover {
            box-shadow: var(--shadow-lg);
        }
        .card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 1px solid var(--border);
        }
        .card-header .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .card-header .dot.key-dot {
            background: var(--warning);
        }
        .card-header .dot.encrypt-dot {
            background: var(--primary);
        }
        .card-header .dot.decrypt-dot {
            background: var(--success);
        }
        .card-header h2 {
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--text);
        }
        .card-header .badge {
            font-size: 0.7rem;
            font-weight: 500;
            padding: 3px 8px;
            border-radius: 20px;
            background: var(--primary-light);
            color: var(--primary);
            letter-spacing: 0.02em;
            white-space: nowrap;
        }

        label {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 6px;
            letter-spacing: 0.01em;
            text-transform: uppercase;
        }
        textarea {
            width: 100%;
            padding: 12px 14px;
            border: 2px solid var(--border);
            border-radius: var(--radius-sm);
            font-family: var(--font-mono);
            font-size: 0.8rem;
            line-height: 1.5;
            resize: vertical;
            transition: var(--transition);
            background: #fafbfc;
            color: var(--text);
            min-height: 90px;
        }
        textarea:focus {
            outline: none;
            border-color: var(--border-focus);
            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.08);
            background: #fff;
        }
        textarea.small {
            min-height: 65px;
            font-size: 0.75rem;
        }
        textarea.large {
            min-height: 130px;
        }
        textarea.key-area {
            min-height: 100px;
            font-size: 0.7rem;
            word-break: break-all;
            letter-spacing: 0;
        }
        textarea.key-area.private-key {
            min-height: 140px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 18px;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            letter-spacing: 0.01em;
            white-space: nowrap;
            font-family: var(--font-sans);
            position: relative;
            overflow: hidden;
        }
        .btn:active {
            transform: scale(0.97);
        }
        .btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            pointer-events: none;
        }
        .btn-primary {
            background: var(--primary);
            color: #fff;
        }
        .btn-primary:hover:not(:disabled) {
            background: var(--primary-hover);
            box-shadow: 0 4px 12px rgba(74, 108, 247, 0.35);
        }
        .btn-success {
            background: var(--success);
            color: #fff;
        }
        .btn-success:hover:not(:disabled) {
            background: #059669;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
        }
        .btn-outline {
            background: #fff;
            color: var(--primary);
            border: 2px solid var(--primary);
        }
        .btn-outline:hover:not(:disabled) {
            background: var(--primary-light);
        }
        .btn-sm {
            padding: 6px 12px;
            font-size: 0.75rem;
            border-radius: 6px;
        }
        .btn-xs {
            padding: 4px 10px;
            font-size: 0.7rem;
            border-radius: 5px;
            gap: 3px;
        }
        .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        /* 折叠按钮 */
        .toggle-key-btn {
            margin-left: 8px;
            font-size: 0.7rem;
            padding: 3px 10px;
            border: 1px solid var(--border);
            background: #f8fafc;
            color: var(--text-secondary);
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition);
            vertical-align: middle;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .toggle-key-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: var(--primary-light);
        }

        .key-content-wrapper {
            margin-top: 4px;
        }

        .select-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        select {
            padding: 8px 32px 8px 12px;
            border: 2px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 0.85rem;
            font-weight: 500;
            background: #fafbfc;
            cursor: pointer;
            transition: var(--transition);
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            font-family: var(--font-sans);
        }
        select:focus {
            outline: none;
            border-color: var(--border-focus);
            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.08);
            background: #fff;
        }

        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 8px;
            pointer-events: none;
        }
        .toast {
            padding: 12px 18px;
            border-radius: var(--radius-sm);
            font-size: 0.85rem;
            font-weight: 500;
            color: #fff;
            box-shadow: var(--shadow-lg);
            animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1), toastOut 0.3s 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            pointer-events: auto;
            max-width: 380px;
            letter-spacing: 0.01em;
        }
        .toast.success {
            background: #059669;
        }
        .toast.error {
            background: #dc2626;
        }
        .toast.info {
            background: #3b82f6;
        }
        @keyframes toastIn {
            from {
                opacity: 0;
                transform: translateX(60px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        @keyframes toastOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(60px);
            }
        }

        .spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.4);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
        }
        .spinner.dark {
            border-color: rgba(74, 108, 247, 0.2);
            border-top-color: var(--primary);
        }
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .hint {
            font-size: 0.73rem;
            color: var(--text-muted);
            margin-top: 6px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .hint.warn {
            color: var(--warning);
        }
        .hint svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        .char-count {
            text-align: right;
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .char-count.over {
            color: var(--danger);
            font-weight: 600;
        }

        .divider {
            border: none;
            border-top: 1px solid var(--border);
            margin: 16px 0;
        }

        /* 安全提示条 */
        .security-warning {
            background: #fffbeb;
            border: 1px solid #fcd34d;
            border-radius: var(--radius-sm);
            padding: 10px 14px;
            font-size: 0.78rem;
            color: #92400e;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 16px;
        }
        .security-warning svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            margin-top: 1px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="header">
            <div class="icon-wrapper">
                <svg viewBox="0 0 24 24">
                    <rect x="5" y="11" width="14" height="10" rx="2" />
                    <path d="M8 11V7a4 4 0 1 1 8 0v4" />
                    <circle cx="12" cy="15.5" r="1.2" fill="#fff" stroke="none" />
                </svg>
            </div>
            <h1>RSA 加密解密工具</h1>
            <p class="subtitle">基于 JSEncrypt （仅用于测试）</p>
        </div>

        <!-- 安全提示 -->
        <div class="security-warning">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
                <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
            </svg>
            <span><strong>仅供本地测试：</strong>私钥已明文嵌入页面，请勿在生产环境或公网使用。测试完成后请立即删除或修改。</span>
        </div>

        <div class="main-grid">
            <!-- 左侧：密钥管理 -->
            <div class="card" id="keyCard">
                <div class="card-header">
                    <span class="dot key-dot"></span>
                    <h2>密钥管理</h2>
                    <span class="badge">RSA Key Pair</span>
                </div>

                <div style="display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;">
                    <div class="select-wrap">
                        <label style="margin-bottom:0;font-size:0.78rem;text-transform:none;letter-spacing:0;">密钥位数：</label>
                        <select id="keySizeSelect">
                            <option value="1024">1024 位（快速）</option>
                            <option value="2048" selected>2048 位（推荐）</option>
                            <option value="4096">4096 位（高安全）</option>
                        </select>
                    </div>
                </div>

                <div class="btn-group" style="margin-bottom:14px;">
                    <button class="btn btn-primary" id="btnGenerateKey" onclick="generateKeyPair()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v12M6 12h12"/></svg>
                        生成新密钥对
                    </button>
                    
                </div>

                <!-- 公钥区域（可折叠） -->
                <div style="margin-bottom:12px;">
                    <label style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
                        <span>公钥 <span style="font-weight:400;color:var(--text-muted);">（用于加密）</span></span>
                        <button class="toggle-key-btn" id="togglePublicKeyBtn" onclick="toggleKeyVisibility('publicKeyWrap', 'togglePublicKeyBtn')">
                            👁️ 显示
                        </button>
                    </label>
                    <div id="publicKeyWrap" style="display:none;" class="key-content-wrapper">
                        <textarea id="publicKeyArea" class="key-area" rows="5" placeholder="点击「生成新密钥对」或「使用预设密钥对」来填充公钥..."></textarea>
                        <div style="display:flex;gap:6px;margin-top:6px;">
                            <button class="btn btn-outline btn-xs" onclick="copyToClipboard('publicKeyArea', '公钥')">📋 复制公钥</button>
                        </div>
                    </div>
                </div>

                <div class="divider"></div>

                <!-- 私钥区域（可折叠） -->
                <div>
                    <label style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">
                        <span>私钥 <span style="font-weight:400;color:var(--danger);">（请妥善保管！用于解密）</span></span>
                        <button class="toggle-key-btn" id="togglePrivateKeyBtn" onclick="toggleKeyVisibility('privateKeyWrap', 'togglePrivateKeyBtn')">
                            👁️ 显示
                        </button>
                    </label>
                    <div id="privateKeyWrap" style="display:none;" class="key-content-wrapper">
                        <textarea id="privateKeyArea" class="key-area private-key" rows="7" placeholder="点击「生成新密钥对」来生成私钥，或点击「使用预设密钥对」填充..."></textarea>
                        <div style="display:flex;gap:6px;margin-top:6px;">
                            <button class="btn btn-outline btn-xs" onclick="copyToClipboard('privateKeyArea', '私钥')">📋 复制私钥</button>
                        </div>
                    </div>
                </div>
                <p class="hint" style="margin-top:8px;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                    预设密钥对已包含公钥和私钥，可直接测试加密解密全流程。
                </p>
            </div>

            <!-- 右侧：加密解密操作 -->
            <div style="display:flex;flex-direction:column;gap:24px;">
                <div class="card" id="encryptCard">
                    <div class="card-header">
                        <span class="dot encrypt-dot"></span>
                        <h2>🔒 加密</h2>
                        <span class="badge">公钥加密</span>
                    </div>

                    <label for="plaintextArea">明文内容</label>
                    <textarea id="plaintextArea" class="large" rows="5" placeholder="请输入要加密的内容（注意：RSA加密有长度限制，2048位密钥最多约245字节）"></textarea>
                    <div class="char-count" id="plaintextCharCount">字节数：0 / 245</div>

                    <div style="margin-top:12px;">
                        <button class="btn btn-primary" id="btnEncrypt" onclick="doEncrypt()">
                            🔒 加密
                        </button>
                    </div>

                    <label for="ciphertextArea" style="margin-top:14px;">加密结果（密文 Base64）</label>
                    <textarea id="ciphertextArea" class="small" rows="4" placeholder="加密后的密文将显示在这里..." readonly></textarea>
                    <div style="display:flex;gap:6px;margin-top:6px;">
                        <button class="btn btn-outline btn-xs" onclick="copyToClipboard('ciphertextArea', '密文')">📋 复制密文</button>
                        <button class="btn btn-outline btn-xs" onclick="moveCipherToDecrypt()">⬇ 送到解密区</button>
                    </div>
                </div>

                <div class="card" id="decryptCard">
                    <div class="card-header">
                        <span class="dot decrypt-dot"></span>
                        <h2>🔓 解密</h2>
                        <span class="badge">私钥解密</span>
                    </div>

                    <label for="decryptCiphertextArea">密文内容（Base64）</label>
                    <textarea id="decryptCiphertextArea" class="small" rows="4" placeholder="请粘贴要解密的密文..."></textarea>

                    <div style="margin-top:12px;">
                        <button class="btn btn-success" id="btnDecrypt" onclick="doDecrypt()">
                            🔓 解密
                        </button>
                    </div>

                    <label for="decryptedPlaintextArea" style="margin-top:14px;">解密结果（明文）</label>
                    <textarea id="decryptedPlaintextArea" class="large" rows="5" placeholder="解密后的明文将显示在这里..." readonly></textarea>
                    <div style="display:flex;gap:6px;margin-top:6px;">
                        <button class="btn btn-outline btn-xs" onclick="copyToClipboard('decryptedPlaintextArea', '解密结果')">📋 复制明文</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="toast-container" id="toastContainer"></div>

    <script>
        (function() {
            // 预设公钥
            const PRESET_PUBLIC_KEY = "";

            // 预设私钥（PKCS#1 格式）
            const PRESET_PRIVATE_KEY = "";

            const publicKeyArea = document.getElementById('publicKeyArea');
            const privateKeyArea = document.getElementById('privateKeyArea');
            const plaintextArea = document.getElementById('plaintextArea');
            const ciphertextArea = document.getElementById('ciphertextArea');
            const decryptCiphertextArea = document.getElementById('decryptCiphertextArea');
            const decryptedPlaintextArea = document.getElementById('decryptedPlaintextArea');
            const keySizeSelect = document.getElementById('keySizeSelect');
            const plaintextCharCount = document.getElementById('plaintextCharCount');
            const btnGenerateKey = document.getElementById('btnGenerateKey');
            const btnEncrypt = document.getElementById('btnEncrypt');
            const btnDecrypt = document.getElementById('btnDecrypt');
            const toastContainer = document.getElementById('toastContainer');

            let currentKeySize = 2048;

            // 折叠/展开密钥区域
            window.toggleKeyVisibility = function(wrapId, btnId) {
                const wrap = document.getElementById(wrapId);
                const btn = document.getElementById(btnId);
                if (!wrap || !btn) return;
                const isHidden = wrap.style.display === 'none';
                if (isHidden) {
                    wrap.style.display = 'block';
                    btn.innerHTML = '🙈 隐藏';
                } else {
                    wrap.style.display = 'none';
                    btn.innerHTML = '👁️ 显示';
                }
            };

            // 强制显示密钥区域（填充密钥时调用）
            function showKeyArea(wrapId, btnId) {
                const wrap = document.getElementById(wrapId);
                const btn = document.getElementById(btnId);
                if (wrap && wrap.style.display === 'none') {
                    wrap.style.display = 'block';
                    if (btn) btn.innerHTML = '🙈 隐藏';
                }
            }

            function showToast(message, type = 'info') {
                const toast = document.createElement('div');
                toast.className = `toast ${type}`;
                toast.textContent = message;
                toastContainer.appendChild(toast);
                setTimeout(() => {
                    if (toast.parentNode) toast.remove();
                }, 3000);
            }

            window.copyToClipboard = function(textareaId, label) {
                const textarea = document.getElementById(textareaId);
                if (!textarea) return;
                const text = textarea.value.trim();
                if (!text) {
                    showToast(`⚠️ ${label} 内容为空，无法复制`, 'error');
                    return;
                }
                if (navigator.clipboard && navigator.clipboard.writeText && window.isSecureContext) {
                    navigator.clipboard.writeText(text).then(() => {
                        showToast(`✅ ${label}已复制到剪贴板`, 'success');
                    }).catch(() => fallbackCopy(textarea, label));
                } else {
                    fallbackCopy(textarea, label);
                }
            };

            function fallbackCopy(textarea, label) {
                try {
                    textarea.select();
                    textarea.setSelectionRange(0, 999999);
                    const success = document.execCommand('copy');
                    if (success) {
                        showToast(`✅ ${label}已复制到剪贴板`, 'success');
                    } else {
                        showToast(`❌ 复制失败，请手动复制`, 'error');
                    }
                    window.getSelection().removeAllRanges();
                } catch (e) {
                    showToast(`❌ 复制失败，请手动复制`, 'error');
                }
            }

            window.moveCipherToDecrypt = function() {
                const ciphertext = ciphertextArea.value.trim();
                if (!ciphertext) {
                    showToast('⚠️ 密文为空，请先加密数据', 'error');
                    return;
                }
                decryptCiphertextArea.value = ciphertext;
                decryptedPlaintextArea.value = '';
                showToast('📤 密文已送到解密区', 'info');
            };

            function getSelectedKeySize() {
                return parseInt(keySizeSelect.value, 10);
            }

            function getMaxEncryptBytes(keySize) {
                return Math.floor(keySize / 8) - 11;
            }

            function updateCharCount() {
                const text = plaintextArea.value;
                let byteLength = 0;
                try {
                    byteLength = new TextEncoder().encode(text).length;
                } catch (e) {
                    byteLength = unescape(encodeURIComponent(text)).length;
                }
                const maxBytes = getMaxEncryptBytes(currentKeySize);
                plaintextCharCount.textContent = `字节数：${byteLength} / ${maxBytes}`;
                if (byteLength > maxBytes) {
                    plaintextCharCount.classList.add('over');
                } else {
                    plaintextCharCount.classList.remove('over');
                }
            }

            plaintextArea.addEventListener('input', updateCharCount);
            keySizeSelect.addEventListener('change', function() {
                currentKeySize = getSelectedKeySize();
                updateCharCount();
            });

            window.generateKeyPair = function() {
                const keySize = getSelectedKeySize();
                currentKeySize = keySize;
                updateCharCount();

                const originalHTML = btnGenerateKey.innerHTML;
                btnGenerateKey.innerHTML = '<span class="spinner"></span> 正在生成密钥...';
                btnGenerateKey.disabled = true;

                setTimeout(() => {
                    try {
                        const crypt = new JSEncrypt({ default_key_size: keySize });
                        crypt.getKey();
                        const pubKey = crypt.getPublicKey();
                        const privKey = crypt.getPrivateKey();

                        if (!pubKey || !privKey) {
                            throw new Error('密钥生成失败，请重试');
                        }

                        publicKeyArea.value = pubKey;
                        privateKeyArea.value = privKey;
                        // 自动展开密钥区域
                        showKeyArea('publicKeyWrap', 'togglePublicKeyBtn');
                        showKeyArea('privateKeyWrap', 'togglePrivateKeyBtn');
                        showToast(`✅ ${keySize}位 RSA 密钥对生成成功！`, 'success');
                    } catch (e) {
                        console.error('密钥生成错误:', e);
                        showToast('❌ 密钥生成失败：' + (e.message || '未知错误'), 'error');
                    } finally {
                        btnGenerateKey.innerHTML = originalHTML;
                        btnGenerateKey.disabled = false;
                    }
                }, 80);
            };

            

            window.doEncrypt = function() {
                const plaintext = plaintextArea.value;
                if (!plaintext) {
                    showToast('⚠️ 请输入要加密的明文内容', 'error');
                    plaintextArea.focus();
                    return;
                }

                const publicKey = publicKeyArea.value.trim();
                if (!publicKey) {
                    showToast('⚠️ 请先生成密钥对或使用预设密钥对', 'error');
                    return;
                }

                if (!publicKey.includes('-----BEGIN PUBLIC KEY-----') &&
                    !publicKey.includes('-----BEGIN RSA PUBLIC KEY-----')) {
                    showToast('⚠️ 公钥格式不正确，请检查', 'error');
                    return;
                }

                const estimatedSize = estimateKeySizeFromPublicKey(publicKey);
                const maxBytes = getMaxEncryptBytes(estimatedSize || currentKeySize);

                let byteLength = 0;
                try {
                    byteLength = new TextEncoder().encode(plaintext).length;
                } catch (e) {
                    byteLength = unescape(encodeURIComponent(plaintext)).length;
                }

                if (byteLength > maxBytes) {
                    showToast(
                        `⚠️ 数据过长（${byteLength}字节），超出限制（${maxBytes}字节）。请缩短内容或使用更大密钥。`,
                        'error');
                    return;
                }

                const originalHTML = btnEncrypt.innerHTML;
                btnEncrypt.innerHTML = '<span class="spinner"></span> 加密中...';
                btnEncrypt.disabled = true;

                setTimeout(() => {
                    try {
                        const encrypt = new JSEncrypt();
                        encrypt.setPublicKey(publicKey);
                        const encrypted = encrypt.encrypt(plaintext);

                        if (encrypted === false || encrypted === null || encrypted === undefined) {
                            throw new Error('加密失败，可能是数据过长或公钥无效');
                        }

                        ciphertextArea.value = encrypted;
                        showToast('✅ 加密成功！密文已生成', 'success');
                    } catch (e) {
                        console.error('加密错误:', e);
                        showToast('❌ 加密失败：' + (e.message || '未知错误'), 'error');
                        ciphertextArea.value = '';
                    } finally {
                        btnEncrypt.innerHTML = originalHTML;
                        btnEncrypt.disabled = false;
                    }
                }, 50);
            };

            window.doDecrypt = function() {
                const ciphertext = decryptCiphertextArea.value.trim();
                if (!ciphertext) {
                    showToast('⚠️ 请输入要解密的密文', 'error');
                    decryptCiphertextArea.focus();
                    return;
                }

                const privateKey = privateKeyArea.value.trim();
                if (!privateKey) {
                    showToast('⚠️ 请先生成密钥对或使用预设密钥对', 'error');
                    return;
                }

                if (!privateKey.includes('-----BEGIN') || !privateKey.includes('PRIVATE KEY-----')) {
                    showToast('⚠️ 私钥格式不正确，请检查', 'error');
                    return;
                }

                const originalHTML = btnDecrypt.innerHTML;
                btnDecrypt.innerHTML = '<span class="spinner"></span> 解密中...';
                btnDecrypt.disabled = true;

                setTimeout(() => {
                    try {
                        const decrypt = new JSEncrypt();
                        decrypt.setPrivateKey(privateKey);
                        const decrypted = decrypt.decrypt(ciphertext);

                        if (decrypted === false || decrypted === null || decrypted === undefined) {
                            throw new Error(
                                '解密失败，请检查：\n1. 密文是否完整\n2. 私钥是否与加密所用的公钥匹配\n3. 密文格式是否正确');
                        }

                        decryptedPlaintextArea.value = decrypted;
                        showToast('✅ 解密成功！明文已还原', 'success');
                    } catch (e) {
                        console.error('解密错误:', e);
                        showToast('❌ 解密失败：' + (e.message || '未知错误'), 'error');
                        decryptedPlaintextArea.value = '';
                    } finally {
                        btnDecrypt.innerHTML = originalHTML;
                        btnDecrypt.disabled = false;
                    }
                }, 50);
            };

            function estimateKeySizeFromPublicKey(pemKey) {
                try {
                    const lines = pemKey.split('\n');
                    let b64 = '';
                    for (const line of lines) {
                        const trimmed = line.trim();
                        if (trimmed && !trimmed.startsWith('-----')) {
                            b64 += trimmed;
                        }
                    }
                    const binaryStr = atob(b64);
                    const bytes = binaryStr.length;
                    if (bytes >= 400) return 4096;
                    if (bytes >= 250) return 2048;
                    if (bytes >= 150) return 1024;
                    return 2048;
                } catch (e) {
                    return 2048;
                }
            }

            // 初始化：自动填充预设密钥对（但保持折叠状态）
            function init() {
                publicKeyArea.value = PRESET_PUBLIC_KEY;
                privateKeyArea.value = PRESET_PRIVATE_KEY;
                currentKeySize = 2048;
                keySizeSelect.value = '2048';
                updateCharCount();
                // 注意：不自动展开，保持默认折叠
                console.log('🔐 RSA 加密解密工具已就绪（密钥默认折叠）');
            }

            init();

            document.addEventListener('keydown', function(e) {
                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                    const activeEl = document.activeElement;
                    if (activeEl === plaintextArea || activeEl === ciphertextArea ||
                        activeEl === document.body) {
                        e.preventDefault();
                        doEncrypt();
                    }
                }
            });
        })();
    </script>
</body>
</html>

使用指南

生成密钥对：在左侧面板选择密钥位数（推荐2048位），点击"生成新密钥对"。此时公钥和私钥区域会自动展开并填充。
加密数据：在右侧加密区输入明文，注意字节数限制。点击"加密"按钮，密文将显示在下方的只读文本框中。
解密数据：将密文粘贴到解密区的文本框（或使用"送到解密区"按钮自动填入），点击"解密"即可看到明文。
复制与传输：每个输出框旁都有复制按钮，方便将密钥或密文分享给其他系统。

注意事项

数据长度限制：RSA不能加密超过上限的数据。如需加密长文本，应改用混合加密：先生成随机AES密钥加密数据，再用RSA加密AES密钥。
私钥安全 ：工具完全运行在客户端，私钥仅保存在页面变量中，刷新即丢失。请勿在生产环境直接暴露私钥，本工具仅供本地测试和学习使用。
密钥位数选择：位数越高安全性越强，但生成和运算时间也会显著增加。一般情况下2048位足以满足多数测试场景。
浏览器兼容性 ：JSEncrypt依赖window.crypto或SecureRandom等API，现代浏览器均良好支持。

结语

这个纯前端的RSA加密解密工具轻量、直观，将复杂的非对称加密过程简化为几次点击。它不仅展示了JSEncrypt库的强大能力，也体现了良好UI设计在安全工具中的重要性------即时反馈、错误提示和隐私折叠，让用户能专注于数据加解密本身。希望本文能帮助你快速理解RSA前端实践，并在自己的项目中灵活运用。

注：文中所有代码均可在本地保存为HTML文件直接运行，无需任何服务器或构建工具。