195 lines
6.2 KiB
Markdown
195 lines
6.2 KiB
Markdown
# 前端加固说明
|
||
|
||
## 目的
|
||
|
||
这份文档用于记录当前主分支已经落地的前端防扒取加固方案。
|
||
|
||
核心目标是提高扒图、抄页面、低成本复刻的门槛，而不是宣称“前端已经绝对防住”。只要页面能在客户端完整渲染，前端就无法彻底阻止抓包、截图、Hook、像素提取或人工复刻。
|
||
|
||
## 范围
|
||
|
||
本次加固严格限制在当前前端项目内完成，不依赖：
|
||
|
||
- 后端接口改造
|
||
- 私有 OSS
|
||
- 短时签名 URL
|
||
- 服务端动态出图
|
||
|
||
## 已落地能力
|
||
|
||
### 1. 受保护页面访问限制
|
||
|
||
生产相关模式下，受保护页面要求运行在官方 App 环境中。
|
||
|
||
主要文件：
|
||
|
||
- [src/utils/routeGuard.js](/D:/programs/likei-h5/src/utils/routeGuard.js)
|
||
- [src/utils/http.js](/D:/programs/likei-h5/src/utils/http.js)
|
||
- [src/config/security.js](/D:/programs/likei-h5/src/config/security.js)
|
||
|
||
表现：
|
||
|
||
- 公共页面仍可正常访问。
|
||
- 受保护页面在非 App 环境下会跳转到 `/#/not_app`。
|
||
- 受保护页面内的接口请求在缺少 App bridge 时会被拒绝。
|
||
|
||
### 2. 运行时防调试与防复制限制
|
||
|
||
受保护页面增加了轻量运行时限制。
|
||
|
||
主要文件：
|
||
|
||
- [src/utils/runtimeSecurity.js](/D:/programs/likei-h5/src/utils/runtimeSecurity.js)
|
||
- [src/main.js](/D:/programs/likei-h5/src/main.js)
|
||
- [src/App.vue](/D:/programs/likei-h5/src/App.vue)
|
||
|
||
表现：
|
||
|
||
- 屏蔽常见开发者工具快捷键。
|
||
- 屏蔽右键、拖拽、复制、文本选择等交互。
|
||
- 降低长按保存图片的便利性。
|
||
|
||
### 3. `Activities` / `Ranking` 图片受保护地址层
|
||
|
||
`Activities/` 和 `Ranking/` 目录下的大部分图片，不再直接以真实 OSS 地址出现在模板中。
|
||
|
||
主要文件：
|
||
|
||
- [src/config/imagePaths.js](/D:/programs/likei-h5/src/config/imagePaths.js)
|
||
- [src/utils/protectedAssets.js](/D:/programs/likei-h5/src/utils/protectedAssets.js)
|
||
- [src/utils/protectedAssetRuntime.js](/D:/programs/likei-h5/src/utils/protectedAssetRuntime.js)
|
||
- [src/directives/smartImage.js](/D:/programs/likei-h5/src/directives/smartImage.js)
|
||
|
||
表现：
|
||
|
||
- 模板中更多使用 `likei-protected:` 形式的受保护地址。
|
||
- 运行时再解析为真实图片地址。
|
||
- 大部分图片最终会走缓存并转换成 blob/object URL。
|
||
|
||
### 4. 图片缓存和单图版本控制
|
||
|
||
图片缓存用于减少重复网络下载，但不再追求过大容量。
|
||
|
||
主要文件：
|
||
|
||
- [src/config/imageCacheVersion.js](/D:/programs/likei-h5/src/config/imageCacheVersion.js)
|
||
- [src/utils/image/imageCacheManager.js](/D:/programs/likei-h5/src/utils/image/imageCacheManager.js)
|
||
|
||
当前策略：
|
||
|
||
- 默认最多缓存 120 张图片。
|
||
- 最大缓存体积为 80MB。
|
||
- 普通发版不更新全局缓存版本。
|
||
- 单张图片替换时，优先上传新文件名并同步修改 H5 引用。
|
||
|
||
说明：之前评估过 `assetVersions` 单图版本参数方案，但在只改 H5 和 OSS 图片、无法稳定控制 CDN/浏览器缓存链路的情况下，容易出现发布后仍命中旧图的问题，因此已取消。
|
||
|
||
### 5. 构建产物收口
|
||
|
||
生产构建使用内容 hash，减少可读文件名暴露，也提升缓存稳定性。
|
||
|
||
主要文件：
|
||
|
||
- [vite.config.js](/D:/programs/likei-h5/vite.config.js)
|
||
- [nginx/default.conf](/D:/programs/likei-h5/nginx/default.conf)
|
||
- [nginx/default_hooka.conf](/D:/programs/likei-h5/nginx/default_hooka.conf)
|
||
|
||
表现：
|
||
|
||
- JS/CSS/资源文件名使用内容 hash。
|
||
- HTML 短缓存，静态资源长缓存。
|
||
- 内容不变的资源在普通发版后可以继续命中缓存。
|
||
|
||
### 6. CSS 背景受保护地址桥接
|
||
|
||
部分页面必须使用 `background-image`。这类场景通过 `toCssBackgroundImage()` 把 `likei-protected:` 地址转换为 CSS 可用的 `url(...)`。
|
||
|
||
主要文件：
|
||
|
||
- [src/utils/protectedAssets.js](/D:/programs/likei-h5/src/utils/protectedAssets.js)
|
||
|
||
## Canvas 背景方案已取消
|
||
|
||
之前 [BackgroundLayer.vue](/D:/programs/likei-h5/src/components/BackgroundLayer.vue) 增加过 `useCanvas` 模式，用于把多张装饰背景绘制到单个 canvas 中，减少在 Elements 面板里直接看到背景 `<img>` 列表的便利性。
|
||
|
||
经过低端机性能排查后，该方案已取消。
|
||
|
||
当前约定：
|
||
|
||
- `BackgroundLayer` 仍保留 `useCanvas` 入参，兼容历史页面调用。
|
||
- 当前实现不再生成 canvas，统一渲染为普通 `<img v-smart-img>`。
|
||
- 图片仍继续走受保护路径解析和图片缓存链路。
|
||
- 不再把 canvas 背景作为默认防扒取方案。
|
||
|
||
取消原因：
|
||
|
||
- 大尺寸 canvas 会增加内存占用和绘制成本。
|
||
- 低端安卓 WebView 中，canvas 背景叠加弹幕、跑马灯、头像列表时容易放大卡顿。
|
||
- canvas 只能降低从 Elements 面板直接复制背景结构的便利性，防不住抓包、运行时 Hook 或最终像素提取。
|
||
- 页面打开速度、滑动和动画流畅度优先级高于这点有限防护收益。
|
||
|
||
## 当前边界
|
||
|
||
这套改动依然无法彻底防住以下情况：
|
||
|
||
- 通过 Network 面板或抓包获取图片请求。
|
||
- 有经验的人持续分析前端运行时代码。
|
||
- 自定义 WebView、自动化脚本、Hook 等方式截获资源。
|
||
- 通过截图、录屏、最终像素提取还原视觉。
|
||
- 人工观察后重新临摹布局和样式。
|
||
|
||
## 推荐测试方式
|
||
|
||
### 受保护页面拦截
|
||
|
||
可使用：
|
||
|
||
```bash
|
||
npm run dev:prod
|
||
```
|
||
|
||
或：
|
||
|
||
```bash
|
||
npm run build
|
||
npm run preview
|
||
```
|
||
|
||
预期结果：
|
||
|
||
- 非 App 环境下访问受保护页面会跳转到 `/#/not_app`。
|
||
- 公共页面仍可正常访问。
|
||
|
||
### 页面与图片链路验证
|
||
|
||
在接近生产环境的模式下检查：
|
||
|
||
- `Activities` / `Ranking` 页面是否仍能正常展示。
|
||
- 受保护图片是否仍能正常显示。
|
||
- 运行时 DOM 和构建产物中是否更少直接暴露真实图链。
|
||
- 替换图片后，新文件名引用是否能在用户端稳定加载。
|
||
|
||
### 性能验证
|
||
|
||
重点在低端安卓 WebView 上检查：
|
||
|
||
- 首屏打开速度。
|
||
- 背景图片加载是否正常。
|
||
- 滑动是否流畅。
|
||
- 弹幕、跑马灯等持续动画是否造成明显卡顿。
|
||
|
||
### 构建产物验证
|
||
|
||
执行：
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
预期结果：
|
||
|
||
- `dist/js` 文件名以 hash 为主。
|
||
- `dist/css` 文件名以 hash 为主。
|
||
- 构建产物文件名中不再直观出现页面名。
|
||
- 生产包中不再保留 `console.log`、`console.debug`、`console.info` 和 `debugger`。
|