客户端密码加密异常求助：忘记密码场景部分用户未加密问题

核心可能原因 #

1. 表单提交事件绑定逻辑错误 #

忘记密码场景的表单可能未正确绑定submit事件，或未优先阻止默认提交行为：

• 如果绑定的是按钮click事件而非表单submit事件，用户通过回车提交表单时，加密代码不会触发，直接明文提交。
• 若e.preventDefault()放在加密代码之后，表单可能在加密完成前就已提交，导致明文传输。
• 调试时手动点击按钮，click事件触发正常，加密代码得以执行，因此表现正常。

2. 浏览器自动填充的时机干扰 #

部分浏览器的密码自动填充功能会在页面加载完成后延迟填充（尤其是「新密码」字段）：

• 加密代码在表单提交时立即获取输入框值，但此时自动填充尚未完成，加密的是空值，而表单最终提交的是浏览器自动填充的明文。
• 调试时因断点暂停，自动填充有足够时间完成，加密代码能获取到正确值。

3. CryptoJS加载时机滞后 #

若忘记密码页面的CryptoJS库加载位置靠后（如页面底部），或依赖异步加载，可能出现表单提交时CryptoJS尚未加载完成的情况：

• 加密代码因CryptoJS未定义而报错中断，表单直接明文提交。
• 调试时页面已完全加载，CryptoJS可用，加密功能恢复正常。

4. 浏览器插件/安全设置拦截 #

少数用户安装的广告拦截、隐私类插件，或浏览器严格的内容安全策略（CSP），可能阻止了CryptoJS的加载或执行：

• 登录页面的CryptoJS加载路径未被拦截，但忘记密码页面的路径被误判为可疑资源。

排查与修复步骤 #

1. 修正表单提交事件绑定 #

确保使用表单submit事件而非按钮click事件，且优先阻止默认提交：

const forgotForm = document.getElementById('forgot-password-form');
forgotForm.addEventListener('submit', function(e) {
    // 第一步就阻止默认提交
    e.preventDefault();

    // 检查CryptoJS是否加载完成
    if (typeof CryptoJS === 'undefined') {
        alert('加密组件加载失败，请刷新页面重试');
        return;
    }

    // 验证两次密码一致性
    const pwd1 = document.getElementById('new-pwd').value.trim();
    const pwd2 = document.getElementById('confirm-pwd').value.trim();
    if (pwd1 !== pwd2) {
        alert('两次密码输入不一致');
        return;
    }

    // 执行加密
    const encryptedUserId = CryptoJS.AES.encrypt(document.getElementById('user-id').value, '你的密钥').toString();
    const encryptedPwd = CryptoJS.AES.encrypt(pwd1, '你的密钥').toString();

    // 替换表单值并提交
    document.getElementById('user-id').value = encryptedUserId;
    document.getElementById('new-pwd').value = encryptedPwd;
    // 可移除确认密码字段的提交，避免冗余
    this.submit();
});

2. 规避浏览器自动填充干扰 #

• 给新密码输入框添加autocomplete="new-password"属性，阻止浏览器自动填充：

<input type="password" id="new-pwd" autocomplete="new-password">
<input type="password" id="confirm-pwd" autocomplete="new-password">

• 或监听输入框的input事件，实时缓存输入值，提交时用缓存值加密，而非直接读取输入框。

3. 确保CryptoJS优先加载 #

• 将CryptoJS的<script>标签放在页面<head>中，或使用DOMContentLoaded事件确保DOM加载完成后再绑定加密逻辑：

document.addEventListener('DOMContentLoaded', function() {
    // 这里绑定表单提交事件
});

4. 排查浏览器插件与安全设置 #

• 让用户暂时禁用所有浏览器插件后测试，确认是否是插件拦截导致。
• 检查页面的CSP设置，确保允许加载CryptoJS脚本，未限制inline script（若加密代码是inline的）。

关于浏览器设置的检查 #

主要需检查：

• 是否开启了隐私模式（部分隐私模式会限制脚本加载）；
• 是否启用了严格的内容安全策略；
• 是否安装了广告拦截、隐私保护类插件。

内容的提问来源于stack exchange，提问作者Umesh Deshmukh