How I fix 'Uncontrolled Resource Consumption in ansi-html' and Other Vulnerabilities in My Laravel Project

Fixing Vulnerabilities Caused By ansi-html

From my research, there is no patch for this vulnerability since it's already abandoned by its author, so the way to fix it is by removing it and replace it with ansi-html-community. Based on the discussion here, you CANNOT edit package-lock.json directly because it will be regenerated every time you run npm install, so you might lost all your changes made in that file. To replace it, you need to use npm-force-resolutions

1. Open package.json
2. Add "preinstall": "npx npm-force-resolutions" under "scripts" section so it will kinda look like this:

       "scripts": {
           ..
           ..
           "preinstall": "npx npm-force-resolutions"
       },

3. Add new section for resolution:

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

4. Run npm install & npm run dev

That supposedly fix it for everyone. However, mine still isn't fix because I can still see the dependency to "ansi-html" in my package-lock.json. So I ran npm audit and found some other vulnerabilities. It is expected because my Laravel repository haven't been updated for a year.

Updating Packages to Reduce Multiple Vulnerabilities

1. Update webpack to latest version with npm install webpack@latest
2. Update Laravel Mix with npm install --save-dev laravel-mix@6.0.39

Result : Reduced  vulnerabilities from 17 (12 moderate, 5 high) to 2 vulnerabilities (1 moderate, 1 high). That "high" vulnerability is the "ansi-html". 

1. Run npm audit fix

Result: 1 "high" vulnerability has been fixed and "ansi-html" is no longer can be seen in package-lock.json. Instead, there's only "ansi-html-community"

Fixing Errors

My 'Uncontrolled Resource Consumption in ansi-html' issue has been fixed but when I compile, I received some scary errors.

First, this error in particular: "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file".

This error happen because I'm using Vue and I just updated to Laravel Mix 6. Laravel Mix 6 has different config for webpack.mix.js. To fix it, simply add .vue() to a line in webpack.mix.js.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ mix.js('resources/js/app.js', 'public/js').vue() .sass('resources/sass/app.scss', 'public/css');

Though the first error has been fixed, the other errors still isn't fixed.

Based on this post, I tried running npm install --global cross-env and but the errors got worsen instead.

Then based on this post, I tried running npm update vue-loader and when I complied, the error has finally gone!

Helpful Links 🔗

1. https://stackoverflow.com/a/69726589/11735769
2. https://stackoverflow.com/questions/69548370/how-to-override-a-nested-npm-sub-dependency-with-a-different-package-altogether/69591894#69591894
3. https://www.npmjs.com/package/npm-force-resolutions
4. https://www.npmjs.com/package/ansi-html-community
5. https://stackoverflow.com/a/65609321/11735769
6. https://stackoverflow.com/a/69631556/11735769