# 前端加固增量记录

这份文档用于补充 [前端加固-中文.md](/D:/programs/likei-h5/docs/安全/前端加固-中文.md) 在最近几轮 `Activities / Ranking` 加固和性能优化中的新增改动。

## 本轮补充

- 生产构建混淆进一步收紧，`esbuild` 在生产相关模式下显式开启了更强的标识符、语法和空白压缩，并移除了合法注释输出。相关文件在 [vite.config.js](/D:/programs/likei-h5/vite.config.js)。
- 第二轮语义类名收口已继续推进，覆盖了 `Ranking/Couple`、`LuckyDollars/Season4`、`SpringFestival`、`Ranking/Overall`、`Ranking/WeeklyStar` 等页面。
- [SpringFestival/Ranking.vue](/D:/programs/likei-h5/src/views/Activities/SpringFestival/Ranking.vue) 已做时序加固：组件会在 `nextTick()` 后再注册 `IntersectionObserver`，并在 `onUnmounted` 时执行 `disconnect()`。
- [Ranking/Couple/Ranking.vue](/D:/programs/likei-h5/src/views/Ranking/Couple/Ranking.vue) 已清理上一轮遗留的乱码注释，并统一替换为中文注释。
- [protectedAssets.js](/D:/programs/likei-h5/src/utils/protectedAssets.js) 中的 `toCssBackgroundImage()` 作用已明确：负责把 `likei-protected:` 地址还原为 CSS 可直接使用的 `url(...)` 字符串，主要用于必须保留 `background-image` 的内联样式场景。

## Canvas 背景方案调整

之前 [BackgroundLayer.vue](/D:/programs/likei-h5/src/components/BackgroundLayer.vue) 增加过 `useCanvas` 模式，用于把多张装饰背景绘制到单个 canvas 中，减少在 Elements 面板里直接看到背景 `<img>` 列表的便利性。

经过低端机性能排查后，该方案已取消：

- `BackgroundLayer` 仍保留 `useCanvas` 入参，兼容历史页面调用。
- 当前实现不再根据 `useCanvas` 生成 canvas。
- 背景图统一通过普通 `<img v-smart-img>` 渲染。
- 图片仍继续走受保护路径解析和图片缓存链路。

取消原因：

- 大尺寸 canvas 会增加内存占用和绘制成本。
- 在低端安卓 WebView 上，canvas 背景和弹幕、跑马灯、头像列表同时出现时容易放大卡顿。
- canvas 只能降低从 DOM 面板直接复制背景结构的便利性，防不住抓包、运行时 Hook 或最终像素提取。
- 相比这点有限收益，页面打开速度和滑动/动画流畅度优先级更高。

后续约定：

- 不再把 canvas 背景作为默认防扒取方案。
- 新活动页可以继续写 `useCanvas`，但它只是兼容字段，不再产生 canvas。
- 防扒取主要依赖受保护路径、图片缓存 blob/object URL、构建产物混淆、资源 hash 和服务端/CDN 权限策略。

## 当前边界

- 这轮改动仍然属于“提高门槛”，不是“彻底防住”。
- 类名和结构收口能降低产物可读性，但不能阻止有经验的人在页面完整渲染后继续还原布局。
- 前端无法阻止通过 Network 面板、抓包、运行时 Hook、截图或像素提取拿到最终资源和视觉结果。

## 验证建议

- 使用 `npm run build` 验证生产包可正常构建。
- 使用 `npm run dev:prod` 或 `npm run preview` 验证活动页、榜单页在生产态逻辑下仍能正常展示。
- 重点检查 `LuckyDollars`、`Couple`、`LesserBairam`、`GamesKing`、`WeeklyStar`、`Overall` 这些近期改动较多的页面。
- 在低端安卓 WebView 上验证首屏打开、背景加载、滑动、弹幕和跑马灯是否流畅。