Why do you need to upgrade, as shown in the picture, the project review of cloud desktop (equivalent to bastion machine-remote desktop) is probably scanned based on node16 version. Originally, we bypassed the large-scale update by downgrading the version from 14 to 12, but now we hide How to update the dependency relationship of a package in package-lock.json Answer - Love Code Network , and you can't directly go to the lock to modify the child dependency, because it will be reset to the parent dependency when it is initialized Version, but the interesting thing is that even if you upgrade the parent dependency, you may not be able to upgrade the child dependency to the corresponding version. I don’t know what standard the cloud desktop scans based on. Many dependent package versions of old projects are too old.
In fact, every time we run the current project, we can find that there are many problems in the code review of npm, but it does not affect the operation of the project. These prompts are the same as the cloud desktop prompts that these old plug-ins are no longer maintained, and there may be hidden dangers in continuing to use them. or be attacked maliciously. Every time we simply ignore,
In fact, most of these component vulnerabilities are irrelevant 'false vulnerabilities' that may cause the project to run slowly after being attacked, which means overcorrection.
Now I directly run npm audit fix -f to force the update, and found so many errors, the solution given by npm is to directly upgrade to the adjacent version close to the highest version of the dependent package. Webpack 3 has been upgraded to 5. Is there any way to change the wording, and I don’t know if the version of node is 17 or higher, so Party A has to install the corresponding version of the node package on the cloud desktop to accommodate us, so the project can’t run at all. .
It is estimated that if you directly upgrade webpack, at least half of the vulnerabilities will be fixed, because with the upgrade of webpack, many sub-dependencies in it are deprecated or updated, so many problems can be solved, but the upgrade of webpack must be accompanied by node-sass and Sass-loader and other dependencies must be upgraded to the corresponding version to run normally.
Then I went online to find webpack3 upgrade 5 articles, and followed the article step by step to see if it worked. There were too many pitfalls. This project was a project many years ago, and many configurations were not commented. Following the online articles, the project could not run, no Knowing what went wrong, the time cost is too high if it goes on like this, I decided to use the solution of forcibly modifying sub-dependencies that I rejected before, and I still have to go around this way, although there will be 7-8 left in the end that must be upgraded. Vulnerabilities that can only be resolved depending on the version, but this has met the expectations of our project team.
The original 28 component vulnerabilities, now there are 6 component vulnerabilities that cannot be repaired, the remaining 6 component vulnerabilities, four of which are dependencies of the latest version, according to the recommended solution is to use other methods, but this is embedded With a deep set of sub-dependencies, it is impossible to directly replace the sub-dependencies, because the source code of the parent dependencies has its own way of writing. And you can't directly go to the lock file to modify the child dependencies, because it will be reset to the version required by the parent dependency during initialization. Even if you upgrade the parent dependency, the problem of the child dependency may not be solved. It depends on the way the source code of the parent dependency is written. In many places I have already tried to upgrade, but the project failed to start because of one error after another that cannot be found on the Internet. It can be seen that a forced upgrade can easily cause the project to fail.
method:
Add resolutions at the same level as scripts, dependencies, and evDependencies in the package.json file, write in the desired version of the sub-dependencies that you want to force upgrade, add configuration"preinstall": "npx force-resolutions"，最后像启动项目一样使用npm run preinstall运行下载， in scripts , and finally achieve the goal.
"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"
},The entire scan task then re-scanned the project and found that the vulnerability had indeed disappeared.
The version number is replaced by an online link
"resolutions": {
"ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz"
}How to find online links for dependent packages:
npm view ansi-html-community dist.tarball --registry=https://registry.npmjs.org/
As shown in the figure, we can specify the version to get the online link
https://stackoverflow.com/questions/15806152/how-do-i-override-nested-npm-dependency-versions
Regarding the dependency problem, manually modifying package.lock.json can indeed be tried, but this method is just like when you manually audit the original code. Then change it back, but it can indeed escape the project dependency package review.
And the package.json file I used changed the "name": "5.0.0" to "name":" in the resolutions. https://registry.npmjs.org/yargs-parser/-/yargs-parser -5.0.0.tgz "This way of using online links is also to avoid code review. So far, all the problems found in the vulnerability review have been cleared up.
When we go to the global search for related dependencies and find that some dependent package versions are still version numbers instead of online tgz links, then we have to manually change the version number at this time
The entire content of the package.json file
{
"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"
]
}
If someone’s new project fails to start, it is recommended to delete the resolution-related content and re-npm install, and try using the Taobao image. If it still doesn’t work, then send him your node_modules package, and execute the npm run dev start command after npm run preinstall try
Other methods of managing project dependencies include the following. If you are interested, you can search for them