Kategorien
Angular JavaScript

Identifizieren von ungenutzten NPM Packeten mit depcheck in Angular

Das npm Packet depcheck kann ungenutzten NPM Packete finden. Diese Information ist wichtig, weil fremde Packete ein Sicherheitsrisiko darstellen.

Das Risiko geht von fremden npm Packeten

Es gibt verschiedene potenzielle Angriffe oder Sicherheitsrisiken, die mit npm-Paketen verbunden sein können. Hier sind einige Beispiele:

  1. Maliziöse Pakete: Angreifer können böswillige oder schädliche Pakete veröffentlichen, die als nützliche oder beliebte Bibliotheken getarnt sind. Diese Pakete können schädlichen Code enthalten, der dein System oder deine Anwendung beeinträchtigen kann.
  2. Abhängigkeitskette: Wenn du npm-Pakete in deinem Projekt verwendest, können diese wiederum von anderen Paketen abhängen. Angreifer könnten eine Schwachstelle in einer Abhängigkeit ausnutzen, um Zugriff auf dein System zu erlangen oder deine Anwendung zu kompromittieren.
  3. Verwaiste Pakete: Verwaiste Pakete sind solche, deren ursprüngliche Entwickler die Wartung eingestellt haben. Diese Pakete erhalten möglicherweise keine Sicherheitsupdates mehr und könnten anfällig für Angriffe sein. Verwenden deiner Anwendung veraltete und unsichere Pakete erhöht das Risiko von Sicherheitslücken.
  4. Manipulation von Paketregistrierungen: Ein Angreifer könnte versuchen, die Infrastruktur der Paketregistrierung zu kompromittieren und schädliche Pakete in den offiziellen Paketkanälen bereitzustellen. Dies könnte dazu führen, dass du unwissentlich gefährliche Pakete installierst.
  5. Code-Injektion: Wenn du npm-Pakete verwendest, ist es wichtig, darauf zu achten, dass der Code sicher ist. Ein fehlerhaftes oder unsicher implementiertes Paket kann Angreifern die Möglichkeit bieten, schädlichen Code in deine Anwendung einzuschleusen.

Die Funktionsweise von Depcheck

Depcheck analysiert den Quellcode deines Projekts, um festzustellen, welche Pakete tatsächlich verwendet werden. Dabei untersucht es verschiedene Aspekte des Codes, um die Verwendung von Paketen zu ermitteln:

  1. Importanweisungen: Depcheck überprüft die Importanweisungen in den JavaScript-/TypeScript-Dateien. Es sucht nach importierten Modulen, Klassen, Funktionen oder Variablen und ermittelt so, welche Pakete im Code verwendet werden.
  2. Referenzen und Verwendungen: Depcheck analysiert den Code, um festzustellen, ob die importierten Module, Klassen, Funktionen oder Variablen tatsächlich verwendet werden. Es überprüft, ob Funktionen aufgerufen, Methoden aufgerufen, Eigenschaften gelesen oder Variablen referenziert werden. Wenn ein importiertes Element nicht verwendet wird, markiert depcheck das zugehörige Paket als potenziell unbenutzt.
  3. Berücksichtigung verschiedener Dateitypen: Depcheck kann auch andere relevante Dateitypen analysieren, wie z.B. HTML-Dateien oder Konfigurationsdateien, um die Verwendung von Paketen zu ermitteln. Beispielsweise können in HTML-Dateien verwendete Direktiven oder Komponenten auf Pakete hinweisen, die im Code selbst möglicherweise nicht explizit importiert werden.

Einbinden von depcheck in Angular

Die Installation erfolgt über

npm install -g depcheck typescript

Beispiel Ausgabe bei einem Angular Projekt:

Unused dependencies
* @types/quill
* @types/vis
* bootstrap
* ngx-quill
* tslib
Unused devDependencies
* @angular-devkit/build-angular
* @angular/cli
* @angular/compiler-cli
* @types/jasmine
* jasmine-core
* karma
* karma-chrome-launcher
* karma-coverage
* karma-jasmine
* karma-jasmine-html-reporter
* typescript

In der package.json befanden sich 11 dev Dependencies und 19 normale Dependencies. Es wurden alle dev Dependencies falsch positiv erkannt. Von den potenziel gefährlicheren normalen Packete, die nicht nur im dev Modus existieren, wurden korrekt 13 Packete als verwendet erkannt. Die 5 Packete kann man einfach per Namen oder Regex (@types/*) entfernen.

Es wird tatsächlich erkannt, das ngx-quill in dem Beispiel als einziges Packet nicht verwendet wird.

Es muss also eine Menge von Hand ausgechlossen werden, wofür ein spezielle depcheck Angular Erweiterung nützlich wäre, aber leider noch nicht existiert im Gegensatz zu React JSX und Vue.js.

Fazit

Depcheck ist nützlich um unbenutzte Packete zu identifizieren, um die Sicherheit von Angular Anwendungen zu gewährleisten.

Außerdem sollten alle Packete fortwährend auf Sicherheitslücken gescannt werden. Wenn ein Packet nicht mehr weiter entwickelt wird oder Sicherheitslücken nicht schließt, sollte es ausgetauscht werden gegen eine aktuelle Variante.