如何修復@vue/cli 漏洞？

Question

我有 vuejs-3 項目，我正在尋找 0 個漏洞。 當我執行 npm 安裝時，當前版本節點和 npm 出現 48 個漏洞。即使我嘗試 npm audit fix --force 問題仍然相同。 有誰可以幫助我嗎？

C:\Users\achalapa\git\cnsr-odrplat-wcm-cld-vue\mcafee-consumer-wcm-cld-vue.lib> npm install

-npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained

-npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained

-npm WARN deprecated har-validator@5.1.5: this library is no longer supported

-npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.

-npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.

-npm WARN deprecated html-webpack-plugin@3.2.0: 3.x is no longer supported

-npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

-npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

-npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained

-npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'

-added 923 packages, and audited 1694 packages in 4m

-105 packages are looking for funding
  run `npm fund` for details

-48 moderate severity vulnerabilities

-To address issues that do not require attention, run:
  npm audit fix

-To address all issues (including breaking changes), run:
  npm audit fix --force

48 當我們添加以下軟件包時會出現漏洞

*"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-typescript": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "4.5.13",*

這樣可以繼續嗎？ 這對我的項目有害嗎？

package.json

{
  "name": "mcafee-consumer-wcm-cld-vue.lib",
  "version": "1.0.0",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "bundle": "set NODE_ENV=production && npm run lint && webpack --config webpack.dlp.js --progress --mode=production",
    "bundle-dev": "set NODE_ENV=development && npm run lint && webpack --config webpack.dlp.js --progress --mode=development",
    "lint": "eslint . --ext .ts,.js --ignore-pattern src/**/*.d.ts",
    "lint-and-fix": "eslint . --ext .ts --fix"
  },
  "dependencies": {
    "@vuelidate/core": "^2.0.0-alpha.18",
    "bootstrap": "^5.0.1",
    "core-js": "^3.13.0",
    "intersection-observer": "^0.12.0",
    "vue": "^3.0.0",
    "vuex": "^4.0.0-0",
    "whatwg-fetch": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-arrow-functions": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@babel/preset-typescript": "^7.13.0",
    "@types/bootstrap": "^5.0.15",
    "@types/core-js": "^2.5.4",
    "@types/lodash": "^4.14.170",
    "@typescript-eslint/eslint-plugin": "^4.25.0",
    "@typescript-eslint/eslint-plugin-tslint": "^4.25.0",
    "@typescript-eslint/parser": "^4.25.0",
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-typescript": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "4.5.13",
    "@vue/compiler-sfc": "^3.0.11",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-loader": "^8.2.2",
    "babel-preset-typescript-vue3": "^2.0.12",
    "clean-webpack-plugin": "^3.0.0",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-jsdoc": "^35.0.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.9.0",
    "fork-ts-checker-webpack-plugin": "^3.1.1",
    "html-webpack-plugin": "^5.3.1",
    "prettier": "^2.3.0",
    "terser-webpack-plugin": "^5.1.2",
    "ts-loader": "^9.2.2",
    "tslint": "^6.1.3",
    "typescript": "^4.3.2",
    "typescript-tslint-plugin": "^1.0.1",
    "vue-loader": "^16.2.0",
    "webpack": "^5.37.1",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.7.0",
    "webpack-merge": "^4.1.4"
  }
}

Answer 1

如果所有漏洞都僅來自這 4 個軟件包 - 即。 vue/cli，而不是您可以放心地忽略它，因為在開發和構建期間，執行此代碼的唯一位置是在您自己的機器上。 如果我們同意我們信任 Vue CLI 的創建者，他們不會以對客戶（使用 Vue CLI 的開發人員）有害的方式使用這些易受攻擊的包，我們可以放心地忽略這些警告，因為這些包中的任何代碼都不會包含在應用程序包....

你感興趣的只是 vuln。 package.json的dependencies項部分中包含的包的數量，因為這是將使其成為最終應用程序包的代碼，並將由我們的用戶/客戶下載和執行

請改用此命令： npm audit --only=prod

Answer 2

npm prune為我工作！

我有一個無關的 package 安裝了npm install @vue/cli -g稱為subscriptions-transport-ws不再維護並使用了一堆已棄用的軟件包。

修剪后，我檢查並使用npm ls subscriptions-transport-ws消失了。 我也沒有弱點了。

Answer 3

對於從@vue/cli收到漏洞警告的任何人：

@vue/cli現在處於維護模式，建議使用create-vue創建項目

從他們的網站：

⚠️ Vue CLI 處於維護模式！

對於新項目，現在推薦使用 create-vue 搭建基於 Vite 的項目。 另請參閱 Vue 3 工具指南以獲取最新建議。

$ npm create vue@3

這應該正確處理 npm 審計警告，此時你應該沒有來自 vue 的警告。

Answer 4

如果是這樣，當您嘗試創建項目時是否會發生這種情況，請檢查 windows 中的系統環境變量，我的問題是只添加了一個路徑但您需要兩個路徑。 路徑下“YourUser”的用戶變量下的一個。

C:\Program Files \nodejs\

系統變量下的第二個路徑也在路徑下

C:\Program Files \nodejs\

這解決了我的問題，希望它有幫助！