# 前端加固说明

## 目的

这份文档用于记录当前主分支已经落地的前端防扒取加固方案。

核心目标是提高扒图、抄页面、低成本复刻的门槛，而不是宣称“前端已经绝对防住”。只要页面能在客户端完整渲染，前端就无法彻底阻止抓包、截图、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`。