【TraeCode 上手记】我用 TraeCode 把一个 Vue 2 老项目的 48 个安全漏洞清到 3 个

我这次想解决什么

安全扫描报告扔过来一份文档,列了 48 个 npm 依赖漏洞,横跨高危、中危、低危。项目是一个 Vue 2.7 + Element UI + Vue CLI 5 的前端老项目,线上跑了很久,不敢大动。

文档里的"建议方案"写得很干脆——升级 Vue 3。但这个项目深度依赖 Element UI(不是 Element Plus), Vuex 3、Vue Router 3,整个生态都是 Vue 2 的。真升 Vue 3 等于重写项目,不现实。

所以我想做的事很明确:在不升级 Vue 3 的前提下,把能修的漏洞全部修掉,把握不住的列出来人工决策。

我是谁,为什么这件事对我重要

我是有几年经验的前端开发,负责维护几个线上运行的 Vue 2 老项目。安全漏扫是合规要求,每个季度都会跑,每次看到报告都头疼——npm 依赖树太深,手动一个一个查 CVE 修复版本要花一整天,而且很多漏洞藏在间接依赖里,你根本不知道哪个包引入的。

以前我都是硬啃 npm audit 的输出,逐个 Google 搜 CVE,然后到 GitHub Advisory 看修复版本,再回来试 override。这次想试试 TraeCode 能不能帮我把这个流程缩短。

我是怎么把 TraeCode 慢慢用顺的

第一步:让它先分析全貌

我把漏洞文档上传给它,第一句话就说清楚:「不要看文档里的备注和解决方案,里面让我升 Vue 3,不靠谱,用 Vue 2 能解决的都解决」。

它没急着改代码,而是先跑了一遍 npm audit,把 48 个漏洞逐个分类:

  • 哪些是误报(实际已安装修复版本)

  • 哪些可以通过 npm overrides 安全修复

  • 哪些是间接依赖被锁定无法 override

  • 哪些确实没有 Vue 2 兼容的修复版本

这一步很关键——不是所有漏洞都能修,先搞清楚边界在哪

第二步:批量 override

确定了可以安全 override 的组件后,它直接改 package.json:

"overrides": {
  "cross-spawn": "7.0.6",
  "serialize-javascript": "7.0.5",
  "uuid": "11.1.1",
  "node-fetch": "2.7.0",
  "tmp": "0.2.7",
  "minimist": "1.2.8",
  "postcss": "^8.5.23"
}

一轮下来,48 降到 18。每改完一轮就 npm run build 验证一遍,确保没搞坏项目。

第三步:处理棘手的

到后面遇到几个硬骨头:

xlsx——npm 上的版本到 0.18.5 就没了,而且就是有漏洞的那个版本。TraeCode 查到 SheetJS 官方把修复版放到了自己的 CDN 上,于是用 tarball URL 做 override:

"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"

vue 本身——有个 ReDoS 漏洞,官方只在 Vue 3 里修了。TraeCode 找到一个社区维护的 Vue 2 安全分支(vue@2.7.16-security.1),通过 git tarball 安装。不过后来我考虑到这是个人维护的分支,不太敢用,让它撤销了,接受了这 3 个低危漏洞。

the-file-preview——这个组件内部打包了有漏洞的 pdfjs-dist、x-data-spreadsheet、xlsx,全是预构建的 UMD 文件,override 根本够不到。TraeCode 分析了依赖关系后建议替换组件,我同意了,它直接用 @vue-office/docx@vue-office/excel@vue-office/pdf 写了个替代组件,改了 main.js 的注册方式,构建通过。

第四步:踩坑和修复

换完组件跑 npm run dev 报了 crypto is not defined——serialize-javascript 7.0.5 用了 Web Crypto API 的全局 crypto,但 vue-cli-service 的运行环境没暴露。TraeCode 在 vue.config.js 顶部加了一行 polyfill:

if (typeof globalThis.crypto === 'undefined') {
  globalThis.crypto = require('crypto').webcrypto
}

搞定,dev server 正常启动。

哪一步让我觉得"原来这样用会更顺"

是它每次改完都会自动跑一遍构建验证。不是改完就完事,而是改完→install→build→确认没坏→继续下一步。这个闭环让它改的东西可信,不用我每次手动验证。

另外在把握不住的时候它会主动问我。比如 echarts 漏洞,它查了项目代码发现没用到触发漏洞的 lines series,跟我说"本项目中不可利用",然后问我要不要升级。这种给建议而不是替我做决定的分寸感很重要。

我最后做成了什么,想给后来的人留一句什么建议

最终结果:48 个漏洞 → 3 个低危(都是 Vue 2 本身的 ReDoS,不升级 Vue 3 无法修复)。构建正常,dev server 正常,生产打包正常。

修了什么:

  • 7 个组件通过 npm overrides 修复

  • quill 降级到 2.0.2(漏洞仅影响 2.0.3)

  • echarts 升级到 6.x

  • webpack-dev-server scoped override 到 5.2.6

  • xlsx 通过 SheetJS CDN 安装修复版

  • the-file-preview 整体替换为 vue-office

没修的:Vue 2 本身的 3 个低危 ReDoS,官方只支持升级 Vue 3 修复,接受了这个风险。

给后来人的建议:用 TraeCode 修漏洞,最大的价值不是它帮你改 package.json——那部分你自己也能查。真正的价值是它能快速判断每个漏洞的可修复性边界:哪些能 override、哪些是间接依赖被锁死的、哪些需要替换组件、哪些确实修不了。这个判断你要自己做可能要查半天,它几分钟就能给你一个分类清单。但前提是你要把项目约束说清楚——我用 Vue 2 不升级、构建必须通过、社区分支我不敢用——它才会在这些约束内找最优解,而不是给你一个"正确但没法落地"的方案。

下面是结果输出效果图(因为是依赖升级所以全程权限我都放的很大不涉及代码修改就放心给trae code操作了):

接下来是使用了一个wps的文件预览功能被扫描出高危问题 我用vue-office替代了效果如下:




直接吧依赖插件修改了 以前是引入的依赖直接使用的 用vue-office之后 做了些处理

贴原图sca组件扫描漏洞图:

接下来是使用trae code解决之后的漏洞图

1 个赞

老前端项目真的不是有古法编程经验的前端开发工程师,真的用AI乱动会出很多问题。

1 个赞