Effortlessly finding vulnerabilities in npm packages with VS Code

Brian Vermeer 🧑🏼‍🎓🧑🏼‍💻 - Apr 7 '20 - - Dev Community

Visual Studio Code is probably the most widely-used code editor for JavaScript developers. As 80 or maybe even 90 percent of the code developed is heavily dependent on open source packages, developers need to know what these packages do. Do you, for instance, know for all the packages you import if they contain known security vulnerabilities? The free, open source, Vuln Cost extension for VS Code can help you with this.

Vuln Cost in action

When adopting DevSecOps, developers also need to be aware of security issues. Specifically, when looking at the package you import from the “big bad” internet, the Vuln Cost extension for VS Code gives you instant feedback on possible security issues.
The Vuln Cost extension shows you inline how many vulnerabilities a specific package contains the moment you import it into your code.

If the package does not have any known vulnerabilities, Vuln Cost will not bother you at all. Only the package containing vulnerabilities is inline decorated by Vuln Cost. The quick fix has an option that takes you to a resource page about the vulnerabilities in this project.

Vuln Cost in JS files

Importing package in HTML from your favorite CDN

Another feature Vuln Cost supports is the scanning of HTML files. Importing scripts from your CDN’s — like UNPKG — will be scanned in a similar way as the npm package mentioned above. This way you are not surprised by vulnerabilities, even if you don’t use npm.

Vuln Cost on HTML

The Vuln Cost extension is easy to use and, most importantly, free. Install it from the VSCode marketplace and you are ready to go. For the basic functionality, you don’t need even need to register. However, if you want more actionable information you can sign up for a free Snyk OSS account. Not only can Snyk help you secure your whole project in many different ways, but it also boosts the Vuln Cost extension.

By signing up or using an already existing free Snyk account, Vuln Cost gives you a breakdown of the vulnerabilities. Most importantly it shows you if the vulnerabilities found have a low, medium or high severity. Next to this, it can show you more information about this vulnerability of where the security issues exist in your project. This might be in a direct or a transitive dependency. Last but not least where possible it provides you with package upgrade advice to the closest version containing a fix for your vulnerabilities.

Vuln Cost breakdown vulnerabilities

Remember, these more actionable features in Vuln Cost are, again, totally free. Just signing up freemium Snyk account is enough to enable it.

Vuln Cost on the VS Code marketplace

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .