Lodash vulnerability in Angular project - lodash

After installing npm to the blur-admin template https://github.com/akveo/blur-admin
I had a number of issues which I fixed by using the run recomendations in the npm audit dialog. However I cant fix one even after running
$ npm install lodash#latest --save
I have updated the lodash file in package.json:
{
"name": "blur_admin",
"version": "1.3.1",
"devDependencies": {
"bower": "~1.8.4",
"browser-sync": "^2.26.3",
"browser-sync-spa": "~1.0.3",
"chalk": "~1.1.1",
"del": "~2.2.2",
"eslint-plugin-angular": "~0.12.0",
"estraverse": "~4.2.0",
"gulp": "^4.0.0",
"gulp-angular-filesort": "^1.2.1",
"gulp-angular-templatecache": "~2.0.0",
"gulp-autoprefixer": "~3.1.1",
"gulp-eslint": "^5.0.0",
"gulp-filter": "~4.0.0",
"gulp-flatten": "~0.3.1",
"gulp-gh-pages": "^0.5.4",
"gulp-inject": "~4.1.0",
"gulp-load-plugins": "~1.4.0",
"gulp-minify-css": "~1.2.1",
"gulp-minify-html": "~1.0.4",
"gulp-ng-annotate": "~2.0.0",
"gulp-prompt": "^1.1.0",
"gulp-protractor": "^4.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "~0.5.4",
"gulp-rev": "~7.1.2",
"gulp-rev-replace": "~0.4.2",
"gulp-sass": "^4.0.1",
"gulp-shell": "^0.5.2",
"gulp-size": "~2.1.0",
"gulp-sourcemaps": "~1.6.0",
"gulp-uglify": "~2.0.0",
"gulp-useref": "^3.1.6",
"gulp-util": "~3.0.6",
"gulp-zip": "^3.0.2",
"http-proxy-middleware": "~0.17.2",
"lodash": "^4.17.11",
"main-bower-files": "~2.13.1",
"uglify-save-license": "~0.4.1",
"wiredep": "~4.0.0",
"wrench": "~1.5.8"
},
"scripts": {
"postinstall": "bower install"
}
}
But still get:
PS D:\dev\Blur-Admin test\blur-admin-master\blur-admin-master> npm audit
=== npm audit security report ===
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
Low Prototype Pollution
Package lodash
Patched in >=4.17.5
Dependency of browser-sync-spa [dev]
Path browser-sync-spa > opt-merger > lodash
More info https://nodesecurity.io/advisories/577
found 1 low severity vulnerability in 13272 scanned packages
1 vulnerability requires manual review. See the full report for details.
PS D:\dev\Blur-Admin test\blur-admin-master\blur-admin-master>
I've tried everything!

This usually means that one of the other project dependencies in your project.json has a dependency of lodash and they have not patched their pacakge.json.
The error states which one it is: "browser-sync-spa" and the path to it:
browser-sync-spa > opt-merger > lodash
You would have to open an issue on browser-sync-spa or opt-merger to update their repo/package.json or open a PR for them.
Other option is to live with it or Fork their project which is the nuclear option.

Related

Laravel and Vue3 upgrade issues with the vue-template-compiler

