本文介绍在无后端支持（如 github pages）的静态网站上，通过 html + javascript 实现简易密码验证跳转页的方法，并明确其安全边界与适用场景。
本文介绍在无后端支持（如 github pages）的静态网站上，通过 html + javascript 实现简易密码验证跳转页的方法，并明确其安全边界与适用场景。
在 GitHub Pages、Vercel Static Hosting 或 Netlify Static Sites 等纯静态托管环境中，无法运行服务器端逻辑（如 Node.js、PHP），因此真正的身份认证必须由服务端完成。但若仅需一个轻量级、用户体验友好的“门禁页”（例如用于预发布站点、内部演示或临时分享链接），可借助前端 JavaScript 实现密码校验后重定向——需特别注意：这是一种表面保护（obfuscation）而非安全防护（authentication）。
以下是一个简洁、可直接部署的实现示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>请输入访问密码</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
display: flex; justify-content: center; align-items: center;
height: 100vh; margin: 0; background: #f8f9fa; }
.container { text-align: center; padding: 2rem; background: white;
border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
input { padding: 0.75rem; font-size: 1rem; border: 1px solid #ddd; border-radius: 4px; }
button { margin-top: 1rem; padding: 0.6rem 1.2rem; background: #007bff; color: white;
border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; }
button:hover { background: #0056b3; }
</style>
</head>
<body>
<div class="container">
<h2>请输入访问密码</h2>
<input type="password" id="pwd" placeholder="输入密码" autocomplete="off">
<br>
<button onclick="checkPassword()">进入</button>
<p id="msg" style="color: #dc3545; margin-top: 1rem; min-height: 1.2em;"></p>
</div>
<script>
// ⚠️ 注意：密码明文写在 JS 中，可被任意查看！仅适用于低敏感场景
const CORRECT_PASSWORD = "secret2024"; // ✅ 替换为你自己的密码（仍不安全！）
const TARGET_URL = "https://example.com"; // ✅ 替换为目标网站地址
function checkPassword() {
const input = document.getElementById('pwd').value.trim();
const msg = document.getElementById('msg');
if (input === CORRECT_PASSWORD) {
msg.textContent = "验证通过，正在跳转...";
msg.style.color = "#28a745";
setTimeout(() => {
window.location.href = TARGET_URL;
}, 800);
} else {
msg.textContent = "❌ 密码错误，请重试";
document.getElementById('pwd').value = '';
document.getElementById('pwd').focus();
}
}
// 支持回车提交
document.getElementById('pwd').addEventListener('keypress', e => {
if (e.key === 'Enter') checkPassword();
});
</script>
</body>
</html>✅ 使用说明：
- 将上述代码保存为
index.html，部署至 GitHub Pages 根目录（如https://username.github.io/my-site/）； - 访问该页面即显示密码输入框，输入正确密码后自动跳转至目标网址。
⚠️ 关键注意事项（务必阅读）：
openclaw-github-config-impact
下载
OpenClaw 技能 — 给定一个 GitHub 仓库 URL，自动解析出 owner/repo 名称，发现其中的 YAML/properties 配置文件及其配对的中文字段说明；在 `workspace/{repo}/` 目录下按同步日期（格式为 `YYYY-MM-DD`）创建时间戳子目录；写入 `.openclaw-config-state.json` 状态文件。每次用户提问前，先比对远程仓库当前 ref（如 `main` 或 `master`）的最新提交 SHA 与本地状态文件中记录的 SHA：
立即学习“前端免费学习笔记（深入）”；
-
密码完全暴露：打开浏览器开发者工具 → “Sources” 或 “Elements” 标签页 → 即可看到
CORRECT_PASSWORD变量值； -
URL 可被绕过：任何人只要知道目标网址（如
https://example.com），可直接访问，无需密码； - 不防爬虫/自动化请求：无服务端校验，无法阻止脚本批量尝试密码；
- 不满足合规要求：不可用于保护个人数据、后台系统、支付页面等需真实鉴权的场景。
? 进阶建议（如需真正安全）：
- 使用支持 Basic Auth 的托管平台（如 Netlify 的
_redirects+ HTTP Basic Auth）； - 部署轻量后端（如 Cloudflare Workers、Vercel Serverless Functions）处理密码校验；
- 结合 OAuth 或第三方登录（如 GitHub Login）实现用户级访问控制。
简言之：前端密码跳转页适合“礼貌性提示”或临时分享，而非安全屏障。理解其局限，方能合理选型。
