一个三方依赖产生的漏洞，差点让我丢了本月绩效！！！

起因

• 某天的早上我悠哉的来到了工位，吃起了早餐并接了一杯水，刚准备大干一场的时候，主管来了。
• 张口就是：小刘啊 你这个月的绩效要被扣没了啊！
• 我很是不解啊 难道我犯啥错了 上次忘了冲厕所？ 偷看隔壁工位的测试妹子？ 这也不至于啊！
• 于是问： 刘总 什么原因 要扣我的绩效？ 刘总答曰：你上次更改的版本发布后 出现了一个漏洞 说罢丢了张图给我

image.png

• 我前思后想 后思前想 都没印象代码里有这东西😳
• 于是说： 刘总 这个不说百分之百 与我无关 至少百分之九十与我不搭边，这项目我刚参与 一共就写了两行代码。我先排查下 完了 给你答复。
• 刘总说： 好 那这个就交给你了，顺便把漏洞修复了😉 我找人事给你重新核算下绩效。
• 感觉有点不对啊 这大哥就是想让我改bug吧！！！！！！ 算了 先看问题。

漏洞原因

• 首先 通过 webstorm 全局搜索了项目文件并没有 图片中提到的 owen23355@gmail.com trash@rubaxa.org 字段。
• 然后仔细看图片发现指明了是那个文件，幸好之前的dist文件没有删除，打开对应文件发现确实存在owen23355@gmail.com trash@rubaxa.org

image.png

• 看样子像是三方依赖中的，于是再次打开 webstorm 搜索 证实是插件中存在

image.png

• 继续确认后发现 vuedraggable 这个插件依赖了 "sortablejs": "^1.10.1" 是一个vue中的拖动插件 相关功能开发完半个月了快🙄

image.png

• 既然确定了问题 那就好解决了！

解决漏洞

分析漏洞

• 看漏洞描述很清楚了，删除相关内容就可以 注释里的内容 也不涉及代码逻辑，那怎么解决呢？
• 本地修改 node_modules 好像不太好 同事更新依赖的话 漏洞依然存在。
• 但是细想这种问题 一定有其他人碰到过，是有解决方案的。在经过搜索后 发现答案都指向了 patch-package 这个插件

patch-package 是什么？

• patch-package 可以理解为 为npm 插件 打一个补丁，这个补丁可以用于修改 node_modules 文件中的内容，且修复完成后 重新下载依赖不会被还原。
• 插件npm 首页由详细用法介绍。目前看很合适 就用它了

漏洞的解决

首先安装 patch-package

npm i patch-package
复制代码

修改 node_modules 中需要修改的文件（一定要在三确认 慎重！！！！！）。

执行命令生成补丁

• 可以使用yarn or npm。需要注意的是 使用 npx（npm > 5.2）

// 下面的 package-name 是指修改的包名
// yarn 
yarn patch-package package-name

// npm 
npx patch-package package-name
复制代码

• 命令支持一些选项

image.png

• 执行完成会生成一个目录 存放补丁文件 默认在根目录下生成 patches 目录

image.png

• 补丁文件类似git 记录了 删除 新增 等操作

image.png

最后一步 添加npm执行钩子

• 在 package.json 文件的 scripts中

"postinstall": "patch-package"
复制代码

image.png

到这里就已经算是解决了问题 为什么说是算是呢？ 我们还要做测试！！！！！

测试验证是否解决问题

• 项目打包后 dist 目录中的 assets/js 目录下可能存在很多js文件 取决于配置。
• 我的配置会生成很多js文件。而我们并不知道那个文件中会存在 owen23355@gmail.com trash@rubaxa.org
• 我如果想知道 文件中是否存在 指定字符 我就要遍历这个文件夹的每一个文件 然后进行判断。

开始做

• 我们可以用代码 用工具，但是我找到使用代码或者工具可以直接使用的 于是我把他们组合了😁。
• 使用 shell 遍历文件夹 将js文件更改为 txt 文件（后边使用的工具 js文件 不太好使）

@echo off 
SETLOCAL ENABLEDELAYEDEXPANSION 
::遍历文件夹下的js,并把后缀改成txt 
for %%i in (*) do ( 
    echo %%i 
    rename *.js *.txt 
) 
pause
复制代码

image.png

• 保存为 .bat 文件 然后在文件夹中执行 会遍历文件夹 更改所有 .js 为 .txt
• 然后 下载 bbdoc

image.png

• 支持文档内容搜索 这不就是我想要的吗

image.png

通过搜索发现并没有 owen23355@gmail.com trash@rubaxa.org 至此问题解决，打包更新！！！