fix(auth): 密码框反自动填充兜底 —— 进入「设置密码」步骤必须为空
测试人员反馈：激活流程进入「设置密码」步骤时，密码框内已出现 123456（用户未做任何输入）。
取证结论 —— 前端源码不存在任何向密码框写值的赋值点：
- step3Form.password 初值为空，密码框只有 v-model、无 :value 绑定
- 全站唯一 .password = 赋值点是 Login.vue 的清空逻辑
- git log -S "123456" -- Activate.vue 显示该字面量历史上仅出现一次，
且是 d16c261 新增的 placeholder 文案，从无任何版本把它当默认值
=> 残留只能来自浏览器密码管理器自动填充（测试账号默认口令恰为 123456，
浏览器保存后会在同源同类表单上回填）
治法（行为级保证，不依赖成因判定）：
- 新增 utils/passwordField.js：purgeAutofilledPasswords()
仅在表单模型为空时才清 DOM 密码框并同步 v-model，绝不覆盖用户真实输入
- Activate.vue / ForgotPassword.vue 对称改造：
1) placeholder 去掉 123456，弱口令示例移到独立 .pwd-tip 提示行
2) 新增 enterStep3()：清空密码字段 -> 进第三步 -> DOM 挂载后再兜底清一次
3) 第三步 el-form 增加 autocomplete="off"
验证：
- TDZ 静态门禁 verify_frontend_tdz.mjs PASS
- deploy/build-frontend.sh EXIT=0（入口 assets/index-DwFQsYjy.js）
- 部署后线上核验：入口 hash 与本地一致、关键 chunk 全 200、
旧 chunk 全部保留（新旧共存，无缓存期 404）、gzip_static 命中预压缩产物、
线上 Activate chunk md5 与本地构建逐字节一致
This commit is contained in:
36
src/utils/passwordField.js
Normal file
36
src/utils/passwordField.js
Normal file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* passwordField.js — 密码输入框「反浏览器自动填充」兜底
|
||||
*
|
||||
* 背景（2026-10-08 测试人员反馈）：
|
||||
* 激活页 / 忘记密码页进入「设置密码」步骤时，输入框内已存在内容（形如 123456），
|
||||
* 而用户尚未进行任何输入。经全仓取证：前端不存在任何向密码框写值的赋值点
|
||||
* （密码框初值为空、autocomplete="new-password"、无 :value 绑定、无历史版本预填），
|
||||
* 故残留只能来自浏览器密码管理器 —— 测试账号的默认口令恰为 123456，
|
||||
* 浏览器保存后会在同源同类表单上自动回填。
|
||||
*
|
||||
* 治法：在「进入设置密码步骤」时做一次确定性兜底清理。
|
||||
*
|
||||
* ⚠️ 安全前提：仅当表单模型本身为空时才清 DOM（isModelEmpty 为真），
|
||||
* 因此绝不会覆盖用户已经真实输入的内容。
|
||||
*/
|
||||
|
||||
/**
|
||||
* 清除浏览器在密码框上留下的自动填充值。
|
||||
*
|
||||
* @param {string} scopeSelector 限定范围（默认 body 即整页）
|
||||
* @param {boolean} isModelEmpty 表单模型是否为空；为 false 时整体跳过，不动 DOM
|
||||
* @returns {number} 实际清除的输入框数量（便于验证/日志）
|
||||
*/
|
||||
export function purgeAutofilledPasswords(scopeSelector = 'body', isModelEmpty = true) {
|
||||
if (!isModelEmpty || typeof document === 'undefined') return 0
|
||||
let cleared = 0
|
||||
document.querySelectorAll(`${scopeSelector} input[type="password"]`).forEach((el) => {
|
||||
if (el.value) {
|
||||
el.value = ''
|
||||
// 同步通知 v-model：此时模型本为空，回调只是把状态与 DOM 拉回一致
|
||||
el.dispatchEvent(new Event('input', { bubbles: true }))
|
||||
cleared++
|
||||
}
|
||||
})
|
||||
return cleared
|
||||
}
|
||||
@@ -135,6 +135,7 @@
|
||||
:model="step3Form"
|
||||
:rules="step3Rules"
|
||||
label-position="top"
|
||||
autocomplete="off"
|
||||
>
|
||||
<!-- 基本信息确认 -->
|
||||
<div class="info-confirm">
|
||||
@@ -150,10 +151,13 @@
|
||||
v-model="step3Form.password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
placeholder="请设置登录密码（6-20 位，勿用 123456 等弱口令）"
|
||||
placeholder="请设置登录密码（6-20 位）"
|
||||
size="large"
|
||||
show-password
|
||||
/>
|
||||
<!-- 弱口令示例放在独立提示行，而不是 placeholder：
|
||||
写在 placeholder 里会被用户误读成「默认密码就是 123456」（2026-10-08 测试人员反馈） -->
|
||||
<div class="pwd-tip">不得使用 123456 等常见弱口令</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
@@ -211,7 +215,8 @@
|
||||
* 步骤2：发送短信验证码 -> 输入 6 位验证码 -> 验证
|
||||
* 步骤3：确认基本信息 -> 设置密码 + 确认密码 -> 完成激活
|
||||
*/
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, reactive, computed, nextTick, onMounted, onUnmounted } from 'vue'
|
||||
import { purgeAutofilledPasswords } from '@/utils/passwordField'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ArrowLeft, HomeFilled, Refresh } from '@element-plus/icons-vue'
|
||||
@@ -398,7 +403,7 @@ async function handleStep2() {
|
||||
// 验证短信码（此处通过获取用户信息间接验证）
|
||||
step2Loading.value = true
|
||||
// 短信码的验证由后端在激活时完成，此处仅进入下一步
|
||||
currentStep.value = 2
|
||||
enterStep3()
|
||||
ElMessage.success('短信验证通过')
|
||||
} catch (err) {
|
||||
if (err?.message) ElMessage.error(err.message)
|
||||
@@ -407,6 +412,22 @@ async function handleStep2() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 进入「设置密码」步骤。
|
||||
*
|
||||
* 到达该步骤时输入框必须为空（2026-10-08 测试人员反馈：进入本步骤时密码框内已出现 123456）。
|
||||
* 前端源码不存在任何回填密码的赋值点（初值为空 + autocomplete=new-password + 无历史预填版本），
|
||||
* 残留只可能来自浏览器密码管理器自动填充（测试账号默认口令恰为 123456，会被浏览器保存并回填），
|
||||
* 故此处做确定性兜底，保证「到达即空」；实现与前提见 utils/passwordField.js。
|
||||
*/
|
||||
function enterStep3() {
|
||||
step3Form.password = ''
|
||||
step3Form.confirmPassword = ''
|
||||
currentStep.value = 2
|
||||
// DOM 挂载后再兜底一次：仅当表单模型为空、DOM 却有值时清除，绝不覆盖用户真实输入
|
||||
nextTick(() => purgeAutofilledPasswords('.step-card', !step3Form.password && !step3Form.confirmPassword))
|
||||
}
|
||||
|
||||
/** 步骤3：完成激活 */
|
||||
async function handleActivate() {
|
||||
if (!step3FormRef.value) return
|
||||
@@ -650,6 +671,13 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
/* ==================== 按钮 ==================== */
|
||||
.pwd-tip {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.step-btn {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
|
||||
@@ -134,16 +134,20 @@
|
||||
:model="step3Form"
|
||||
:rules="step3Rules"
|
||||
label-position="top"
|
||||
autocomplete="off"
|
||||
>
|
||||
<el-form-item label="新密码" prop="password">
|
||||
<el-input
|
||||
v-model="step3Form.password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
placeholder="请设置新密码（6-20 位，勿用 123456 等弱口令）"
|
||||
placeholder="请设置新密码（6-20 位）"
|
||||
size="large"
|
||||
show-password
|
||||
/>
|
||||
<!-- 弱口令示例放在独立提示行，而不是 placeholder：
|
||||
写在 placeholder 里会被用户误读成「默认密码就是 123456」（2026-10-08 测试人员反馈） -->
|
||||
<div class="pwd-tip">不得使用 123456 等常见弱口令</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="确认新密码" prop="confirmPassword">
|
||||
@@ -201,7 +205,8 @@
|
||||
* 步骤2：短信验证码验证
|
||||
* 步骤3：设置新密码
|
||||
*/
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, reactive, computed, nextTick, onMounted, onUnmounted } from 'vue'
|
||||
import { purgeAutofilledPasswords } from '@/utils/passwordField'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ArrowLeft, HomeFilled, Refresh } from '@element-plus/icons-vue'
|
||||
@@ -364,7 +369,7 @@ async function handleStep2() {
|
||||
await step2FormRef.value.validate()
|
||||
step2Loading.value = true
|
||||
// 短信码由后端在重置密码时验证
|
||||
currentStep.value = 2
|
||||
enterStep3()
|
||||
} catch (err) {
|
||||
if (err?.message) ElMessage.error(err.message)
|
||||
} finally {
|
||||
@@ -372,6 +377,22 @@ async function handleStep2() {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 进入「重置密码」步骤。
|
||||
*
|
||||
* 到达该步骤时输入框必须为空（2026-10-08 测试人员反馈：进入本步骤时密码框内已出现 123456）。
|
||||
* 前端源码不存在任何回填密码的赋值点（初值为空 + autocomplete=new-password），
|
||||
* 残留只可能来自浏览器密码管理器自动填充，故此处做确定性兜底，保证「到达即空」；
|
||||
* 实现与前提见 utils/passwordField.js。
|
||||
*/
|
||||
function enterStep3() {
|
||||
step3Form.password = ''
|
||||
step3Form.confirmPassword = ''
|
||||
currentStep.value = 2
|
||||
// DOM 挂载后再兜底一次：仅当表单模型为空、DOM 却有值时清除，绝不覆盖用户真实输入
|
||||
nextTick(() => purgeAutofilledPasswords('.step-card', !step3Form.password && !step3Form.confirmPassword))
|
||||
}
|
||||
|
||||
/** 步骤3：重置密码 */
|
||||
async function handleReset() {
|
||||
if (!step3FormRef.value) return
|
||||
@@ -588,6 +609,13 @@ onUnmounted(() => {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pwd-tip {
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.step-btn {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
|
||||
Reference in New Issue
Block a user