Investigate GitHub Dependabot patches for npm packages

TL;DR use Dependabot if you are using GitHub.

Dependabot alerts can give you a superpower – the ability to secure your project by keeping dependency-based vulnerabilities out of your code.

It can be a little bit overwhelming to keep track of all the package dependencies in a TypeScript/JavaScript application. Lets play with a dummy project to see what we can do.

mkdir hello-cdk && cd hello-cdk
cdk init app --language typescript

Now we will have a package.json that looks like this, if you have used cdk version 2.85.

{
  "name": "hello-cdk",
  "version": "0.1.0",
  "bin": {
    "hello-cdk": "bin/hello-cdk.js"
  },
  "scripts": {
    "build": "tsc",
    "watch": "tsc -w",
    "test": "jest",
    "cdk": "cdk"
  },
  "devDependencies": {
    "@types/jest": "^29.5.1",
    "@types/node": "20.1.7",
    "jest": "^29.5.0",
    "ts-jest": "^29.1.0",
    "aws-cdk": "2.85.0",
    "ts-node": "^10.9.1",
    "typescript": "~5.0.4"
  },
  "dependencies": {
    "aws-cdk-lib": "2.85.0",
    "constructs": "^10.0.0",
    "source-map-support": "^0.5.21"
  }
}

As you can see there are some dependencies added to the project, however that is not all the dependencies we have. The projects dependencies has their own dependencies and so on, and this will create a supply chain of npm packages. The command, npm ls, will print to stdout all the versions of packages that are installed, as well as their dependencies when --all is specified, in a tree structure.

By running this command we will get a feeling for how many dependencies there are in the project.

npm ls --all | wc -l

That command gives me 713 packages, that's pretty much just by creating a new application. If I do the same exercise with npx create-react-app my-app I will get 3200 packages.

This really illustrate the importance of having a tool like Dependabot to help you to keep track of all the dependencies and their vulnerabilities.

If I add a vulnerable package to the project, npm install dash, and I use Dependabot, then I will get an alert about the vulnerable package directly when this change is pushed to GitHub.

As you can see there is a lot of information here that is valuable, however in this case there is no patch to the problem. And every time I push something to the repository I will get a heads up that there are vulnerabilities in the repository.

Lets add another package, npm install lodash@3.0.0, now there will even more Depandabot alerts on GitHub.

This time the alerts has a solution to the problem so it has created a pull request that fixes the problem.

The message from Dependabot isn't always clear on which dependency in your project that is affected. I have stumbled over pull requests from Dependabot that only patches the package that has the vulnerability, so the patch is done on the package-lock.json file. For example, lets say that this package has got a Dependabot pull request, js-yaml@3.14.1, that will bump the version of it. When this happens I like to know which of my applications packages are having a dependency on this package. To figure that out you can use npm ls again.

npm ls js-yaml@3.14.1

This will give the dependency tree for this package in the project.

Now I can see that both dash and ts-jest has a dependency on this package. Perhaps we should update these packages instead. The tool for this job is npm-check-updates. However you could also configure Dependabot to create pull requests when there are new versions of a npm package in your application.

npm install -g npm-check-updates

With that installed you can use ncu to see what can be upgraded and then upgrade it for you.

With ncu you can either upgrade all your packages or be more fine grained and just upgrade the packages you want to, as you can see from the package usage section:

# upgrade only mocha
ncu mocha
ncu -f mocha
ncu --filter mocha

# upgrade packages that start with "react-"
ncu react-*
ncu "/^react-.*$/"

# upgrade everything except nodemon
ncu \!nodemon
ncu -x nodemon
ncu --reject nodemon

# upgrade only chalk, mocha, and react
ncu chalk mocha react
ncu chalk, mocha, react
ncu -f "chalk mocha react"

# upgrade packages that do not start with "react-".
ncu \!react-*
ncu '/^(?!react-).*$/' # mac/linux
ncu "/^(?!react-).*$/" # windows

There is one more npm command I want to mention and that is npm view.

And it's dependencies.

Happy npming!