なぜアップグレードが必要なのかというと、図にあるように、クラウドデスクトップ(踏み台マシン・リモートデスクトップに相当)のプロジェクトレビューは、おそらくnode16のバージョンをベースにスキャンされていると思われます。バージョンは 14 から 12 ですが、現在は package-lock.json のパッケージの依存関係を更新する方法 を非表示にしています。答え - Love Code Network です。バージョンを初期化すると親の依存関係にリセットされますが、興味深いのは、親の依存関係をアップグレードしても、子の依存関係を対応するバージョンにアップグレードできない場合があることです。クラウド デスクトップのベースになっている古いプロジェクトの依存パッケージ バージョンの多くは古すぎます。
実際、現在のプロジェクトを実行するたびに、npm のコード レビューで多くの問題があることがわかりますが、プロジェクトの動作には影響しません。これらのプロンプトは、古いクラウド デスクトップ プロンプトと同じです。プラグインはメンテナンスされなくなったため、使用し続けると潜在的な危険が存在したり、悪意のある攻撃を受ける可能性があります。私たちが単純に無視するたびに、
実際、これらのコンポーネントの脆弱性のほとんどは無関係な「偽の脆弱性」であり、攻撃を受けた後にプロジェクトの実行が遅くなる可能性があり、これは過剰修正を意味します。
ここで、npm Audit fix -f を直接実行して更新を強制しましたが、非常に多くのエラーが見つかりました。npm が提供する解決策は、依存パッケージの最上位バージョンに近い隣接バージョンに直接アップグレードすることです。Webpack 3 は 5 にアップグレードされました。文言を変更する方法はありますか。ノードのバージョンが 17 以降かどうかわかりません。そのため、当事者 A は、対応するバージョンのノード パッケージをクラウド デスクトップにインストールして対応する必要があるため、プロジェクトは全然走れない。。
Webpack を直接アップグレードすると、脆弱性の少なくとも半分は修正されると推定されています。これは、Webpack のアップグレードにより、Webpack 内の多くのサブ依存関係が非推奨または更新されるため、多くの問題が解決されるためです。 webpack には、node-sass および Sass-loader が伴う必要があり、正常に実行するには、他の依存関係を対応するバージョンにアップグレードする必要があります。
その後、オンラインで webpack3 upgrade 5 の記事を見つけ、その記事を段階的にたどって、それが機能するかどうかを確認しました。落とし穴が多すぎました。このプロジェクトは何年も前のプロジェクトであり、多くの構成はコメントされていませんでした。オンライン記事に従ってください。 、プロジェクトを実行できませんでした、いいえ、何が問題だったのかわかりません、このままでは時間コストが高すぎるため、以前に拒否したサブ依存関係を強制的に変更する解決策を使用することにしました、そしてまだやり直す必要がありますこの方法では、最終的には 7 ～ 8 個が残り、アップグレードする必要がありますが、バージョンによってのみ解決できる脆弱性がありますが、これはプロジェクト チームの期待に応えました。
元の 28 のコンポーネントの脆弱性は、現在修復できない 6 つのコンポーネントの脆弱性があり、残りの 6 つのコンポーネントの脆弱性は、そのうちの 4 つは最新バージョンの依存関係です。推奨される解決策によれば、他の方法を使用することですが、これには、サブ依存関係の深いセットでは、親依存関係のソース コードには独自の記述方法があるため、サブ依存関係を直接置き換えることはできません。また、初期化中に親の依存関係が必要とするバージョンにリセットされるため、ロック ファイルに直接アクセスして子の依存関係を変更することはできません。親の依存関係をアップグレードしても、子の依存関係の問題は解決されない可能性があります。親の依存関係のソースコードの記述方法に依存します。すでに多くの場所でアップグレードを試みましたが、インターネット上で見つけることができないエラーが次々と発生し、プロジェクトの開始に失敗したことがわかります。強制的なアップグレードはプロジェクトの失敗を容易に引き起こす可能性があることを示しています。
方法：
package.json ファイル内のスクリプト、依存関係、および evDependency と同じレベルで解決策を追加し、強制的にアップグレードするサブ依存関係の目的のバージョンを書き込み、 script に構成を追加して、最終的に目標を達成します"preinstall": "npx force-resolutions"，最后像启动项目一样使用npm run preinstall运行下载，。
"resolutions": {
"lodash.template": "4.5.0",
"eventsource": "1.1.1",
"lodash": "4.17.21",
"zrender": "5.2.1",
"minimist": "0.2.2",
"node-forge": "1.3.0",
"ansi-html": "0.0.8",
"uuid": "2.0.0",
"tar": "4.4.18",
"glob-parent": "5.1.2",
"debug": "3.1.0",
"scss-tokenizer": "0.4.3",
"minimatch": "3.0.5",
"trim-newlines": "3.0.1",
"websocket-extensions": "0.1.4",
"decode-uri-component ": "0.2.1",
"axios": "0.26.0",
"postcss": "7.0.36",
"follow-redirects":"1.14.8",
"clean-css":"4.1.11",
"browserslist":"4.16.5",
"yargs-parser":"5.0.0",
"sockjs":"0.3.20"
},その後、スキャン タスク全体でプロジェクトを再スキャンしたところ、脆弱性が実際に解消されたことがわかりました。
バージョン番号はオンライン リンクに置き換えられます
"resolutions": {
"ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz"
}依存パッケージのオンライン リンクを見つける方法:
npm view ansi-html-community dist.tarball --registry=https://registry.npmjs.org/
図に示すように、バージョンを指定してオンライン リンクを取得できます。
https://stackoverflow.com/questions/15806152/how-do-i-override-nested-npm-dependency-versions
依存関係の問題に関しては、実際に package.lock.json を手動で変更するという方法もありますが、この方法は元のコードを手動で監査して元に戻すのと同じで、プロジェクトの依存関係パッケージのレビューを回避できます。
また、私が使用した package.json ファイルは、解決策の "name": "5.0.0" を "name":" に変更しました。.0.tgz「オンライン リンクを使用するこの方法は、コード レビューを避けるためでもあります。これまでのところ、脆弱性レビューで見つかった問題はすべて解決されています。
関連する依存関係のグローバル検索に移動し、一部の依存パッケージのバージョンがオンラインの tgz リンクではなくバージョン番号のままであることが判明した場合は、この時点でバージョン番号を手動で変更する必要があります。
package.json ファイルの内容全体
{
"name": "banking-regulatory",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js",
"host": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js --host 此处需手动填写本地ip",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"build": "node build/build.js",
"preinstall": "npx force-resolutions"
},
"dependencies": {
"@types/echarts": "0.0.13",
"ajv": "^6.12.6",
"awe-dnd": "^0.3.4",
"axios": "^0.26.0",
"babel-polyfill": "^6.26.0",
"base64-js": "^1.5.1",
"echarts": "^4.9.0",
"echarts-liquidfill": "^2.0.6",
"echarts-wordcloud": "^1.1.3",
"element-theme": "^2.0.1",
"element-ui": "^2.15.12",
"es6-promise": "^4.2.8",
"jschardet": "^3.0.0",
"moment": "^2.29.4",
"node-sass": "^4.14.1",
"qs": "^6.10.1",
"sass-loader": "^7.3.0",
"sortablejs": "^1.14.0",
"vue": "^2.6.11",
"vue-gemini-scrollbar": "^2.0.1",
"vue-hot-reload-api": "^2.3.4",
"vue-js-toggle-button": "^1.3.3",
"vue-print-nb": "^1.7.4",
"vue-router": "^3.5.2",
"vuedraggable": "^2.24.3",
"vuex": "^3.4.0",
"webpack-dev-server": "^2.11.5"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.5",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.4.2",
"compression-webpack-plugin": "^1.1.12",
"copy-webpack-plugin": "^4.6.0",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.11",
"element-theme-chalk": "^2.15.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.4.4",
"jest-serializer-vue": "^0.3.0",
"less": "^3.13.1",
"less-loader": "^4.1.0",
"nightwatch": "^0.9.21",
"node-notifier": "^5.4.5",
"optimize-css-assets-webpack-plugin": "^3.2.1",
"ora": "^1.2.0",
"portfinder": "^1.0.28",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.6",
"postcss-url": "^7.3.2",
"rimraf": "^2.7.1",
"sass-resources-loader": "^2.2.3",
"selenium-server": "^3.141.59",
"semver": "^5.7.1",
"shelljs": "^0.8.5",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.5.8",
"vue-hot-reload-api": "^2.3.4",
"vue-jest": "^1.0.2",
"vue-loader": "^13.7.3",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^3.12.0",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-merge": "^4.2.2"
},
"resolutions": {
"lodash.template": "4.5.0",
"eventsource": "1.1.1",
"lodash": "4.17.21",
"zrender": "5.2.1",
"minimist": "0.2.2",
"node-forge": "1.3.0",
"ansi-html": "0.0.8",
"uuid": "2.0.0",
"tar": "4.4.18",
"glob-parent": "5.1.2",
"debug": "3.1.0",
"scss-tokenizer": "0.4.3",
"minimatch": "3.0.5",
"trim-newlines": "3.0.1",
"websocket-extensions": "0.1.4",
"decode-uri-component ": "0.2.1",
"axios": "0.26.0",
"postcss": "7.0.36",
"follow-redirects":"1.14.8",
"clean-css":"4.1.11",
"browserslist":"4.16.5",
"yargs-parser":"5.0.0",
"sockjs":"0.3.20",
"ms":"https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
},
"engines": {
"node": ">= 12.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
誰かの新しいプロジェクトの開始に失敗した場合は、解像度関連のコンテンツを削除して npm を再インストールし、淘宝網のイメージを使用してみることをお勧めします。それでも動作しない場合は、node_modules パッケージを送信して、npm を実行してください。 npmの後にdev startコマンドを実行してpreinstallを実行してみてください
プロジェクトの依存関係を管理するその他の方法には次のようなものがあります。興味がある場合は検索してください。