不想搭后端，怎么给网页加密码保护？我写了个零依赖的开源工具

字数 3811· 约 13 分钟

你有没有遇到过这种场景？

  • 做了一个付费课程的预览页，只想让付过钱的人看到内容
  • 开发了一个小游戏 / 小工具，只想在小圈子里分享，不想被搜索引擎收录、被陌生人随便打开
  • 临时需要把一个页面分享给特定的人，但不想搭服务器、不想写后端、不想折腾鉴权系统

传统方案是什么？Nginx 加个 Basic Auth？搭个 Node/Python 后端做登录？用第三方 SaaS 加密平台？

太重了。

我只是想给一个 HTML 页面加把锁而已。

所以我写了 StaticShield——一个零后端、零依赖的静态网页加密工具。一条命令，把你的 HTML 变成一份「自解密页面」：没有密码，看到的是一扇锁着的门；输入密码，浏览器本地解密，原始内容瞬间还原。

GitHub 地址：https://github.com/wangshengithub/staticshield

它到底做了什么？

1
2
3
4
5
6
7
8
9
10
原始站点（HTML + CSS + JS + 图片）
        │
        ▼  --bundle 内联打包
   单个自包含 HTML
        │
        ▼  AES-256 加密
   加密后的 .html
        │
        ▼  部署到任意静态托管
   访客输密码 → 浏览器本地解密 → 原始内容还原

加密后的产物仍然是一个普通的 HTML 文件。 扔到 GitHub Pages、Cloudflare Pages、阿里云 OSS、Nginx 静态目录、甚至 U 盘里都行。不需要服务器跑任何后端逻辑，解密完全发生在访客的浏览器里（基于 WebCrypto API）。

🐎 实战示例：给「奉国牧马」加一把锁

「奉国牧马」（Horse Empire）是我做的一款古风牧场育成放置游戏。谁小时候没幻想过拥有一群自己的马呢？在这里，你可以体验从几匹普通慢驹起步，割草喂马、配对繁殖，慢慢育出良驹、千里驹、贡驹，直到培养出「神驹」的极致快感！

它不只是简单的养马，更是一个充满深度的经营世界，绝对让你玩得停不下来：

  • 🎲 配种如开盲盒：马分五等（慢驹→良驹→千里驹→贡驹→神驹），同级配对有概率升级、同级或退化。加上双胎丹、产房等道具、建筑，每一匹幼驹的降生都充满期待感。
  • 🌾 真实的生态与经营：6级草场可升级，但要注意生态健康度！过度繁殖会导致「荒漠化」，产量暴跌，你必须靠植树、休耕来恢复地力。
  • ⚡ 丰富的随机事件：流星雨、马瘟、狼袭、天降甘露……10种随机事件搭配狼围栏、疫苗站等 7 座功能建筑，让牧场生活充满意外与策略挑战。
  • 🏆 三大结局等你解锁：血统、财富、建筑三条路线，全成就大结局等你来挑战！

🔗 原站：https://horseempire.pages.dev/

🔗 加密站：https://horseempire-staticshield.pages.dev/

🔑 密码：horseempire-staticshield

你可以现在就打开加密站体验： 一个干净的门禁页面，输入密码，点击解锁，整个游戏瞬间还原，和原站体验完全一致。

项目结构

「奉国牧马」是一个典型的多文件前端项目：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
horseempire/
├── index.html
├── css/
│  └── style.css
└── js/
    ├── data.js
    ├── utils.js
    ├── audio.js
    ├── state.js
    ├── time.js
    ├── horse.js
    ├── pasture.js
    ├── breeding.js
    ├── economy.js
    ├── building.js
    ├── ecology.js
    ├── events.js
    ├── achievements.js
    ├── ui.js
    ├── loop.js
    └── main.js

1 个 HTML + 1 个 CSS + 16 个 JS，共 18 个文件。

一条命令搞定！

使用StaticShield 的 --bundle 模式，先自动把所有 CSS、JS、图片全部内联进 HTML，变成单文件，然后整体加密。

1
2
3
4
5
6
node encrypt.js index.html \
  --bundle \
  -p horseempire-staticshield \
  --hint "原站：https://horseempire.pages.dev/" \
  --remember 7 \
  -d ./dist
参数 作用
--bundle 将 CSS 和 16 个 JS文件 全部内联，输出单文件
-p horseempire-staticshield 设置解密密码
--hint "原站：..." 门禁页显示密码提示
--remember 7 访客可勾选「记住我」，7 天免重复输入
-d ./dist 输出目录

执行完，./dist/index.html 就是加密产物——一个文件，包含整个游戏，已被 AES-256 加密。不到 1 秒，18 个文件变成了1 个加密文件。

