Skip to main content

保护Cloudflare-pages网站

Cloudflare Pages 没有内置的“一键简单密码保护”功能（如传统的 HTTP Basic Auth 开关），但你可以通过几种常见且有效的方法来实现“输入访问密码才能打开网站”的需求。以下是目前（2026 年）最实用的几种方案，按推荐顺序排序：

1. 最推荐：使用 Cloudflare Access（Zero Trust / Cloudflare One）​

这是官方最干净、集成度最高的方案，尤其适合需要一定安全性的静态网站（staging、内部工具、预览站点等）。

  • 优点：

    • 免费额度很高（最多 50 个用户免费，超出后按量计费）。
    • 支持邮箱登录 + 一键邮件验证码（无需记住密码）。
    • 可以只保护特定路径、整个站点，或仅保护 preview 分支。
    • 管理方便，支持 IP 白名单、设备 posture 等高级规则。
    • 与 Pages 深度集成，在 Pages 项目设置里可以“一键启用”。

  • 如何操作（简单步骤）：

    1. 进入你的 Cloudflare Pages 项目 → Settings（设置） → 找到 Access Policy（或类似“Access”部分）。
    2. 点击 Enable / Manage，系统会跳转到 Cloudflare One / Zero Trust 仪表盘。
    3. 添加 Application（应用），选择 Self-hosted 或 Pages 相关类型，域名填你的 Pages 域名（支持通配符 * 保护所有 preview）。
    4. 创建 Policy（策略）：
      • Include（允许）：选择 Email（指定邮箱列表）或 Everyone（所有人，但结合其他规则）。
      • 对于简单“密码”效果，可以用 Email + One-time PIN（邮件验证码），用户体验接近输入密码。
    5. 保存后，访问网站时会弹出 Cloudflare 的登录页面，要求验证身份。

  • 适用场景：需要给特定人（或自己团队）访问，不想公开分享明文密码时。

  • 注意：它更偏向“身份认证”而不是单纯的“共享密码”。如果只想一个简单共享密码，可以结合下面方案。

2. 使用 Pages Functions + Middleware 实现简单 HTTP Basic Auth（共享密码）​

这是最接近“输入一个密码就能访问”的方式，适合纯静态站点。

  • 实现原理：在项目根目录创建 functions/_middleware.js（或 .ts），用 JavaScript 代码检查 HTTP Basic Authentication 头。密码存放在 Environment Variables 中（加密存储）。

  • 优点：完全 serverless、无额外成本、代码简单、支持生产和预览环境不同密码。

  • 缺点：浏览器会弹出原生 Basic Auth 对话框（用户名/密码框），界面不是很现代；密码是明文传输（但 HTTPS 保护下还算安全，仅限低敏感场景）。

快速实现参考（推荐以下开源示例，直接复制使用）：

步骤大纲：

  1. 在你的 Pages 项目本地代码中，创建 functions/_middleware.js 文件，粘贴 Basic Auth 验证代码（从 Workers 示例改编）。
  2. 在 Cloudflare Pages 仪表盘 → Settings → Environment Variables 添加变量，例如：
    • 变量名：PASSWORD 或 CFP_PASSWORD
    • 值：你想要的密码（生产和预览可分别设置）
  3. 重新部署项目即可生效。

代码示例（简化版，基于官方 Workers Basic Auth）：

export const onRequest = async ({ request, env }) => {
  const auth = request.headers.get('authorization');
  // 解析 Basic Auth 并与 env.PASSWORD 对比...
  // 如果不匹配，返回 401 并提示输入密码
};

具体代码建议直接参考上面 GitHub 仓库，避免自己从零写。

3. 其他备选方案​

  • Cloudflare Workers 包装：把 Pages 作为 origin，在 Workers 前面加一层 Basic Auth（适合不想改 Pages 项目本身的情况）。
  • 第三方小工具：如 Octauthent 等（以前社区推荐），但现在直接用 Pages Functions 更简单。
  • 自定义登录页面：用 Pages Functions + HTML 表单 + Cookie/Session 实现更美观的密码输入页（比原生 Basic Auth 体验好，但代码稍复杂）。

建议​

  • 如果是临时 staging / 预览站点，优先试 Cloudflare Access（一键启用，管理最方便）。
  • 如果你想要单个共享密码且接受浏览器弹窗，选 Pages Functions + Basic Auth（最轻量）。
  • 两者都可以免费实现，低流量站点几乎零成本。