I am trying to upgrade from Vue2 to Vue3 but getting errors.
I have installed vue3 latest version, installed #vue/compiler-sfc and tried to remove vue-template-compiler but when I do npm run dev keeps getting below error, I have gone through lots of SO posts but still getting this error.
Vue3 doesn't need vue-template-compiler but why I am still getting below error. Could anyone help please? Thanks!
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse(...\node_modules\#vue\component-compiler-utils\dist\parse.js:15:23)
at Object.module.exports(...\node_modules\vue-loader\lib\index.js:67:22)
My package.json file looks like this:
"devDependencies": {
"#types/jquery": "^3.5.5",
"#vue/compiler-sfc": "^3.1.2",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"cross-env": "^7.0.3",
"jquery": "^3.6",
"laravel-mix": "^6.0.19",
"lodash": "^4.17.21",
"popper.js": "^1.16.1",
"postcss": "^8.3.0",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.13",
"sass-loader": "^7.1.0",
"ts-loader": "^9.2.2",
"typescript": "^4.3.2",
"vue": "^3.1.2",
"vue-loader": "^15.9.7",
"webpack": "^5.39.1"
},
"dependencies": {
"#babel/core": "^7.14.6",
"#babel/preset-env": "^7.14.7",
"#fortawesome/fontawesome-free": "5.*",
"#popperjs/core": "^2.9.2",
"vue-router": "^4.0.10"
}
packages.json doesn't have vue-template-compiler. I have tried removing while node_modules folder and did npm install and npm run dev but these errors are still appearing.
Thanks
If anyone else facing this issue, I did below steps to solve this issue:
Upgraded vue-loader to version v16.1.2
Removed node_modules folder from the root directory
Removed package-lock.json from the root directory
Run npm install
npm run dev
Now files compiled successfully.
Hope its helpful.

Module build failed #content($material-light) vuetify 2.3.10

I am upgrading from vuetify version 1.0.5 to 2.3.10. I have removed node-sass and using sass as per the documentation. I am getting this error as below. I have included my package.json file. Any idea where I could be wrong?
./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/vuetify/src/styles/main.sass
Module build failed:
#content($material-light)
^
Invalid CSS after " #content": expected "}", was "($material-light); "
in /Users/weather/ceolaw/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)
# ./node_modules/vuetify/src/styles/main.sass 2:14-102
# ./node_modules/vuetify/es5/presets/default/index.js
package.json file
{
"name": "weather",
"private": true,
"engines": {
"node": "^10.0.0",
"yarn": "^1.21.1"
},
"dependencies": {
"#rails/webpacker": "^3.2.0",
"#riophae/vue-treeselect": "^0.0.38",
"axios": "^0.17.1",
"babel-polyfill": "^6.26.0",
"coffee-loader": "^0.9.0",
"coffeescript": "1.12.7",
"es6-promise": "^4.2.2",
"pdfjs-dist": "2.0.550",
"sass": "^1.26.11",
"sass-loader": "^6.0.6",
"scroll-into-view-if-needed": "^2.2.14",
"urijs": "^1.19.1",
"vue": "^2.6.12",
"vue-ads-table-tree": "^2.3.2",
"vue-analytics": "^5.9.0",
"vue-moment": "^4.0.0-0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1",
"vue-spinner": "^1.0.3",
"vue-star-rating": "^1.6.0",
"vuetify": "^2.3.10",
"yarn": "^1.22.5"
},
"devDependencies": {
"caniuse-lite": "^1.0.30000855",
"css-loader": "^0.28.11",
"jshint": "^2.9.5",
"jshint-loader": "^0.8.4",
"vue-loader": "^13.6.2",
"vue-template-compiler": "^2.6.12",
"webpack-dev-server": "^2.9.7"
},
"scripts": {
"client": "./bin/webpack-dev-server",
"server": "bundle exec rails s",
"start": "./bin/webpack-dev-server"
}
}
Error update
yarn remove node-sass
yarn remove v1.21.1
[1/2] 🗑 Removing module node-sass...
error This module isn't specified in a package.json file.
It seems one of your other dependencies has a dependency on node-sass. It's probably #rails/webpacker as you are using very old version 3.2.0 (current is 5.2.1) and they switched to sass (dart-sass) recently
Result is you have both packages installed - sass and node-sass
From the docs of sass-loader (which is used by Webpack when building Vue app) it seems that when both packages are installed, they prefer sass over node-sass but at the same time warn not to install both. Seems strange to me. Also the error suggests that sass-loader is in your case preferring node-sass.
You have 2 options:
upgrade #rails/webpacker to newer version which is using sass
configure sass-loader to use sass as documented here

vue-CLI outputting very concerning error (security question)

