本文介绍在无后端支持的静态托管平台（如 github pages）上，使用纯前端 javascript 实现密码验证跳转的方法，并明确其安全边界与适用场景。
本文介绍在无后端支持的静态托管平台（如 github pages）上，使用纯前端 javascript 实现密码验证跳转的方法，并明确其安全边界与适用场景。
在 GitHub Pages 等纯静态托管环境中，无法运行服务器端逻辑（如 Node.js、PHP 或数据库验证），因此“密码保护”只能通过前端 JavaScript 实现——即用户输入密码后，前端脚本比对成功则执行 window.location.href 跳转。这种方式操作简单、部署零成本，但需清醒认识其本质：它不是真正的安全防护，而是一种轻量级访问提示或临时门槛。
以下是一个简洁可靠的实现示例（保存为 index.html 即可部署到 GitHub Pages）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>请输入访问密码</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; padding: 4rem 1rem; background: #f8f9fa; }
.container { max-width: 500px; margin: 0 auto; background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
input[type="password"] { width: 100%; padding: 0.75rem; font-size: 1rem; border: 1px solid #ddd; border-radius: 4px; margin: 0.5rem 0; }
button { background: #007bff; color: white; border: none; padding: 0.75rem 1.5rem; font-size: 1rem; border-radius: 4px; cursor: pointer; }
button:hover { background: #0056b3; }
.error { color: #dc3545; margin-top: 0.5rem; min-height: 1.2em; }
</style>
</head>
<body>
<div class="container">
<h1>? 请验证访问权限</h1>
<p>输入密码以继续访问目标网站</p>
<input type="password" id="pwdInput" placeholder="请输入密码" autocomplete="off">
<button onclick="checkPassword()">确认</button>
<div class="error" id="errorMsg"></div>
</div>
<script>
// ⚠️ 注意：密码明文写在 JS 中，任何人都可通过查看源码获取！
const CORRECT_PASSWORD = "secret2024"; // ← 替换为你自己的密码（仅作示意）
const TARGET_URL = "https://example.com"; // ← 替换为目标网站地址
function checkPassword() {
const input = document.getElementById("pwdInput").value.trim();
const errorMsg = document.getElementById("errorMsg");
if (input === CORRECT_PASSWORD) {
window.location.href = TARGET_URL;
} else {
errorMsg.textContent = "❌ 密码错误，请重试。";
document.getElementById("pwdInput").select();
}
}
// 支持回车提交
document.getElementById("pwdInput").addEventListener("keyup", (e) => {
if (e.key === "Enter") checkPassword();
});
</script>
</body>
</html>✅ 优点：
OpenClaw 技能 — 给定一个 GitHub 仓库 URL，自动解析出 owner/repo 名称，发现其中的 YAML/properties 配置文件及其配对的中文字段说明；在 `workspace/{repo}/` 目录下按同步日期（格式为 `YYYY-MM-DD`）创建时间戳子目录；写入 `.openclaw-config-state.json` 状态文件。每次用户提问前，先比对远程仓库当前 ref（如 `main` 或 `master`）的最新提交 SHA 与本地状态文件中记录的 SHA：
立即学习“前端免费学习笔记（深入）”；
- 完全静态，100% 兼容 GitHub Pages、Vercel、Netlify 等平台；
- 用户体验友好（带样式、回车支持、错误反馈）；
- 无需配置域名、SSL 或额外服务。
⚠️ 重要注意事项（务必阅读）：
-
密码不安全：
CORRECT_PASSWORD明文存在于 HTML/JS 源码中，任何用户右键 →「查看页面源代码」即可看到； -
可被绕过：直接访问
TARGET_URL地址即可跳过该页；分享目标链接等同于分享通行权； - 不防爬虫/自动化访问：无请求校验、无会话管理、无速率限制；
- 不适合敏感内容：切勿用于保护后台、用户数据、未公开产品或需合规的业务场景。
? 何时适合使用？
- 内部测试链接（如给小范围同事预览新站）；
- 活动上线前的软性“邀请制”引导页；
- 教学演示、个人作品集中的趣味交互页；
- 作为更完善认证方案上线前的临时过渡层。
如需真正安全的访问控制，请迁移到支持服务端渲染与身份验证的平台（如 Vercel + NextAuth、Cloudflare Workers + JWT、或传统云服务器部署 Express/Django 应用）。静态页面的“密码门”，本质是用户体验层的友好提示，而非安全防线。
