lanyuanxiaoyao/nex
1
0
Fork 0
Code Activity
Files
0a92a254512f5a1981d1505c70f528c24aa55659
nex/openspec/specs/frontend-obfuscation/spec.md
lanyuanxiaoyao 0a92a25451 feat: 前端生产构建添加代码混淆 
- 集成 vite-plugin-javascript-obfuscator 插件
- 配置中等偏高强度混淆策略（变量名、字符串、对象键、数字）
- 仅生产构建时启用，不影响开发体验
- 仅混淆业务代码，排除第三方库
- 不生成 Source Map
- 新增 frontend-obfuscation 规范
2026-04-23 18:23:07 +08:00

3.8 KiB
Raw Blame History

前端代码混淆

Purpose

在生产构建时对前端业务代码进行混淆处理，增加逆向成本，防止代码被轻易复制。

Requirements

Requirement: 生产构建时代码混淆

前端 SHALL 在生产构建时对业务代码进行混淆处理。

Scenario: 安装混淆依赖

  • WHEN 添加代码混淆功能
  • THEN 前端 SHALL 使用 bun 安装 vite-plugin-javascript-obfuscator 和 javascript-obfuscator 依赖
  • THEN 前端 SHALL NOT 使用 npm 或 pnpm 安装依赖

Scenario: 配置混淆插件

  • WHEN 配置 Vite 构建流程
  • THEN vite.config.ts SHALL 导入 vite-plugin-javascript-obfuscator
  • THEN 插件 SHALL 配置 apply: 'build' 仅在构建时生效
  • THEN 插件 SHALL 配置 include 仅包含业务代码（src//*.ts, src//.tsx, src/**/.js, src/**/*.jsx）
  • THEN 插件 SHALL 配置 exclude 排除 node_modules

Scenario: 变量名混淆

  • WHEN 生产构建执行
  • THEN 业务代码中的变量名 SHALL 被转换为十六进制形式（如 _0x2b3c）
  • THEN identifierNamesGenerator SHALL 配置为 'mangled-shuffled'

Scenario: 字符串混淆

  • WHEN 生产构建执行
  • THEN 业务代码中的字符串 SHALL 被编码为字符串数组
  • THEN stringArray SHALL 配置为 true
  • THEN stringArrayEncoding SHALL 配置为 ['base64']
  • THEN stringArrayRotate SHALL 配置为 true
  • THEN stringArrayShuffle SHALL 配置为 true
  • THEN stringArrayThreshold SHALL 配置为 0.75
  • THEN splitStrings SHALL 配置为 true
  • THEN splitStringsChunkLength SHALL 配置为 10

Scenario: 对象键混淆

  • WHEN 生产构建执行
  • THEN 业务代码中的对象键 SHALL 被混淆
  • THEN transformObjectKeys SHALL 配置为 true

Scenario: 数字混淆

  • WHEN 生产构建执行
  • THEN 业务代码中的数字 SHALL 被转换为表达式
  • THEN numbersToExpressions SHALL 配置为 true

Scenario: 调试保护

  • WHEN 生产构建执行
  • THEN 混淆代码 SHALL 禁用浏览器调试器
  • THEN debugProtection SHALL 配置为 true
  • THEN debugProtectionInterval SHALL 配置为 2000

Scenario: 禁用 console 输出

  • WHEN 生产构建执行
  • THEN 混淆代码 SHALL 移除所有 console 输出
  • THEN disableConsoleOutput SHALL 配置为 true

Scenario: 不混淆第三方库

  • WHEN 生产构建执行
  • THEN node_modules 中的代码 SHALL NOT 被混淆
  • THEN vendor chunks（React、TDesign、Recharts）SHALL 保持原有压缩状态

Scenario: 不生成 Source Map

  • WHEN 生产构建执行
  • THEN 构建产物 SHALL NOT 包含 Source Map 文件
  • THEN vite.config.ts 中 build.sourcemap SHALL 配置为 false

Scenario: 不启用控制流扁平化

  • WHEN 配置混淆选项
  • THEN controlFlowFlattening SHALL 配置为 false
  • THEN 前端 SHALL NOT 使用控制流扁平化混淆

Scenario: 不注入死代码

  • WHEN 配置混淆选项
  • THEN deadCodeInjection SHALL 配置为 false
  • THEN 前端 SHALL NOT 注入死代码

Scenario: 不启用自我保护

  • WHEN 配置混淆选项
  • THEN selfDefending SHALL 配置为 false
  • THEN 前端 SHALL NOT 启用自我保护机制

Scenario: 构建产物验证

  • WHEN 生产构建完成
  • THEN 构建产物 SHALL 通过功能测试
  • THEN 关键业务功能 SHALL 正常工作
  • THEN 页面 SHALL 正常渲染
  • THEN API 调用 SHALL 正常执行

Requirement: 开发模式不混淆

前端 SHALL 仅在生产构建时启用混淆，开发模式不受影响。

Scenario: 开发模式跳过混淆

  • WHEN 执行 vite dev 启动开发服务器
  • THEN 代码 SHALL NOT 被混淆
  • THEN 开发体验 SHALL 保持不变
  • THEN 热更新 SHALL 正常工作
View Git Blame Copy Permalink