核心特性

特性 说明
🔐 AES-256-CBC 对称加密，PKCS#7 填充
🔑 PBKDF2 百万次迭代 默认 SHA-256，可选 SHA-512
✅ HMAC-SHA256 验签 Encrypt-then-MAC，防篡改
📦 整站打包 支持 --bundle 内联所有资源
🖥️ CLI + Web GUI 提供命令行和图形界面两种使用方式
🎲 随机强密码 CSPRNG 生成
🔗 分享链接 密码写入 URL Hash，不经过服务器
💾 记住我 本机免重复输入，可设过期
🔒 重叠加密 多层密码逐层剥解
🚫 零依赖 不需要 npm install

更多用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 交互式输入密码（不回显）
node encrypt.js page.html

# 多文件项目整站打包
node encrypt.js index.html --bundle -p MyPwd123 -d ./dist

# 多个独立 HTML 批量加密
node encrypt.js a.html b.html c.html -p MyPwd123 -d ./dist

# 随机密码 + 分享链接
node encrypt.js secret.html --gen-pwd 12 --share --hint "我的生日"

# 图形界面
node encrypt.js --gui
安全吗

我知道一提到「前端加密」，很多人第一反应是：

“前端加密不就是自欺欺人吗？源码里什么都有。”

这个质疑有道理，但只对了一半。

先说算法强度。 StaticShield 使用的加密组合——AES-256-CBC + PBKDF2（100 万次迭代）+ HMAC-SHA256——与美国国家安全局（NSA）批准用于保护「绝密」（TOP SECRET）级别信息的标准处于同一级别。银行间清算（SWIFT）、各国电子护照、TLS 1.3、磁盘全盘加密（BitLocker / FileVault），底层都是 AES-256。

AES-256 的密钥空间是 2²⁵⁶ ≈ 1.16 × 10⁷⁷。假设全人类 80 亿人每人每秒尝试 10 亿个密钥，穷举需要约 4.6 × 10⁵⁰ 年。暴力破解 AES-256 在物理上不可能。

再说密钥派生。 用户密码不能直接当密钥，StaticShield 用 PBKDF2 做拉伸，默认迭代 1,000,000 次，而OWASP 2023 年建议 PBKDF2-SHA256 也才至少 600,000 次——直接超了 67%。实际效果：攻击者拿到密文想穷举一个 8 位混合密码（62 字符集），即使用高端 GPU，期望耗时也在数月以上。每多一位密码，难度就会指数级增长。

再说完整性。 StaticShield 采用 Encrypt-then-MAC：先加密，再对密文算 HMAC-SHA256；解密时先验签，通过才解密。密文被改动哪怕一个比特，验签直接失败，解密根本不执行。这彻底堵死了 Padding Oracle Attack 这条路——2014 年的 POODLE攻击，本质上就是利用了缺少完整性校验的缺陷。

再说实现层面。 浏览器端解密不是 JS 手写的算法，而是调用 WebCrypto API（crypto.subtle），底层由操作系统加密库（Windows CNG / macOS CommonCrypto / Linux OpenSSL）执行，密钥操作在浏览器沙箱内部完成，JS 层无法读取密钥原始字节。每次加密随机生成 IV 和 Salt，相同内容每次加密的密文都不同。分享链接的密码写在 URL Hash 里，浏览器不会把 Hash 发送到服务器——服务端日志、CDN 日志、Referer 头中都看不到密码。

所以够不够「企业级」？ 加密算法强度——完全够，就是金融/军事用的那套。作为「门禁式访问控制」——在纯前端方案中，这已经是天花板了。

为什么不用现成方案？

方案 问题/特性
Nginx Basic Auth 需要服务器，密码明文传输，体验差
自建后端登录 杀鸡用牛刀
第三方 SaaS 加密 内容经过第三方，隐私存疑
Cloudflare Access 需要企业版，配置复杂
StaticShield 零后端、零依赖、本地加密、浏览器解密

最后

「奉国牧马」是第一个吃螃蟹的项目——18 个文件，一条 --bundle 命令，1 秒变成 1 个加密文件，输入密码就能玩。

如果你也有「给 HTML 加个密码保护」的需求：

https://github.com/wangshengithub/staticshield

欢迎先体验加密后的「奉国牧马」：https://horseempire-staticshield.pages.dev/（密码：horseempire-staticshield）

觉得有用请给项目点个 ⭐ Star，也欢迎提 Issue 和 PR，这是对我最大的支持。

作者：wangshen
链接：https://wangshenblog.pages.dev/2026/07/28/staticshield/
许可：CC-BY-NC-SA 4.0 国际许可协议