[UX] Improve vulnerability display for subpackages

[IonianPlayboy]

Describe the feature

I have installed the npmx VS Code extension, and it has been really great so far. The vulnerability detection has been really useful, but I found that the linked npmx page currently is not detailed enough to be actionable.

My use case

In a local project in VS Code, the npmx extension find a vulnerability in my version of nuxt (lastest version)

On the linked npmx page, the serialize-javascript vulnerability is shown

When I try to see if I have the vulnerable package installed in my local project, I find nothing

I cloned the Nuxt repo and tried to see where the vulnerable dependency came from:

$pnpm why serialize-javascript
serialize-javascript@6.0.2
├─┬ @rollup/plugin-terser@0.4.4
│ └─┬ nitropack@2.13.1
│   ├── @nuxt/kit@4.3.1 (devDependencies)
│   ├── @nuxt/nitro-server@4.3.1 (dependencies)
│   ├── @nuxt/vite-builder@4.3.1 (devDependencies)
│   └── nuxt-framework (devDependencies)
├─┬ css-minimizer-webpack-plugin@7.0.4 peer#a57b (2 variations)
│ └── @nuxt/schema@4.3.1 (devDependencies)
├─┬ css-minimizer-webpack-plugin@7.0.4 peer#d4e7 (2 variations)
│ ├── @nuxt/rspack-builder@4.3.1 (dependencies)
│ └── @nuxt/webpack-builder@4.3.1 (dependencies)
├─┬ terser-webpack-plugin@5.3.16 peer#a57b (2 variations)
│ └─┬ webpack@5.105.2
│   ├── @nuxt/schema@4.3.1 (devDependencies)
│   ├─┬ @types/webpack-bundle-analyzer@4.7.0
│   │ └── @nuxt/schema@4.3.1 (devDependencies)
│   ├─┬ @types/webpack-hot-middleware@2.25.12
│   │ └── @nuxt/schema@4.3.1 (devDependencies)
│   ├── css-minimizer-webpack-plugin@7.0.4 peer#a57b (2 variations) [deduped]
│   ├─┬ esbuild-loader@4.4.2 peer#b258 (2 variations)
│   │ └── @nuxt/schema@4.3.1 (devDependencies)
│   ├─┬ file-loader@6.2.0 peer#b258 (2 variations)
│   │ └── @nuxt/schema@4.3.1 (devDependencies)
│   ├─┬ mini-css-extract-plugin@2.10.0 peer#b258 (2 variations)
│   │ └── @nuxt/schema@4.3.1 (devDependencies)
│   ├─┬ sass-loader@16.0.7
│   │ └── @nuxt/schema@4.3.1 (devDependencies)
│   ├── terser-webpack-plugin@5.3.16 [circular]
│   ├─┬ vue-loader@17.4.2 peer#96c0 (2 variations)
│   │ └── @nuxt/schema@4.3.1 (devDependencies)
│   └─┬ webpack-dev-middleware@7.4.5 peer#1dbc (2 variations)
│     └── @nuxt/schema@4.3.1 (devDependencies)
└─┬ terser-webpack-plugin@5.3.16 peer#d4e7 (2 variations)
  └─┬ webpack@5.105.2
    ├─┬ @nuxt/friendly-errors-webpack-plugin@2.6.0
    │ ├── @nuxt/rspack-builder@4.3.1 (dependencies)
    │ └── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├── @nuxt/kit@4.3.1 (devDependencies)
    ├── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├─┬ @types/webpack-bundle-analyzer@4.7.0
    │ ├── @nuxt/rspack-builder@4.3.1 (devDependencies)
    │ └── @nuxt/webpack-builder@4.3.1 (devDependencies)
    ├─┬ @types/webpack-hot-middleware@2.25.12
    │ ├── @nuxt/rspack-builder@4.3.1 (devDependencies)
    │ └── @nuxt/webpack-builder@4.3.1 (devDependencies)
    ├─┬ css-loader@7.1.4
    │ ├── @nuxt/rspack-builder@4.3.1 (dependencies)
    │ └── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├── css-minimizer-webpack-plugin@7.0.4 peer#d4e7 (2 variations) [deduped]
    ├─┬ esbuild-loader@4.4.2 peer#d4e7 (2 variations)
    │ ├── @nuxt/rspack-builder@4.3.1 (dependencies)
    │ └── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├─┬ file-loader@6.2.0 peer#d4e7 (2 variations)
    │ ├── @nuxt/rspack-builder@4.3.1 (dependencies)
    │ ├── @nuxt/webpack-builder@4.3.1 (dependencies)
    │ └─┬ url-loader@4.1.1
    │   ├── @nuxt/rspack-builder@4.3.1 (dependencies)
    │   └── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├─┬ fork-ts-checker-webpack-plugin@9.1.0
    │ └── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├─┬ mini-css-extract-plugin@2.10.0 peer#d4e7 (2 variations)
    │ └── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├── nuxt-framework (devDependencies)
    ├─┬ postcss-loader@8.2.1
    │ ├── @nuxt/rspack-builder@4.3.1 (dependencies)
    │ └── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├── terser-webpack-plugin@5.3.16 [circular]
    ├─┬ time-fix-plugin@2.0.7
    │ ├── @nuxt/rspack-builder@4.3.1 (dependencies)
    │ └── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├── url-loader@4.1.1 [deduped]
    ├─┬ vue-loader@17.4.2 peer#23a6 (2 variations)
    │ ├── @nuxt/rspack-builder@4.3.1 (dependencies)
    │ └── @nuxt/webpack-builder@4.3.1 (dependencies)
    ├─┬ webpack-dev-middleware@7.4.5 peer#82b0 (2 variations)
    │ ├── @nuxt/rspack-builder@4.3.1 (dependencies)
    │ └── @nuxt/webpack-builder@4.3.1 (dependencies)
    └─┬ webpackbar@7.0.0
      ├── @nuxt/rspack-builder@4.3.1 (dependencies)
      └── @nuxt/webpack-builder@4.3.1 (dependencies)

