Vulnerable and Outdated Components

Using components with known vulnerabilities

The Vulnerable and Outdated Components category currently sits at position six on the OWASP Top Ten. In 2017, the category was called Using Components with Known Vulnerabilities and sat at position nine. It moved up in rank in 2021 partly because the issue is difficult to test and assess risk for. In fact, it actually ranked number two in the 2021 OWASP Top Ten community survey.

The category has “Components” in the name, but JavaScript developers probably refer to them as dependencies. It's almost impossible these days to be a JavaScript developer and not work with the npm registry, which hosts more than one million shared JavaScript packages, making it the largest software registry in the world. The npm registry is one of the organizations at the center of the flourishing JavaScript open-source community.

Using shared libraries, frameworks, or other dependencies speeds up development and is an essential part of a healthy programming language ecosystem. It can save time, and it is often safer and more reliable to use a trusted dependency than trying to reinvent the wheel by writing our own packages. Popular frameworks have often gone through years of iteration, maturation, and enhancement by hundreds if not thousands of developers. For example, as of this writing, React has over 1,600 contributors.

What's in a bundle?

Having a plethora of packages to choose from is both a blessing and a curse. Packages that we import into our projects often have their own dependencies which have their own dependencies, and so on. A project's dependency graph can get pretty complicated quickly.

Luckily, the two most popular JavaScript package managers, npm and Yarn, have tools that can help increase visibility into our JavaScript bundles. Assuming that at least npm v5 is used (verify with npm -v), a package-lock.json file is automatically generated/updated for any operation that modifies any dependency. Similarly, a yarn.lock file is generated when using yarn. These files describe the entire dependency tree for a project and ensure that project installations always use the exact same dependencies, no matter where or when it is installed. This is important for ensuring consistency since different versions of packages can result in different behavior even in minor and patch versions because semantic versioning is not always perfectly followed.

The following package-lock.json file contains the dependency tree for react. We can see that react requires loose-envify which requires js-tokens.