Failure to resolve security hole in package (svg-sprite-loader)

Update 3: I'm uncertain about the main issue here - whether it's a problem with the package itself or something I might be doing incorrectly when attempting to resolve it. It would be helpful to know if anyone has successfully installed the dependencies listed in my package.json file without encountering any issues.

Update 2: Installing the same packages on a different machine results in only 2 vulnerabilities, but unfortunately, they don't seem to be fixable. NPM now suggests manual review instead of using the npm audit fix --force command. The ongoing culprit appears to be svg-sprite-loader.

                                 Manual Review                                  
             Some vulnerabilities require your attention to resolve             
                                                                                
          Visit https://go.npm.me/audit-guide for additional guidance           


  Moderate        Regular Expression Denial of Service in postcss               

  Package         postcss                                                       

  Patched in      >=7.0.36                                                      

  Dependency of   svg-sprite-loader [dev]                                       

  Path            svg-sprite-loader > svg-baker > postcss                       

  More info       https://github.com/advisories/GHSA-566m-qj78-rww5             


  Moderate        Regular Expression Denial of Service in postcss               

  Package         postcss                                                       

  Patched in      >=7.0.36                                                      

  Dependency of   svg-sprite-loader [dev]                                       

  Path            svg-sprite-loader > svg-baker-runtime > svg-baker > postcss

  More info       https://github.com/advisories/GHSA-566m-qj78-rww5

found 2 moderate severity vulnerabilities in 459 scanned packages
  2 vulnerabilities require manual review. See the full report for details.

Update: I am willing to consider eliminating svg-sprite-loader entirely if someone can provide alternate suggestions.

Upon running npm audit, 4 vulnerabilities are detected and it recommends making a drastic change to svg-sprite-loader (reverting from version 6 back to 2??).

This action resolves one vulnerability, but the remaining 3 do not appear to be affected by executing npm audit fix as advised. I am unsure how to proceed to address this issue.

npm: 8.10.0
Node: 16.14.0
webpack: 5.72.1
svg-sprite-loader: 6.0.11

The initial audit report prior to invoking npm audit fix --force:

postcss  <7.0.36
Severity: moderate
Regular Expression Denial of Service in postcss - https://github.com/advisories/GHSA-566m-qj78-rww5
fix available via `npm audit fix --force`
Will install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="364540511b4546445f42531b5a5957525344760418061805">[email protected]</a>, which is a breaking change
node_modules/postcss
  svg-baker  >=1.2.5
  Depends on vulnerable versions of postcss
  node_modules/svg-baker
    svg-baker-runtime  >=1.4.0-alpha.10475b37
    Depends on vulnerable versions of svg-baker
    node_modules/svg-baker-runtime
      svg-sprite-loader  >=2.0.4
      Depends on vulnerable versions of svg-baker
      Depends on vulnerable versions of svg-baker-runtime
      node_modules/svg-sprite-loader

4 moderate severity vulnerabilities

The report after running npm audit fix --force:

postcss  <7.0.36
Severity: moderate
Regular Expression Denial of Service in postcss - https://github.com/advisories/GHSA-566m-qj78-rww5
fix available via `npm audit fix`
node_modules/postcss
  svg-baker  >=1.2.5
  Depends on vulnerable versions of postcss
  node_modules/svg-baker
    svg-baker-runtime  >=1.4.0-alpha.10475b37
    Depends on vulnerable versions of svg-baker
    node_modules/svg-baker-runtime

3 moderate severity vulnerabilities

Even after running npm audit fix, those vulnerabilities persist, leaving me puzzled on how to handle them. Any assistance from someone more knowledgeable on this matter would be greatly appreciated.

**Edit:

package.json before correction

{
  "name": "vanilla-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "svg-sprite-loader": "^6.0.11",
    "webpack": "^5.72.1",
    "webpack-dev-server": "^4.9.0"
  }
}

package.json after correction

{
  "name": "vanilla-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "svg-sprite-loader": "^2.0.3",
    "webpack": "^5.72.1",
    "webpack-dev-server": "^4.9.0"
  }
}

Answer №1

This method offers a more effective solution for addressing vulnerabilities.

