网站密码保护工作流程

生成时间: 2026-03-03 23:43:50 | 分类: guides | 来源: 网站密码保护工作流程.md

网站密码保护工作流程

📋 需求说明

当用户需要为网站添加密码保护时，按照以下流程操作：

核心需求

  1. 密码保护: 首页增加密码验证，密码为 580511
  2. 弹窗提示: 首次访问时显示密码输入弹窗
  3. Cookie记忆: 密码验证成功后种下60天有效的Cookie
  4. 自动验证: 后续访问时检查Cookie，有效则直接进入
  5. 响应式设计: 支持手机和PC访问

🔧 技术实现

文件位置

  • 网站根目录: /www/wwwroot/claw.3s3m.net/
  • 主文件: index.html
  • 备份文件: index.html.backup

密码保护机制

1. 密码验证逻辑

`javascript const CORRECT_PASSWORD = '580511'; const COOKIE_NAME = 'claw_auth_token'; const COOKIE_EXPIRE_DAYS = 60; `

2. Cookie管理

  • 设置Cookie: claw_auth_token=authenticated
  • 有效期: 60天
  • 路径: / (整个网站)
  • SameSite: Lax

3. 验证流程

`javascript
  1. 页面加载 → 检查Cookie
  2. Cookie有效 → 显示主内容
  3. Cookie无效 → 显示密码弹窗
  4. 输入密码 → 验证 → 正确则设置Cookie并显示内容
  5. 密码错误 → 显示错误信息，重新输入
`

HTML结构

`html
`

CSS样式特性

  1. 弹窗样式: 毛玻璃效果，居中显示
  2. 输入框样式: 大字体，居中文本，字母间距
  3. 错误提示: 红色文字，抖动动画
  4. 成功提示: 绿色文字，平滑过渡
  5. 响应式: 适配手机和PC屏幕

JavaScript功能

  1. Cookie检查: checkAuthCookie()
  2. Cookie设置: setAuthCookie()
  3. 密码验证: validatePassword()
  4. 内容切换: showMainContent()
  5. 键盘支持: Enter提交，Esc清除
  6. 安全防护: 基本防开发者工具和右键查看

🚀 实施步骤

步骤1: 备份原始文件

`bash sudo cp /www/wwwroot/claw.3s3m.net/index.html /www/wwwroot/claw.3s3m.net/index.html.backup `

步骤2: 创建新index.html

创建包含密码保护功能的完整HTML文件，包含：
  • 密码弹窗HTML结构
  • 主内容HTML结构
  • CSS样式
  • JavaScript逻辑

步骤3: 部署文件

`bash sudo cp new_index.html /www/wwwroot/claw.3s3m.net/index.html sudo chown www:www /www/wwwroot/claw.3s3m.net/index.html sudo chmod 644 /www/wwwroot/claw.3s3m.net/index.html `

步骤4: 测试验证

  1. 首次访问 → 显示密码弹窗
  2. 输入正确密码 → 进入主页面
  3. 关闭浏览器重新打开 → 直接进入（Cookie有效）
  4. 清除Cookie后访问 → 重新显示密码弹窗

🔒 安全注意事项

客户端安全限制

  1. 密码在客户端验证: 非绝对安全，防止随意访问
  2. Cookie存储: 简单标识，非敏感信息
  3. 基础防护: 防右键查看和开发者工具（可绕过）
  4. 适用于: 内部使用，非高度敏感数据

如需增强安全性

  1. 服务端验证: 需要后端API支持
  2. HTTPS: 确保传输安全
  3. 密码哈希: 客户端哈希+服务端验证
  4. 访问日志: 记录访问IP和时间

📁 文件管理

生成的文件

  1. new_index.html - 带密码保护的首页模板
  2. index.html.backup - 原始文件备份
  3. 网站密码保护工作流程.md - 本文档

目录结构

` /www/wwwroot/claw.3s3m.net/ ├── index.html # 带密码保护的主页 ├── index.html.backup # 原始备份 ├── 404.html # 404页面 ├── .htaccess # Apache配置 ├── .user.ini # PHP配置 ├── reports/ # 分析报告 ├── guides/ # 使用指南 ├── configs/ # 配置文档 ├── templates/ # 模板文件 ├── tasks/ # 任务管理 └── team/ # 团队协作 `

🔄 维护流程

修改密码

  1. 编辑 index.html 文件
  2. 修改 CORRECT_PASSWORD 常量
  3. 重新部署文件

修改Cookie有效期

  1. 编辑 index.html 文件
  2. 修改 COOKIE_EXPIRE_DAYS 常量
  3. 用户需要重新验证（现有Cookie仍有效至过期）

恢复原始版本

`bash sudo cp /www/wwwroot/claw.3s3m.net/index.html.backup /www/wwwroot/claw.3s3m.net/index.html `

🧪 测试用例

测试1: 首次访问

  • ✅ 显示密码弹窗
  • ✅ 输入框自动聚焦
  • ✅ 输入错误密码显示错误
  • ✅ 输入正确密码进入主页

测试2: Cookie验证

  • ✅ 密码正确后设置Cookie
  • ✅ 重新访问直接进入
  • ✅ 清除Cookie后需要重新输入

测试3: 响应式测试

  • ✅ PC浏览器正常显示
  • ✅ 手机浏览器正常显示
  • ✅ 平板设备正常显示

测试4: 键盘操作

  • ✅ Enter键提交密码
  • ✅ Esc键清除输入
  • ✅ Tab键切换焦点

📝 注意事项

浏览器兼容性

  1. 现代浏览器: Chrome, Firefox, Safari, Edge
  2. Cookie支持: 需要启用Cookie
  3. JavaScript: 需要启用JavaScript
  4. 移动端: iOS Safari, Android Chrome

已知限制

  1. 客户端安全: 密码在源码中可见
  2. 网络传输: 非HTTPS时密码明文传输
  3. Cookie盗用: 如果Cookie被盗，可绕过密码
  4. 缓存问题: 浏览器缓存可能导致旧版本

推荐改进

  1. 添加HTTPS: 确保传输安全
  2. 服务端验证: 真正的密码保护
  3. 访问控制: IP限制或二次验证
  4. 会话管理: 更安全的会话机制

📞 故障排除

问题1: 密码弹窗不显示

  • 检查JavaScript是否启用
  • 检查Cookie是否已设置且有效
  • 检查浏览器控制台错误

问题2: 密码验证失败

  • 确认密码为 580511
  • 检查输入是否有空格
  • 清除浏览器缓存和Cookie

问题3: 样式显示异常

  • 检查CSS是否加载
  • 检查浏览器兼容性
  • 清除浏览器缓存

问题4: Cookie不保存

  • 检查浏览器Cookie设置
  • 检查隐私模式
  • 检查浏览器扩展拦截

---

最后更新: 2026-03-03 版本: 1.0 维护者: 数智部 适用场景: 内部文档保护，非高度安全要求场景
返回