Last Updated on August 31, 2022 by Christopher G Mendla
A critical part of securing a site is to make sure that Angular and the packages that you are using are up to date. Out of date packages can result in security vulnerabilities.
The Problem
Any platform currently used for web applications will age over time. The core platform and it’s components will eventually create vulnerabilities in your site.
The Solution: Check for outdated packages and upgrade if necessary.
NPM provides tools to check for outdated packages similar to the way you can check a Ruby on Rails app for outdated gems or how you check WordPress for outdated plugins.
How to check
The first step is to go to your project and run npm outdated. I use VS Code. The way my current dev environment is configured is such that I right click on the project’s root folder and select open in integrated terminal. Then, at the prompt, I simply enter npm outdated.
The result is a list of outdated packages in your app. The results are color coded:
- RED – These packages should be updated as soon as possible as there could be vulnerabilities
- YELLOW – There is a higher version available but there is not a known vulnerability at this time
The results will look something like the following:
How to resolve outdated packages
WARNING – Updating packages COULD break your site.
Backup your site.
Even if you are using version control such as Git, it is a good idea to back up your site on the server before applying any package updates.
Make sure that your tests are up to date
Good code coverage, i. e. over 90 percent, will help you quickly spot any trouble caused by updating your packages. Run your tests before updating and again, after an update.
Update your packages incrementally.
You will have better control if you update packages in logical groups. In the example here, there are only a handful of packages that are outdated so I updated them all with npm update.
Running npm update changed a number of packages
npm update
added 7 packages, removed 16 packages, changed 13 packages, and audited 1052 packages in 46s
149 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilitiesAs you can see, the command added, removed and changed packages. It is showing that it now found 0 vulnerabilities. Running ng test shows all tests passing
Chrome 104.0.5112.102 (Windows 10): Executed 3 of 3 SUCCESS (0.006 secs / 0.211 secs)
TOTAL: 3 SUCCESSAll of the packages are at the ‘wanted’ version. However, the wanted version can be, and is usually, lower than the latest version
As you can see, there were no changes. Suppose we wanted to update typescript to the latest version which is 4.8.2. We can do that with npm install [email protected] That will cause npm to install that exact version. Running that command will give
PS C:\Users\Chris\Documents\Angular\kitchen-sink\kitchen-sink> npm install [email protected]
removed 1 package, changed 1 package, and audited 1052 packages in 3s
149 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilitiesIf we run npm outdated we will no longer see typescript listed as it is now at the latest release
To be sure that the typescript update did not cause any issues, we will re-run our tests. All tests passed with “3 specs, 0 failures, randomized with seed 54503”
Summary
If you are developing sites in Angular, testing, linting and updating outdated versions of Angular and your packages will go a long way toward keeping your site safe from hackers.