aslan-h5/docs/security/frontend-hardening.zh-CN.updates.md

前端加固增量记录

这份文档用于补充 frontend-hardening.zh-CN.md 在最近一轮 Activities / Ranking 加固中的新增改动。

本轮补充

• 生产构建混淆进一步收紧，esbuild 在生产相关模式下显式开启了更强的标识符、语法和空白压缩，并去除了合法注释输出。相关文件在 vite.config.js。
• 公共背景组件 BackgroundLayer.vue 新增了 useCanvas 模式，装饰性多层背景会优先绘制到单个 canvas，而不是在 DOM 中直接暴露多张 <img>。
• canvas 背景已扩展到更多高风险页面： LesserBairam/index.vue、 LoginReward/index.vue、 LuckyDollars/Season3/index.vue、 LuckyDollars/Season4/index.vue、 SpringFestival/index.vue、 Ranking/Couple/index.vue、 Ranking/GamesKing/index.vue、 Ranking/KingAndQueen/TopList.vue、 Ranking/Overall/Ranking.vue、 Ranking/WeeklyStar/WeeklyStar.vue。
• 第二轮语义类名收口已经继续推进，当前已覆盖： Ranking/Couple/index.vue、 LuckyDollars/Season4/index.vue、 SpringFestival/index.vue、 SpringFestival/Ranking.vue、 Ranking/Overall/Ranking.vue、 Ranking/WeeklyStar/WeeklyStar.vue。
• SpringFestival/Ranking.vue 已额外做了时序加固： 组件会在 nextTick() 之后再注册 IntersectionObserver，并在 onUnmounted 时执行 disconnect()。
• Ranking/Couple/Ranking.vue 已清理上一轮遗留的乱码注释，并统一替换为中文注释。
• BackgroundLayer.vue 的 useCanvas 继续保持显式开启，而没有改成默认值 true。
• protectedAssets.js 中的 toCssBackgroundImage() 作用已明确： 它负责把 likei-protected: 地址还原为 CSS 可直接使用的 url(...) 字符串，主要用于必须保留 background-image 的内联样式场景。

当前边界

• 这轮改动依然属于“提高门槛”，不是“彻底防住”。
• canvas 能降低从 Elements 面板直接抄背景结构的便利度，但防不住抓包、运行时 Hook 或最终像素提取。
• 类名和结构收口能降低产物可读性，但不能阻止有经验的人在页面完全渲染后继续还原布局。

验证建议

• 使用 npm run build 验证生产包可正常构建。
• 使用 npm run dev:prod 或 npm run preview 验证活动页、榜单页在生产态逻辑下仍能正常显示。
• 重点检查 SpringFestival、Season4、WeeklyStar、Overall 这些近期改动较多的页面。