I'm building an application with Vue.js. Suddenly, vue-cli has begun outputting errors that have me concerned that perhaps one or more of my dependencies has something nefarious in it.
When I run npm run serve (vue-cli serve), the command succeeds, but outputs several lines of error messages like the following:
(node:366423) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, stat '/initrd.img'
It also fails to stat /home/jordan/.steampath, /initrd.img.old, /vmlinuz, and /vmlinuz.old.
It also sometimes outputs these lines when hot-reloading.
I'm concerned because it seems there should be ZERO reason for it to even try to stat kernel files or my steampath. It seems to be looking at things it shouldn't need to (but is apparently being prevented from doing so).
Should I be concerned about security? Is this evidence that I'm using a vue or NPM plugin with nefarious code in it? Or is this a simple misconfiguration somewhere?
Here's my package.json:
{
"name": "pp10-client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#sentry/browser": "^5.15.5",
"#sentry/integrations": "^5.15.5",
"#tinymce/tinymce-vue": "^2.1.0",
"apexcharts": "^3.19.2",
"axios": "^0.19.2",
"blueimp-md5": "^2.16.0",
"core-js": "^2.6.11",
"filepond": "^4.13.6",
"moment": "^2.26.0",
"npm-cache": "^0.7.0",
"pdfjs": "^2.3.7",
"pdfjs-dist": "^2.3.200",
"save": "^2.4.0",
"sortablejs": "^1.10.2",
"tinymce": "^5.3.0",
"underscore": "^1.10.2",
"v-calendar": "^1.0.8",
"v-tooltip": "^2.0.2",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-color": "^2.7.1",
"vue-filepond": "^5.1.3",
"vue-js-modal": "^1.3.35",
"vue-js-toggle-button": "^1.3.3",
"vue-phone-number-input": "^1.1.9",
"vue-router": "^3.2.0",
"vue-stepper-component": "^1.0.0",
"vue-tour": "^1.3.1",
"vue-worker": "^1.2.1",
"vuedraggable": "^2.23.2",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-eslint": "^3.12.1",
"#vue/cli-service": "^3.12.1",
"babel-eslint": "^10.1.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.3",
"pug": "^2.0.4",
"pug-plain-loader": "^1.0.0",
"sass": "^1.26.5",
"sass-loader": "^7.3.1",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-template-compiler": "^2.6.11"
}
}
EDIT: Solution:
Removed nodejs and npm, deleted all associated folders, and reinstalled nodejs and npm by using nvm (node version manager). I chose the current version of node (14 as of this writing).
Removed node_modules and package-lock.json within the project.
Ran npm install (in project folder)
Installed vue-cli globally: npm install -g #vue/cli
When builds failed, followed prompts to install missing dependencies.
FINALLY it worked.
facing the same issue with nuxt.js, audit does not mention anything regarding this. Howto find the npm module? String steam is not present, likely obfuscated as bytearray or else
On Ubuntu 20.04, upgrading to node 12.18.3 and running npm rebuild node-sass solved the problem for me.
Make sure you use the latest dependencies in your package.json (manually check on npmjs.com or your npm registry)
Delete the entire node modules dir and package-lock.json, and then running npm install helped me.

Difference between `npm update` and `remove package-lock.json` plus `npm install`?