Explanation: The presence of a security vulnerability in one of your packages, although not a direct top-level dependency but rather a nested one, is causing concern. This vulnerable nested dependency triggers a security alert when running `npm audit`.

If we can update this specific nested dependency to a secure version, all vulnerabilities should be mitigated.

To achieve this, we will utilize a package called `npm-force-resolutions`. This tool adjusts the package-lock.json file to enforce the installation of a particular version of a transitive dependency (a dependency of a dependency).

Procedure:

  1. Begin by installing it as a dev dependency npm i -D npm-force-resolutions

  2. Add a resolution field in your package.json with the desired fixed dependency version, which can be sourced from the advisory provided in the npm audit report found at

     https://github.com/advisories/GHSA-566m-qj78-rww5
    .

"resolutions": {
    "postcss": "7.0.36"
  }
  1. Next, include npm-force-resolutions in the preinstall script to execute every time you run npm install. This action patches the nested dependency in the package-lock file.

  2. Verify by running npm audit.

found 0 vulnerabilities

Your package.json file should resemble the following setup

{
  "name": "vanilla-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "preinstall": "npx npm-force-resolutions"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "svg-sprite-loader": "^6.0.11",
    "webpack": "^5.72.1",
    "webpack-dev-server": "^4.9.0",
    "npm-force-resolutions": "^0.0.10"
  },
  "resolutions": {
    "postcss": "7.0.36"
  }
}

CAUTION: Updating nested dependencies to newer versions may result in compatibility issues due to breaking changes in the dependency. Please ensure everything functions properly after making these updates.

Answer №2

Here is a helpful command you can use:

npm ci //Run this in your terminal

Ensure that you have an updated package-lock and a current installation. This command functions similarly to npm install, but it is specifically designed for automated environments like testing platforms, continuous integration, deployment, or any scenario where you need a clean dependency installation. It tends to be faster than a standard npm install because it skips certain user-friendly features. Additionally, it is more strict, which helps detect errors or inconsistencies caused by the incremental local installations that most npm users perform.

To summarize, the key disparities between using npm install and npm ci are:

• Your project must already have a package-lock.json or npm-shrinkwrap.json file.

• If the dependencies in the package-lock do not match those in package.json, npm ci will produce an error instead of updating the package-lock.

• The npm ci command can only install entire projects at once; individual dependencies cannot be added with this method.

• If a node_modules directory is already present, it will be deleted automatically before npm ci starts the installation process.

npm ci does not modify package.json or any of the package-locks; the installations remain unchanged.

If the above suggestions do not resolve your issue, you can also try:

npm install //Execute this in your terminal

Description:

When used in global mode (with -g or --global appended to the command), it installs the current package context (i.e., the working directory) as a global package.

By default, npm install will install all modules listed as dependencies in package.json.

Using the --production flag (or setting the NODE_ENV environment variable to production) prevents npm from installing modules listed under devDependencies. To include all modules from both dependencies and devDependencies when the NODE_ENV is set to production, utilize --production=false.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is it that this specific ASP.NET + jQuery + JavaScript custom MVC setup isn't displaying any content?

After attempting to incorporate this JavaScript MVC example from into an ASP.NET page, I am facing issues as a beginner with jQuery. Nothing seems to show up on the page, and I'm unsure why. Update: I have included the missing HTML listbox, but now ...

Error encountered in Ionic framework command line: undefined:1 - The syntax error is due to an unexpected

Currently operating on a Windows 8.1 64-bit system with Node version 0.12.7 installed, I had both Cordova and Ionic set up globally which worked smoothly at first. However, now every Ionic command I attempt returns an error. For example, when I run ionic ...

After developing a blockchain API and running tests on it, I successfully verified its functionality in Postman. However, I encountered several errors when attempting to parse the body of the response

Here is an image of the api.js file that I have created. When using Postman, I am providing the body part. After printing everything in the console, changing console.log to res.send still gives me the same error. ...

What could be causing the failure of this web component using shadow DOM when the HTML code includes multiple instances of the component?

Recently, a question was raised on this platform regarding the use of Selenium to access the shadow DOM. Curious about this topic, I delved into the MDN article Using shadow DOM and decided to replicate the code on my local machine. Surprisingly, it worked ...

