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 里了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
