1. 项目背景：网页密码框的星号保护机制
网页登录表单中的密码输入框默认会显示星号(*)或圆点(•)，这是浏览器的标准安全特性。其底层实现是通过HTML的<input type="password">元素实现的，这种设计可以有效防止旁观者直接看到密码明文。但实际开发调试或日常使用中，我们有时确实需要查看这些被隐藏的密码内容。
2. 技术原理：DOM操作破解星号显示
2.1 密码字段的DOM属性
在浏览器开发者工具中查看密码输入框元素，会发现它本质上仍是普通的input元素，只是type属性被设为password。通过JavaScript可以动态修改这个属性：
document.querySelector('input[type="password"]').type = 'text'2.2 书签脚本的实现机制
浏览器书签脚本(Bookmarklet)是一种特殊的JavaScript代码，以javascript:协议开头存储在书签中。点击时会在当前页面上下文执行，具有与页面脚本相同的DOM访问权限。
3. 完整实现方案
3.1 基础版书签脚本
将以下代码保存为书签：
javascript:(function(){ var pwds = document.querySelectorAll('input[type="password"]'); pwds.forEach(function(pwd){ pwd.type = 'text'; }); })()3.2 增强版实现
增加切换显示/隐藏功能：
javascript:(function(){ var pwds = document.querySelectorAll('input[type="password"]'); pwds.forEach(function(pwd){ pwd.type = pwd.type === 'password' ? 'text' : 'password'; }); })()3.3 带样式提示的版本
添加可视化反馈：
javascript:(function(){ var pwds = document.querySelectorAll('input[type="password"]'); pwds.forEach(function(pwd){ var isHidden = pwd.type === 'password'; pwd.type = isHidden ? 'text' : 'password'; if(isHidden){ pwd.style.backgroundColor = '#ffeb3b'; setTimeout(() => pwd.style.backgroundColor = '', 2000); } }); })()4. 实际应用场景
4.1 开发调试场景
- 验证自动填充的密码是否正确
- 调试密码验证逻辑时查看实际输入值
- 测试密码强度校验规则
4.2 日常使用场景
- 找回自己忘记的已保存密码
- 确认密码输入是否正确（特别是复杂密码）
- 检查浏览器自动填充的密码是否准确
5. 安全注意事项
重要提示：此技术仅限合法用途，切勿用于窥探他人密码
- 仅在可信设备上使用
- 使用后及时切换回密码模式
- 注意周围环境，避免密码泄露
- 公共电脑上不建议使用此方法
6. 浏览器兼容性处理
6.1 多浏览器适配
不同浏览器对书签脚本的支持略有差异，以下是兼容写法：
javascript:(function(){ var s=document.createElement('script'); s.src='data:text/javascript,' +encodeURIComponent('document.querySelectorAll("input[type=\\'password\\']").forEach(' +'function(e){e.type=e.type==="password"?"text":"password"});'); document.body.appendChild(s); })()6.2 移动端适配方案
针对移动浏览器可添加触摸反馈：
javascript:(function(){ var pwds = document.querySelectorAll('input[type="password"]'); if(pwds.length === 0) return alert('未找到密码输入框'); pwds.forEach(function(pwd){ pwd.type = pwd.type === 'password' ? 'text' : 'password'; pwd.style.boxShadow = '0 0 10px rgba(255,235,59,0.8)'; setTimeout(() => pwd.style.boxShadow = '', 1000); }); })()7. 高级技巧与变体
7.1 密码批量导出
开发专用调试版本（慎用）：
javascript:(function(){ var pwds = document.querySelectorAll('input[type="password"]'); var results = []; pwds.forEach(function(pwd, i){ var id = pwd.id || pwd.name || 'password-'+i; results.push(id + ': ' + pwd.value); pwd.type = 'text'; }); console.table(results); })()7.2 表单密码字段检测
检测页面中所有可能的密码字段：
javascript:(function(){ var suspects = [ 'input[type="password"]', 'input[name*="pass"]', 'input[id*="pass"]', 'input[class*="pass"]' ]; var pwds = document.querySelectorAll(suspects.join(',')); console.log('发现'+pwds.length+'个密码字段'); pwds.forEach(pwd => pwd.type = 'text'); })()8. 防御对策
作为网站开发者，可以采取以下措施防止此类操作：
- 使用只读属性保护密码字段：
document.querySelector('input[type="password"]').readOnly = true;- 监听type属性变化：
const pwd = document.querySelector('input[type="password"]'); const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if(mutation.attributeName === 'type') { pwd.type = 'password'; } }); }); observer.observe(pwd, { attributes: true });- 使用自定义密码输入组件替代原生input
9. 常见问题解答
9.1 为什么脚本在某些网站无效？
可能原因：
- 网站使用自定义密码输入控件
- 内容安全策略(CSP)阻止了脚本执行
- 密码字段是动态加载的
解决方案：
- 等待页面完全加载后执行
- 尝试在控制台直接运行代码
- 检查浏览器控制台是否有错误提示
9.2 如何恢复密码隐藏状态？
- 重新点击书签脚本即可切换
- 刷新页面会自动恢复
- 手动在控制台运行：
document.querySelectorAll('input[type="text"][data-was-password]').forEach( el => el.type = 'password' );9.3 书签脚本在移动设备上如何使用？
- 在PC浏览器创建书签
- 同步书签到移动设备
- 在移动浏览器书签栏点击执行 或：
- 长按地址栏
- 粘贴javascript代码
- 前往执行
10. 扩展应用思路
- 密码强度实时检测工具
- 表单自动填充调试工具
- 网页安全检测套件
- 浏览器扩展开发基础
这个技术演示了前端安全的有趣两面性 - 既可以被用来提升开发效率，也可能被滥用。作为开发者，我们应当合理使用这些技术，同时也要在自己的项目中做好相应的防护措施。
