Modifique la versión de subdependencia en el paquete dependiente y las vulnerabilidades detectadas por el análisis de seguridad del proyecto front-end: el proceso de solución

10d3eb7876c44b45b33182cc10c7136d.png

fc518f9d6a60491bb557e4dca5ded1f8.png

¿Por qué necesita actualizar?, como se muestra en la imagen, la revisión del proyecto del escritorio en la nube (equivalente al escritorio remoto de la máquina bastión) probablemente se analice en función de la versión del nodo 16. Originalmente, omitimos la actualización a gran escala al degradar la versión de 14 a 12, pero ahora estamos ocultando Cómo actualizar la relación de dependencia de un paquete en package-lock.json Answer - Love Code Network y no puede ir directamente a la cerradura para modificar la dependencia secundaria, porque se restablecerá a la dependencia principal cuando se inicialice la versión, pero lo interesante es que incluso si actualiza la dependencia principal, es posible que no pueda actualizar la dependencia secundaria a la versión correspondiente. No sé qué estándar se basa el escritorio en la nube Muchas versiones de paquetes dependientes de proyectos antiguos son demasiado antiguas.

6cceaf8b2a904a66a80e30649357252c.png

De hecho, cada vez que ejecutamos el proyecto actual, podemos encontrar que hay muchos problemas en la revisión de código de npm, pero no afecta el funcionamiento del proyecto. Estos avisos son los mismos que los avisos de escritorio en la nube que estos viejos los complementos ya no se mantienen, y puede haber peligros ocultos al continuar usándolos o ser atacados maliciosamente. Cada vez que simplemente ignoramos,

De hecho, la mayoría de las vulnerabilidades de estos componentes son "vulnerabilidades falsas" irrelevantes que pueden hacer que el proyecto se ejecute lentamente después de ser atacado, lo que significa una corrección excesiva. 

Ahora ejecuto directamente npm audit fix -f para forzar la actualización, y encontré tantos errores que la solución proporcionada por npm es actualizar directamente a la versión adyacente cercana a la versión más alta del paquete dependiente.Webpack 3 se ha actualizado a 5 ¿Hay alguna forma de cambiar la redacción, y no sé si la versión del nodo es 17 o superior, por lo que la Parte A tiene que instalar la versión correspondiente del paquete del nodo en el escritorio de la nube para acomodarnos, por lo que el proyecto no puede correr en absoluto. .

Se estima que si actualiza webpack directamente, al menos la mitad de las vulnerabilidades se solucionarán, porque con la actualización de webpack, muchas subdependencias quedarán en desuso o se actualizarán, por lo que se pueden resolver muchos problemas, pero la actualización de webpack debe ir acompañado de node-sass y Sass-loader y otras dependencias deben actualizarse a la versión correspondiente para ejecutarse normalmente.

Luego me conecté en línea para encontrar los artículos de actualización 5 de webpack3 y seguí el artículo paso a paso para ver si funcionaba. Había demasiados escollos. Este proyecto fue un proyecto de hace muchos años, y muchas configuraciones no se comentaron. Siguiendo los artículos en línea , el proyecto no pudo ejecutarse, sin saber qué salió mal, el costo de tiempo es demasiado alto si continúa así, decidí usar la solución de modificar subdependencias a la fuerza que rechacé antes, y todavía tengo que dar la vuelta de esta forma, aunque al final quedarán 7-8 que habrá que actualizar, vulnerabilidades que solo se podrán solucionar dependiendo de la versión, pero que ha cumplido las expectativas de nuestro equipo de proyecto.

Las vulnerabilidades originales de 28 componentes, ahora hay vulnerabilidades de 6 componentes que no se pueden reparar, las vulnerabilidades de 6 componentes restantes, cuatro de las cuales son dependencias de la última versión, según la solución recomendada es usar otros métodos, pero esto está incrustado con un conjunto profundo de subdependencias, es imposible reemplazar directamente las subdependencias, porque el código fuente de las dependencias principales tiene su propia forma de escritura. Y no puede ir directamente al archivo de bloqueo para modificar las dependencias secundarias, porque se restablecerá a la versión requerida por la dependencia principal durante la inicialización. Incluso si actualiza la dependencia principal, es posible que el problema de la dependencia secundaria no se resuelva. resuelto. Depende de la forma en que esté escrito el código fuente de la dependencia principal. En muchos lugares ya intenté actualizar, pero el proyecto no pudo iniciarse debido a un error tras otro que no se puede encontrar en Internet. Puede ser visto que una actualización forzada puede hacer que el proyecto falle fácilmente.

método:

Agregue resoluciones al mismo nivel que los scripts, dependencias y evDependencies en el archivo package.json, escriba la versión deseada de las subdependencias que desea forzar la actualización, agregue la configuración en"preinstall": "npx force-resolutions",最后像启动项目一样使用npm run preinstall运行下载, los scripts y, finalmente, logre el objetivo.

  "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"

  },

Luego, toda la tarea de escaneo volvió a escanear el proyecto y descubrió que la vulnerabilidad había desaparecido.

¿Cómo anular las subdependencias npm anidadas con diferentes paquetes (no solo diferentes números de versión del paquete)? - Preguntas y respuestas - Tencent Cloud Developer Community-Tencent Cloud

El número de versión se reemplaza por un enlace en línea 

"resolutions": {
    "ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz"
}

Cómo encontrar enlaces en línea para paquetes dependientes: 

npm view ansi-html-community dist.tarball --registry=https://registry.npmjs.org/

 Como se muestra en la figura, podemos especificar la versión para obtener el enlace en línea

https://stackoverflow.com/questions/15806152/how-do-i-override-nested-npm-dependency-versions

Con respecto al problema de la dependencia, se puede intentar modificar manualmente package.lock.json, pero este método es como cuando auditas manualmente el código original y luego lo vuelves a cambiar, pero de hecho puede escapar de la revisión del paquete de dependencia del proyecto.

Y el archivo package.json que usé cambió el "nombre": "5.0.0" a "nombre":" en las resoluciones. https://registry.npmjs.org/yargs-parser/-/yargs-parser -5.0 .0.tgz "Esta forma de usar los enlaces en línea también es para evitar la revisión del código. Hasta el momento, se han solucionado todos los problemas encontrados en la revisión de vulnerabilidades.

Cuando vamos a la búsqueda global de dependencias relacionadas y encontramos que algunas versiones de paquetes dependientes siguen siendo números de versión en lugar de enlaces tgz en línea, entonces tenemos que cambiar manualmente el número de versión en este momento

f731cdc59f4c4a5fb00819a1935730a5.png

5b707807a597461fbb82c4e20acab45d.png

Todo el contenido del archivo 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"
  ]
}

Si el nuevo proyecto de alguien no se inicia, se recomienda eliminar el contenido relacionado con la resolución y volver a instalar npm, e intentar usar la imagen de Taobao. Si aún no funciona, envíele su paquete node_modules y ejecute el npm ejecutar el comando dev start después de npm ejecutar preinstalar probar

http://t.csdn.cn/5fjwu

Otros métodos para administrar las dependencias del proyecto incluyen los siguientes. Si está interesado, puede buscarlos

Use el ajuste de npm para administrar las dependencias del proyecto

Usar anular para actualizar subdependencias

Supongo que te gusta

Origin blog.csdn.net/aZHANGJIANZHENa/article/details/131163047
Recomendado
Clasificación