Found 1 version of serialize-javascript

Now I can see that the vulnerable package is mostly used with the Webpack bundler, but it's also used by nitropack.

I checked the Nitro source code to see how it was used, and I found out that @rollup/plugin-terser is used when building the Nitro server. I finally know how exactly the vulnerability might affect me.

My feedback

The vulnerability as displayed on the npmx page was not really helpful - I had no idea how Nuxt used the vulnerable package, so I could not assess right away what were the concrete risks for my case :

• Is it used as a dev dependency, which could endanger my PC ?
• Is it used in the prod build, introducing a security flaw in my own app ?
• Does it affects my usage at all ?

It's also worth mentioning that the vulnerable package is not listed at all in the dependencies show in the npmx UI, so there is no way to investigate this from npmx itself, or at the very least not in a intuitive way.

After all this digging, I'm still not sure exactly how the vulnerabilty could concretely be used against me. Since it only affects the Nitro build step, I suppose it's mostly fine, but I have no way to my knowledge to really be aware of the consequences of not patching it, unless I deep dive into the librairies source code, or open an issue on the Nitro/Rollup plugins repo (and I would rather avoid bothering the maintainers if possible).

Speaking of issues, in this specific case there is actually an issue with a linked PR opened to update the vulnerable dependency in the @rollup/plugin-terser. I feel that would be a nice information to surface in npmx to have an easy way to follow progress on patching the vulnerability, but that might a bit complex to do.

Summary

What I would want to have to solve my issue:

• Show a pnpm why-ish explanation of why the vulnerable dependency is installed in the package page.
• Optional: Add a description/tag to indicate how the dependency is used :
  • Only installed in specific use cases (ex: Webpack bundler for Nuxt)
  • Only relevant for dev/build/etc., or will impact production code
  • Has technicaly a vulnerability, but it is not applicable in how it's currently used
• Optional: Highlight existing issues and/or PR if available to track the vulnerability patching progress

The data for the description/tag might not be available right now, but I think it's worth considering.

Additional information

• Would you be willing to help implement this feature?

Final checks

• Read the contribution guide.
• Check existing issues.