What is essential difference between these commands, except that npm update modify package.json?
rm package-lock.json
npm install
npm update --dev
In package-lock.json basically the indirect dependencies are locked. The indirect dependencies mean those dependencies, that are not specified in the package.json of your project but they are the dependencies of your dependencies.
When npm update --dev is called some dependencies are updated in the package.json. After the entries are updated an install is called, this install updates in package-lock.json those thirdparties that are in connection with the modified ones in the package.json. This means that both the direct and indirect dependencies are updated in the package-lock.json. But only for those, that were modified in package.json.
The thirdparties that remained the same in the package.json won't be touched in the package-lock.json. (Both direct and indirect dependencies of them remain the same.)
When rm package-lock.json and npm install is called, then the information is lost about the indirect dependencies with the removing of the package-lock.json. As npm install is called, a new package-lock.json is generated and the indirect dependencies could be changed for all of your dependencies.
Let's see an example for this.
In package-lock.json we have an indirect dependency the tslib: 1.9.0.
"tslib": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
"integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
},
The tslib is a dependency of all Angular modules, that are specified directly in thepackage.json:
"dependencies": {
"#angular/animations": "8.2.12",
"#angular/cdk": "~8.2.3",
"#angular/common": "8.2.12",
"#angular/compiler": "8.2.12",
"#angular/core": "8.2.12",
"#angular/flex-layout": "^8.0.0-beta.27",
"#angular/forms": "8.2.12",
"#angular/material": "^8.2.3",
"#angular/platform-browser": "8.2.12",
"#angular/platform-browser-dynamic": "8.2.12",
"#angular/platform-server": "8.2.12",
"#angular/router": "8.2.12",
"#nguniversal/module-map-ngfactory-loader": "8.1.1",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.3.1",
"core-js": "^2.6.5",
"hammerjs": "^2.0.8",
"jquery": "3.4.1",
"oidc-client": "^1.9.0",
"popper.js": "^1.14.3",
"rxjs": "^6.4.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.800.6",
"#angular/cli": "8.3.18",
"#angular/compiler-cli": "8.2.12",
"#angular/language-service": "8.2.12",
"#types/jasmine": "~3.3.9",
"#types/jasminewd2": "~2.0.6",
"#types/node": "~11.10.5",
"codelyzer": "^5.0.1",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.5",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"typescript": "3.4.5"
},
"optionalDependencies": {
"node-sass": "^4.9.3",
"protractor": "~5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
If we call npm update --dev, following changes are done:
+ bootstrap#4.5.0
+ core-js#2.6.11
+ popper.js#1.16.1
+ karma-jasmine-html-reporter#1.5.4
+ karma-coverage-istanbul-reporter#2.0.6
+ codelyzer#5.2.2
+ karma#4.4.1
+ #types/jasmine#3.3.16
+ #types/jasminewd2#2.0.8
+ oidc-client#1.10.1
+ rxjs#6.5.5
We can see, that in the package.json the Angular dependencies are not touched. It follows that the tslib is also remained on version 1.9.0 in the package-lock.json.
However if we remove the package-lock.json, remove the node_modules, do the above updates in the package.json manually and call npm install we can see in the newly generated package-lock.json that the tslib is also updated to 1.12.0. (If we do not remove the node_modules the same version could be put back in the package-lock.json as previously.)
Conclusion
So the difference is, that in case of npm update --dev only those direct and indirect dependencies are updated, which were in connection with the changed ones in the package.json. But in case of rm package-lock.json and npm install all indirect dependencies can change.

What does 'npm:' means?

I've started working on a project in my new workplace .
It's react project and has a package.json which has the dependencies like the one below.
"dependencies": {
"babel-polyfill": "^6.26.0",
"gsap": "^2.0.2",
"lodash": "^4.17.11",
"mobx": "^5.1.2",
"mobx-react": "^5.4.2",
"react": "^16.5.2",
"react-dom": "npm:#hot-loader/react-dom",
"react-draggable": "^3.0.5",
"react-hot-loader": "^4.8.3",
"react-id-swiper": "^1.6.9",
"react-resize-detector": "^4.0.5"
},
For react-dom, the version is specified as "npm:#hot-loader/react-dom".
What does 'npm:' means?
My coworker guess it's the way that only yarn uses.
I wonder about this naming as 'npm install' doesn't install react-dom, but 'yarn install' install it.
Thank you for your help!
I think this dependency is installed wrong it should be:
react-dom#npm:#hot-loader/react-dom
It's a yarn name resolution, so #hot-loader/react-dom would be installed instead of react-dom#npm