雷池 SafeLine 自定义错误页
10 个单文件自包含 HTML 错误页：CSS / SVG 插图 / favicon 全部内联，零外部依赖，双击即可在浏览器打开预览。
文件对照
| 文件 | 场景 | 背景色 | 插图 |
|---|---|---|---|
404.html |
页面不存在 | 雷池蓝 #0E69C8 |
指南针 |
404-app.html |
应用不存在 | 青蓝 #0F8FC9 |
应用网格 + 缺位「?」 |
403.html |
攻击检测与黑名单 | 深红 #C13B45 |
盾牌 + 禁止符 |
429.html |
频率限制 | 橙 #D9761F |
沙漏 + 加速线 |
465.html |
等候室 | 青绿 #12968A |
排队小人 |
466.html |
应用维护 | 琥珀 #C99420 |
施工锥 |
467.html |
身份认证 | 靛蓝 #4C5FD0 |
钥匙 |
468.html |
人机验证 | 绿 #2E9E5B |
机器人 + 对勾 |
502.html |
网关错误 | 紫罗兰 #8A55C8 |
断开的插头 + 电火花 |
504.html |
网关超时 | 深紫 #6A3FB8 |
闹钟 |
页面结构
- 浏览器窗口拟物卡片：标签页（
Error 4xx/5xx）+ 红色搜索条（8 颗加载小球动画）+ 专属 SVG 插图 - 文案：中文诗意句加粗 + 英文小一号在下
- 悬停：卡片回正，插图轻微倾斜（404 指南针旋转 -90°）
- 移动端自适应（430px / 350px 两档缩小），支持
prefers-reduced-motion
拦截信息（事件 ID）
每页底部预留了隐藏的信息块。雷池 WAF 实际拦截时会在 HTML 末尾注入注释：
<!-- event_id: 8f14e45fceea167a5a36dedd4bea2543 TYPE: A -->
页面内联 JS 会自动解析并显示「事件ID / 类型 / 拦截时间」三行小字。 无注入时（本地预览）整块保持隐藏，页面外观完全不变。
本地预览带信息块的效果：把上面那行注释追加到任意文件 </html> 后面再打开即可。
部署到雷池
- 专业版：控制台「防护配置 → 通用配置 → 拦截页面」→ 自定义拦截页面，按场景逐个替换 HTML。
- 社区版：控制台仅支持改提示文案；整页替换需走文件方式——在部署目录（默认
/opt/safeline）下找到resources/nginx/*_pages/，按现有文件名逐个替换（可参考上表做文件名映射），注意版本升级可能还原自定义文件。 - 465 等候室 / 468 人机验证在官方实现里是带 JS 校验的动态服务，静态页替换上去只有展示作用，部署前请先确认替换入口。
我为我自己带盐！