如何在表单提交前正确加密密码并确保服务端接收到密文？`formdata` 对象仅是表单数据的**一次性快照**，修改它不会影响原始表单字段；要让服务端收到加密后的密码，必须直接修改 `` 元素的 `value` 属性。
在前端对密码进行加密（如使用 JSEncrypt）时，一个常见误区是：通过 new FormData(form) 创建对象后调用 .set() 修改密码值，误以为这会改变实际提交的内容。这是不正确的——FormData 仅在初始化时从表单中读取当前字段值，后续对其的任何修改（如 set()、append()、delete()）都只作用于该内存中的副本，完全不影响原 。因此浏览器仍按原始表单 DOM 状态序列化并提交数据，服务端自然收到明文密码。
✅ 正确做法是：在提交前直接修改密码输入框的 value：
<form method="post" onsubmit="usernamePasswordLogin(event)"> <input type="text" name="username" required> <input type="password" name="password" id="password-field" required> <button type="submit">登录</button> </form>
function usernamePasswordLogin(event) {
event.preventDefault(); // 阻止默认提交，以便先加密
const passwordInput = document.getElementById('password-field');
const plainPassword = passwordInput.value;
// 使用 JSEncrypt 加密（需提前加载库并设置 publicKey）
const encrypt = new JSEncrypt();
encrypt.setKey(publicKey);
const encrypted = encrypt.encrypt(plainPassword);
if (!encrypted) {
alert('加密失败，请检查公钥或密码长度');
return;
}
passwordInput.value = encrypted; // ✅ 关键：直接修改 input 的 value
event.target.submit(); // 手动触发提交，此时 formData 将包含密文
}⚠️ 重要安全提醒：
- 客户端加密 ≠ 安全替代 HTTPS：JSEncrypt 等前端加密无法防止中间人篡改、调试器拦截或重放攻击。若未启用 HTTPS，攻击者可轻易绕过加密逻辑，甚至替换公钥。
- 推荐实践：始终使用 HTTPS 传输明文密码，并在服务端使用强哈希算法（如 Argon2、bcrypt 或 PBKDF2）进行不可逆哈希存储。前端加密仅适用于极特殊场景（如端到端加密系统），且需配合签名、防重放等完整协议。
- 补充验证：可在提交前打印 document.querySelector('[name="password"]').value 确认其值已更新为密文，避免因 DOM 查询错误导致静默失败。
总结：FormData 是只读快照，不是响应式代理；修改表单提交内容的唯一可靠方式，是操作 DOM 元素本身。
