Vue项目绿盟RSAS漏扫，检测到目标站点存在javascript框架库漏洞，JS 库版本太低，要求升级 YUI，过程总结
背景
公司信安部门对项目进行安全扫描，查出一些漏洞，其中有一项要求升级 javascript 框架库（如图）：
吓得我以为让我把 Vue2 升级成 Vue3。
经过一些调试之后才知道，是webpack打包之后的工具包中依赖的 YUI 是存 在安全漏洞的版本。
漏洞定位
信安同事一开始只给我上面的图，我根本不知道是哪个包的版本需要升级。
我只能用漏洞标题去百度，搜到了一些同样扫出漏洞的情况，多是在说下面几个工具：
- jquery 我用了已经升级到最新的了
- js-cookie 文章说改存 localStorage（我改了但是还是存在漏洞）
- jsencrypt 事实证明确实是这个，但没有具体说明原因
查到这里，同事也发来更详细的说明：
YUI:2.9.0 (Link) https://www.cvedetails.com/cve/CVE-2012-5883/
于是我就在打包后的代码中搜索 YUI（不区分大小写，不进行全字匹配），果然搜到了一段注释：
确认了这个事情，接下来就容易多了。这明显不是我的代码，那就在 node_modules 中继续搜索，最终在 jsencrypt 下查到了这段注释：
YUI2 的版本漏洞
在网上搜索关于 YUI 2.9.0 漏洞的信息：搜索结果
结果中也包含扫描工具提供的漏洞地址，该漏洞指出：
在 YUI 2.8.0 - 2.9.0 中的 Flash 组件基础机构中存在 XSS 漏洞，远程攻击者可以通过 SWF 程序（YUI SWF 提供了一种在网页中嵌入 Adobe Flash Player 的标准方法）注入任意 Web 脚本或 HTML。
现在我们知道 YUI 2.9.0 这个版本确实有安全隐患，BUG 我们真的有这个漏洞么 ？
YUI 在代码中的实际应用
官方介绍：YUI 是一个免费的、开源的 JavaScript 和 CSS 库，用于构建丰富的交互式 web 应用程序。
不太严谨的说，YUI 就是类似 jquery 的一个工具库。
然后看看 jsencrypt 为啥要使用它呢？
从 node_modules\jsencrypt\lib\lib\jsrsasign\yahoo.js 的代码看，整个文件到处的只是一个包含 lang.extend 方法的对象。
lang.extend 方法模拟类的继承方式，从一个对象上扩展出领域给对象。
也就是说 jsencrypt 仅仅使用了 YUI 的 lang.extend 方法，碰都没碰 YUI SWF。
这么看尽管代码用的是 2.9.0 版本的一部分，但是这个版本的安全漏洞根本影响不到项目。
解决办法
现在可以总结出：
- 漏洞的原因是 YUI 2.9.0 版本存在安全漏洞
- 安全软件扫描的依据是注释中包含 yui 的版本号
那其实只要解决掉 YUI 版本号的这块注释即可。
方法一：使用压缩后的文件
网上搜的办法大部分是使用压缩后（不含注释）的文件：node_modules\jsencrypt\bin\jsencrypt.min.js
// 旧的引入方式 import JSEncrypt from 'jsencrypt' // 新的引入方式 import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
方法二：优化打包配置，删除注释
我的办法是，在打包环节删除注释，全局 AOE 干掉所有注释，解决注释引发的所有问题。那么如何清除掉这些注释呢？参考官方文档配置如下
TerserWebpackPlugin | webpack 中文文档
看了下源码是这么写的
optimization: { ... minimizer: [ { options: { test: /\.m?js(\?.*)?$/i, chunkFilter: () => true, warningsFilter: () => true, extractComments: false, sourceMap: false, cache: true, cacheKeys: defaultCacheKeys => defaultCacheKeys, parallel: true, include: undefined, exclude: undefined, minify: undefined, terserOptions: { output: { // 默认保留了 @license 注释 comments: /^\**!|@preserve|@license|@cc_on/i }, compress: { ...}, mangle: { ...} } } } ]); }
似乎直接改output就行了于是试了一下
vue.config.js增加配置
chainWebpack(config) { // 删除注释 config.optimization.minimizer('terser').tap(args => { // 直接修改 terserOptions 下的属性值，保留原有配置 // 这里访问 terserOptions 的时候并没有 output，访问不到 output.comments 需要直接赋值 args[0].terserOptions.output = { comments: false, } return args }) }
但是这种方式我试了不行而且抛出了异常
config.optimization.minimizer(...).tap is not a function
于是又看到有一个这种插件 terser-webpack-plugin、uglifyjs-webpack-plugin
1、安装 terser-webpack-plugin
yarn add terser-webpack-plugin -D
2、修改 vue.config.js 文件
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
...
configureWebpack: {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
output: {
comments: false
}
},
extractComments: false
})
]
}
},
...
}
1. 安装uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin -D
2. vue.config.js里添加配置
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') //引入插件
module.exports = {
configureWebpack: {
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
// 删除注释
output: {
comments: false
},
// 删除console debugger 删除警告
compress: {
drop_console: true, //console
drop_debugger: false,
pure_funcs: ['console.log'] //移除console
}
}
})
]
}
}
}
用插件的两种方式我都试了可以解决问题、成功去掉了注释
参考文档：
https://blog.csdn.net/qq_45585640/article/details/126402126
https://blog.csdn.net/u012961419/article/details/130016341
