前端敏感信息“自动加密”是为防止明文裸露于DOM/控制台及降低XSS或中间人风险，而非替代HTTPS；须手动集成加密库，在Layui表单提交前统一加密，禁用实时监听，推荐公钥动态下发+非对称加密+隐藏域传密文。
前端对敏感信息（如密码）做“自动加密”不是为了替代 https，而是防止明文在 dom 或控制台中裸露、降低中间人或 xss 场景下的风险。layui 本身不提供加密能力，必须手动集成加密库并在表单提交前处理字段值。
为什么不能只靠 autocomplete="off" 或禁用浏览器保存？
这只能阻止浏览器自动填充历史记录，但用户输入的明文依然会完整存在于 input.value、form.serialize() 和网络请求载荷中。若未加密就提交，任何抓包工具（如 Fiddler、浏览器 Network 面板）都能看到原始密码。
-
autocomplete="off"对现代浏览器效果有限，部分仍会提示；更关键的是它和加密无关 - 仅移除
name或加lay-ignore会导致form.val()读不到值，破坏 Layui 表单管理逻辑 - 直接在
input上绑定oninput动态加密并覆盖value，会导致光标跳动、无法选中/粘贴、与form.verify冲突
正确做法：提交前统一加密，且保留原始输入体验
加密动作应发生在用户点击提交按钮、且表单校验通过之后，而不是实时监听输入。这样既不影响交互，又能确保最终发出的数据是密文。
- 用
form.on('submit(filter)', callback)拦截提交，不要用原生submit事件 - 在回调中先调用
form.validate()确保校验通过，再读取原始值（如$('#password').val()） - 用
CryptoJS.AES.encrypt()或JSEncrypt加密后，把密文赋给隐藏域或替换原字段值（推荐隐藏域，避免污染 UI 字段） - 务必调用
e.preventDefault()，否则原生表单会以明文提交
示例片段：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
form.on('submit(login-submit)', function(data){
var pwd = $('#password').val();
if (!pwd) return false;
// 使用 JSEncrypt（需提前引入）
var encrypt = new JSEncrypt();
encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----...-----END PUBLIC KEY-----');
var encryptedPwd = encrypt.encrypt(pwd);
// 写入隐藏域，提交时由后端读取
$('#encrypted_password').val(encryptedPwd);
// 移除明文字段，或清空（取决于后端是否需要）
$('#password').val('');
return true; // 允许 Layui 提交
});
容易踩的坑：密钥管理、算法选择与后端协同
前端加密不是“加个函数就完事”，它的安全性高度依赖后端配合和密钥生命周期控制。
立即学习“前端免费学习笔记（深入）”；
- 公钥不能硬编码在 JS 里——应由后端接口动态下发（如
/api/public-key），避免被爬取复用 - 不要用 MD5/SHA1 做“加密”——它们是哈希，不可逆，且易碰撞；登录场景应使用非对称加密（RSA/JSEncrypt）或 AES + 后端协商密钥
- 如果用了 AES，密钥必须由后端生成并安全传给前端（如 TLS 通道内），绝不能写死在代码中
- 后端收到密文后，必须能解密并还原为原始密码（用于比对数据库中的加盐哈希），否则整个流程断裂
- 记住：前端加密只是纵深防御的一环，HTTPS 缺失时，一切前端加密都形同虚设
真正难的不是写那几行加密调用，而是密钥怎么来、什么时候更新、失效后如何平滑过渡——这些决策点往往在第一次上线时就被忽略，直到某次渗透测试才暴露出来。
