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