aslan-h5/docs/安全/前端加固-中文更新.md

前端加固增量记录

这份文档用于补充 前端加固-中文.md 在最近几轮 Activities / Ranking 加固和性能优化中的新增改动。

本轮补充

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

Canvas 背景方案调整

之前 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 上验证首屏打开、背景加载、滑动、弹幕和跑马灯是否流畅。