The function array.push() is not achieving the intended outcome that I had in mind

Currently facing a rather frustrating issue. I'm attempting to utilize D3.js for dynamically plotting data (specifically, scores of individuals). Retrieving record data from a firebase database whenever changes occur - this is represented by an obje ...

Utilizing the Google Translate API within an ASP MVC framework to translate a div's content from English to Arabic

Currently, I am working on a small project that involves two divs: one for English and another for Arabic. Despite creating the project, I am encountering an issue with getting the translation from English to Arabic. Below is the code I have attempted, but ...

What could be the reason that my Bootstrap design is displaying narrower than the designated container?

Having some issues with a JavaScript code that involves innerHTML, causing a discrepancy in width compared to the CSS and Bootstrap rules I have set up. Below is the JavaScript code snippet: let numeroStreams = document.getElementById('num') let ...

When running npm install, the dist folder is not automatically generated

I found a helpful tutorial at this link for creating a Grafana plugin. However, when I tried copying the code from this link to my test server (without the dist/ folder) and ran npm install, it did not generate a new dist/ folder but created a node_module ...

ES5 approach to Angular2 HTTP Providers (not TypeScript)

I'm currently developing an application and experimenting with Angular2 using ES5 JavaScript for fun. My main inquiry right now is how to access the Http service. Most of the available documentation is in TypeScript, which is not very helpful, or it p ...

What steps are required to properly configure the VueRouter?

I'm excited to start developing a Vue application using VueRouter! Let's take a look at my main.js file: import VueRouter from "vue" import MyApp2 from "./MyApp2.vue" import { createApp } from "vue" import { createWe ...

Capture sound from web browser and display live audio visualization

I'm searching for a package that can capture audio input from the browser's microphone and display it in real time. Are there any JavaScript packages available for this purpose? I've looked at various audio visualizer options, but they all r ...

Executing PHP within a Node environment on the Heroku platform

It may not be the best practice, but I find myself in a tricky situation. Currently, I have a project running on node on Heroku. Within this project, there is a lengthy and intricate php script that I am hesitant to rewrite. The thought of setting up anoth ...

Is there a way to automatically clear the comments form upon clicking the submit button in Next.js 14?

I need some assistance with clearing the previous inputted comment in my comment form after the submit button is clicked. I want to make it easier for users by automatically clearing the input field for a new comment. Here is the code I have so far, any ...

RSelenium: Issue with extracting hyperlinks from webpage following button click操作

My goal is to automate web scraping with RSelenium in R. I've managed to find and click a button on a webpage using RSelenium, but I'm struggling to extract href attributes from the page after clicking the button. Although I have a list of 4000 ...

CustomTooltips in ChartJS allowing for an enhanced visual presentation of data

I am encountering an issue with my code where I am trying to incorporate images into custom tooltips. The goal is to dynamically generate PNG filenames based on the tooltip name or ID, but I am struggling to find unique values to assign as filenames for ea ...

What is the best way to identify the initial item in an array that is also present in a different array through TypeScript?

I have two arrays of objects and I only want to retrieve the first matching object from one array if it is found in the other array. I need to stop the search after finding the first match, but I am having trouble breaking out of the loop. Example 1:- var ...

Issue with validating schema in development mode detected in Webpack version 3.0.0

Yesterday, I successfully installed webpack-cli and it was working fine with react and other packages. Now, as I attempt to set up my webpack config file again and run webpack-dev-server through npm, I am encountering the following error: K:\web&bsol ...

Developing a specialized command-line application for currency conversion is my current project

Currently, I am working on developing a command-line application for currency exchange. I have created an interface to define the structure of an object array that will store the keys and values of currency names along with their current values in the inte ...

How do I set a new value for a variable from within a function?

After retrieving initial numbers from a JSON file, I want to update them using an ajax call. How do I go about replacing the values of homePoints and awayPoints with the new ones fetched through ajax? I have reviewed the provided answers but none seem to ...

Difficulty Intercepting Browser's Back Button Press on Next.js Success Page

Currently, I am developing a Next.js application that includes a success page for users who have completed a payment transaction. My goal is to prevent users from navigating back to the payment page by intercepting the back button press and redirecting the ...