本文介绍在无后端支持的静态托管平台（如 github pages）上，使用纯前端 javascript 实现密码验证跳转的方法，并重点说明其安全局限性与适用场景。
本文介绍在无后端支持的静态托管平台（如 github pages）上，使用纯前端 javascript 实现密码验证跳转的方法，并重点说明其安全局限性与适用场景。
在 GitHub Pages 等纯静态托管环境中，无法运行服务器端逻辑（如 PHP、Node.js 或数据库验证），但可通过客户端 JavaScript 实现一个简易的“密码门禁页”：用户输入预设密码后，页面自动重定向至目标网站。需强调——这并非真正意义上的安全防护，而仅是一种轻量级访问提示或临时遮罩机制。
以下是一个简洁、可直接部署的 HTML 示例：
<meta charset="UTF-8"><title>请输入访问密码</title><style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; padding: 4rem 1rem; background: #f8f9fa; }
input { padding: 0.75rem; font-size: 1.1rem; border: 1px solid #ddd; border-radius: 4px; margin: 0.5rem; }
button { padding: 0.75rem 1.5rem; font-size: 1.1rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #0056b3; }
</style><h1>? 受限访问页面</h1>
<p>请输入密码以继续访问</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10243" title="openclaw-github-config-impact"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="openclaw-github-config-impact" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill10243" title="openclaw-github-config-impact" class="overflowclass">openclaw-github-config-impact</a>
<p class="overflowclass">OpenClaw 技能 — 给定一个 GitHub 仓库 URL，自动解析出 owner/repo 名称，发现其中的 YAML/properties 配置文件及其配对的中文字段说明；在 `workspace/{repo}/` 目录下按同步日期（格式为 `YYYY-MM-DD`）创建时间戳子目录；写入 `.openclaw-config-state.json` 状态文件。每次用户提问前，先比对远程仓库当前 ref（如 `main` 或 `master`）的最新提交 SHA 与本地状态文件中记录的 SHA：</p>
</div>
<a rel="nofollow" href="/xiazai/skill10243" title="openclaw-github-config-impact" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<input type="password" id="pwdInput" placeholder="输入密码" autocomplete="off"><br><button onclick="checkPassword()">确认</button>
<p id="msg" style="color: #dc3545; margin-top: 1rem;"></p>
<script>
// ⚠️ 密码明文存储于此（仅用于演示！不可用于敏感场景）
const CORRECT_PASSWORD = "secret2024";
function checkPassword() {
const input = document.getElementById("pwdInput").value.trim();
const msgEl = document.getElementById("msg");
if (input === CORRECT_PASSWORD) {
window.location.href = "https://example.com"; // 替换为目标网址
} else {
msgEl.textContent = "密码错误，请重试。";
document.getElementById("pwdInput").select();
}
}
// 支持回车提交
document.getElementById("pwdInput").addEventListener("keypress", (e) => {
if (e.key === "Enter") checkPassword();
});
</script>
✅ 使用说明：
- 将
CORRECT_PASSWORD替换为你设定的密码（建议仅含字母数字，避免特殊字符引发编码问题）； - 将
window.location.href中的"https://example.com"修改为实际目标网址； - 保存为
index.html，部署到 GitHub Pages 的根目录或子路径即可。
⚠️ 关键注意事项：
-
密码完全暴露：任何用户均可通过浏览器「查看页面源代码」或开发者工具 → 「Elements/Console」中直接看到
CORRECT_PASSWORD值； - 可被完全绕过：用户可手动修改 JS 逻辑、禁用脚本、或直接拼接目标 URL 访问；
- 不满足合规要求：无法用于保护隐私数据、会员内容、后台系统等需真实鉴权的场景；
- 适合场景：临时项目预览链接、内部团队快速共享、活动上线前软性拦截、或作为服务端认证的前端补充层。
? 进阶建议：
若需真正安全的访问控制，请迁移至支持服务端渲染与会话管理的平台，例如 Vercel（配合 Next.js API Routes）、Cloudflare Workers、或传统云服务器（Nginx + Auth Basic / OAuth2）。GitHub Pages 本质是 CDN 静态分发，其设计目标即为公开、高效、无状态——请善用其优势，而非强行弥补其安全短板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
