I’m developing a Phoenix project (webpack). Yesterday, I received a notification
(from Github) which says:
“Known high severity security vulnerability detected in js-yaml < 3.13.1 defined in package-lock.json.
package-lock.json update suggested: js-yaml ~> 3.13.1.”
npm audit output:
=== npm audit security report ===
# Run npm install --save-dev css-loader@2.1.1 to resolve 2 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
Run npm install --save-dev optimize-css-assets-webpack-plugin@5.0.1 to resolve 2 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
Run npm install --save-dev webpack-cli@3.3.2 to resolve 2 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
# Run npm update fsevents --depth 4 to resolve 1 vulnerability
found 7 vulnerabilities (2 low, 2 moderate, 3 high) in 14908 scanned packages
run `npm audit fix` to fix 1 of them.
6 vulnerabilities require semver-major dependency updates.
I’m a newbie in npm and web pack. How do I patch the security vulnerabilities
mentioned in my post? ( … without breaking the project)
Also those dependencies may just relate to webpack directly. The dependencies deployed to the web page in production should be of primary interest.
To assess the vulnerabilities:
$ npm audit
=== npm audit security report ===
# Run npm install --save-dev optimize-css-assets-webpack-plugin@5.0.1 to resolve 2 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate │ Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ js-yaml │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ optimize-css-assets-webpack-plugin [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ optimize-css-assets-webpack-plugin > cssnano > postcss-svgo │
│ │ > svgo > js-yaml │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/788 │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High │ Code Injection │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ js-yaml │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ optimize-css-assets-webpack-plugin [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ optimize-css-assets-webpack-plugin > cssnano > postcss-svgo │
│ │ > svgo > js-yaml │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/813 │
└───────────────┴──────────────────────────────────────────────────────────────┘
# Run npm install --save-dev webpack-cli@3.3.2 to resolve 2 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ braces │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ webpack-cli [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ webpack-cli > jscodeshift > micromatch > braces │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/786 │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low │ Regular Expression Denial of Service │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package │ braces │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ webpack-cli [dev] │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path │ webpack-cli > webpack-addons > jscodeshift > micromatch > │
│ │ braces │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info │ https://npmjs.com/advisories/786 │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 4 vulnerabilities (2 low, 1 moderate, 1 high) in 14404 scanned packages
4 vulnerabilities require semver-major dependency updates.
$
Note the more info link one each entry, e.g. :
upgrading may fix the issue - provided it doesn’t break the package that uses it.
optimize-css-assets-webpack-plugin is a webpack plugin - so unless that plugin sneaks js-yaml into the bundle (unlikely given its purpose) there shouldn’t be any production exposure.
$ npm audit fix
npm WARN assets No description
up to date in 4.251s
fixed 0 of 4 vulnerabilities in 14404 scanned packages
2 package updates for 4 vulns involved breaking changes
(use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)
$ npm audit fix --force
npm WARN using --force I sure hope you know what you are doing.
> webpack-cli@3.3.2 postinstall > node ./bin/opencollective.js
npm WARN assets No description
+ optimize-css-assets-webpack-plugin@5.0.1
+ webpack-cli@3.3.2
added 70 packages from 46 contributors, removed 575 packages, updated 51 packages and moved 2 packages in 12.738s
fixed 4 of 4 vulnerabilities in 14404 scanned packages
2 package updates for 4 vulns involved breaking changes
(installed due to `--force` option)
$
Alternately more selectively as advised by npm audit:
$ npm install --save-dev webpack-cli@3.3.2
> webpack-cli@3.3.2 postinstall
> node ./bin/opencollective.js
npm WARN assets No description
+ webpack-cli@3.3.2
added 6 packages from 8 contributors, removed 380 packages, updated 13 packages, moved 2 packages and audited 7547 packages in 8.173s
found 2 vulnerabilities (1 moderate, 1 high)
run `npm audit fix` to fix them, or `npm audit` for details
$ npm install --save-dev optimize-css-assets-webpack-plugin@5.0.1
npm WARN assets No description
+ optimize-css-assets-webpack-plugin@5.0.1
added 68 packages from 41 contributors, removed 197 packages, updated 34 packages and audited 7680 packages in 8.158s
found 0 vulnerabilities
$
Phoenix doesn’t care about webpack - it just installs it as a convenience feature. Apart from maybe the channel and html helpers the JavaScript assets take on a life of their own after project creation.