如何修复Laravel+Inertia+Vue3项目中npm audit的5个高危漏洞

我有一个基于Laravel、Inertia、Vue3技术栈的项目，运行npm install时出现5个高危漏洞。执行npm audit后得到以下检测报告：

# npm audit report

glob-parent  <5.1.2
Severity: high
glob-parent before 5.1.2 vulnerable to Regular Expression Denial of Service in enclosure regex
fix available via `npm audit fix`
node_modules/watchpack-chokidar2/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/watchpack-chokidar2/node_modules/chokidar
    watchpack-chokidar2  *
    Depends on vulnerable versions of chokidar
    node_modules/watchpack-chokidar2
      watchpack  1.7.2 - 1.7.5
      Depends on vulnerable versions of watchpack-chokidar2
      node_modules/vue-share-buttons/node_modules/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/vue-share-buttons/node_modules/webpack

5 high severity vulnerabilities

To address all issues, run:
  npm audit fix

虽然这些漏洞不影响项目正常运行，但我想修复这个提示。多次执行npm audit fix后问题依然存在，我的package.json配置如下：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-loader": "^16.8.3"
    },
    "dependencies": {
        "@inertiajs/vue3": "^1.0.0",
        "@tabler/icons-vue": "^2.1.2",
        "@tinymce/tinymce-vue": "^4.0.7",
        "@vueform/multiselect": "^2.5.1",
        "maska": "^1.5.0",
        "moment": "^2.29.4",
        "sass": "^1.55.0",
        "vue": "^3.2.29",
        "vue-chart-3": "^3.1.2",
        "vue-easy-lightbox": "^1.8.2",
        "vue-meta": "^3.0.0-alpha.10",
        "vue-recaptcha": "^2.0.3",
        "vue-share-buttons": "^1.0.4",
        "vue-sweetalert2": "^5.0.2",
        "vue3-carousel": "^0.1.40"
    }
}

问题根源 #

漏洞来自vue-share-buttons的嵌套依赖链：vue-share-buttons → webpack → watchpack → watchpack-chokidar2 → chokidar → glob-parent <5.1.2。npm audit fix无法自动修复是因为这些是嵌套依赖，主依赖vue-share-buttons未更新其依赖版本。

修复方案 #

方案1：升级vue-share-buttons到最新版本 #

先检查该包是否有更新版本，新版本可能已修复依赖问题：

npm update vue-share-buttons

更新后重新执行npm audit验证漏洞是否消失。

方案2：使用npm-force-resolutions强制修复嵌套依赖 #

1. 安装npm-force-resolutions作为开发依赖：

npm install npm-force-resolutions --save-dev

2. 在package.json中添加resolutions字段和preinstall脚本：

{
  "private": true,
  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },
  "resolutions": {
    "glob-parent": "5.1.2"
  },
  "devDependencies": {
    "axios": "^0.25",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "vue-loader": "^16.8.3",
    "npm-force-resolutions": "^0.0.10"
  },
  "dependencies": {
    "@inertiajs/vue3": "^1.0.0",
    "@tabler/icons-vue": "^2.1.2",
    "@tinymce/tinymce-vue": "^4.0.7",
    "@vueform/multiselect": "^2.5.1",
    "maska": "^1.5.0",
    "moment": "^2.29.4",
    "sass": "^1.55.0",
    "vue": "^3.2.29",
    "vue-chart-3": "^3.1.2",
    "vue-easy-lightbox": "^1.8.2",
    "vue-meta": "^3.0.0-alpha.10",
    "vue-recaptcha": "^2.0.3",
    "vue-share-buttons": "^1.0.4",
    "vue-sweetalert2": "^5.0.2",
    "vue3-carousel": "^0.1.40"
  }
}

3. 删除现有依赖文件并重新安装：

rm -rf node_modules package-lock.json
npm install

4. 执行npm audit确认漏洞修复。

方案3：替换vue-share-buttons依赖 #

若上述方案无效，可考虑替换为其他功能类似的组件（如vue-social-sharing），彻底规避该依赖带来的漏洞问题。

内容的提问来源于stack exchange，提问作者ASHafizullah