HTML怎么做文本加密工具_HTML文本加密解密在线工具（附代码）

HTML无法真正加密文本，所有“HTML加密工具”实为前端JS实现的简单编码或混淆，密钥硬编码在页面中，开发者工具可直接查看，完全不安全。

HTML 本身不能真正加密文本——它没有密码学能力，所有“HTML 文本加密工具”本质都是前端 JavaScript 实现的简单编码或混淆（比如 Base64、ROT13、AES-CBC 模拟），且密钥硬编码在页面里，**任何人打开开发者工具就能看到算法和密钥，一点不安全**。别拿它保护敏感数据。

为什么 localStorage + atob/btoa 不是加密

很多所谓“HTML 加密工具”只用 btoa 和 atob 做 Base64 编码/解码：

const encoded = btoa("hello"); // "aGVsbG8="const decoded = atob("aGVsbG8="); // "hello"

这根本不是加密：无密钥、无混淆、可逆性极强，浏览器控制台一行就破开。Base64 是编码格式，不是加密算法。用它标榜“加密”，属于概念混淆。

• Base64 对中文会出错（需先 encodeURIComponent + unescape 或用 TextEncoder）
• btoa 不支持 Unicode 字符，直接传入会报 DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
• 哪怕加一层 ROT13，也属于“纸糊锁”，5 秒内能手写还原

想在前端做轻量 AES，必须用 CryptoJS 或 Web Crypto API

真要模拟加密体验（仅限演示或非敏感场景），推荐用浏览器原生的 crypto.subtle，它支持 AES-GCM，密钥可由用户输入派生：

立即学习“前端免费学习笔记（深入）”；

async function encrypt(text, password) {  const enc = new TextEncoder();  const keyMaterial = await crypto.subtle.importKey(    "raw", enc.encode(password), { name: "PBKDF2" }, false, ["deriveKey"]  );  const key = await crypto.subtle.deriveKey(    { name: "PBKDF2", salt: new Uint8Array(16), iterations: 100000, hash: "SHA-256" },    keyMaterial, { name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"]  );  const iv = crypto.getRandomValues(new Uint8Array(12));  const ciphertext = await crypto.subtle.encrypt(    { name: "AES-GCM", iv }, key, enc.encode(text)  );  return { ciphertext: Array.from(new Uint8Array(ciphertext)), iv: Array.from(iv) };}

注意：crypto.subtle 要求页面运行在 https:// 或 localhost 下，HTTP 站点会直接报 SecurityError；且用户输入的密码未加盐存储，仍可能被彩虹表攻击——这只是“看起来像加密”，不是后端级安全方案。

在线工具代码里最常踩的坑：密钥写死 + 没处理异常

翻开源码会发现大量“加密工具”把密钥写成字符串常量，比如：

const KEY = "my-super-secret-key-2024"; // ❌ 危险！暴露在源码中

还有更糟的：没捕获 decrypt 失败，导致用户粘贴错误密文时页面白屏或静默失败。正确做法是包裹 try/catch 并提示具体错误类型：

• InvalidAccessError：密钥不可导出或算法不匹配
• OperationError：密文损坏、IV 长度不对（AES-GCM 要求 IV 长度为 12 字节）
• TypeError：传入了 null 或非 ArrayBuffer 类型

另外，prompt() 输入的密码别直接当密钥用——必须经 PBKDF2 衍生，否则弱口令一试就破。

真正的加密必须服务端参与，前端只负责交互。所谓“HTML 加密工具”，只是教人理解编码与加密的区别——那个“加密”按钮点下去的瞬间，密钥和逻辑已经躺在你的 view-source 里了。