Erste Schritte mit der statischen Analyse von JavaScript

Beim Schreiben von JavaScript-Code ist die statische Analyse entscheidend, um die Qualität und Lesbarkeit des Codes zu erhalten und seine Sicherheit zu gewährleisten. Dabei handelt es sich um einen automatisierten Prozess, bei dem Ihr Quellcode vor der Ausführung durchsucht und geprüft wird. So lassen sich problematische Codierungsmuster, Bugs, Sicherheitslücken und Fehler erkennen, die zu schwerwiegenden Sicherheitsproblemen oder Anwendungsausfällen führen könnten.

JavaScript ist für seine Dynamik und Flexibilität bekannt. Deshalb kann die statische Analyse besonders wertvoll sein. Sie kann das Fehlen eines herkömmlichen Compilers ausgleichen und bietet Entwicklern ein Werkzeug, mit dem sie potenzielle Probleme früh im Entwicklungszyklus erkennen können. Das ist vermutlich einer der Gründe, warum Sie über den Einsatz von TypeScript nachgedacht haben, oder?

Statische Analyse verstehen

Die statische Analyse, auch statische Codeanalyse genannt, ist eine Debugging-Methode, bei der der Quellcode automatisch untersucht wird, bevor ein Programm ausgeführt wird. Dabei wird der Code anhand eines oder mehrerer Regelwerke geprüft.

Bei der statischen Analyse wird der Quellcode einer Softwareanwendung untersucht, ohne die Anwendung selbst auszuführen. Im Gegensatz zur dynamischen Analyse, bei der Code durch Ausführung bewertet wird, erfolgt die statische Analyse außerhalb der Laufzeitumgebung. Mit dieser Methode lassen sich Fehler, Bugs und andere Probleme finden, die der Anwendung oder ihrer Funktionalität schaden könnten. Außerdem hilft sie Entwicklern, die Codebasis zu verstehen, die Codequalität sicherzustellen und im gesamten Projekt Codierungsstandards einzuhalten.

In JavaScript lässt sich die statische Analyse mit Tools wie ESLint, JSHint und TSLint durchführen. Hier sehen Sie ein einfaches Beispiel dafür, wie ESLint funktioniert:

var user = {};
console.log(user.name);

Bei der Ausführung von ESLint für diesen Code wird folgende Warnung angezeigt: Unexpected console statement no-console

Diese Warnung hilft Entwicklern dabei, console.log-Anweisungen im Produktionscode zu vermeiden, da diese als schlechte Praxis gelten.

Statische vs. dynamische Analyse

Sehen wir uns statische und dynamische Analysen sowie den Nutzen der statischen Analyse gegenüber der dynamischen Analyse in bestimmten Situationen genauer an. 

Hier sehen Sie ein Beispiel für eine statische Analyse mit ESLint:

const ESLint = require('eslint');

const eslint = new ESLint({ fix: true });

async function lintCode() {
  const results = await eslint.lintFiles(["./**/*.js"]);
  await ESLint.outputFixes(results);
}

lintCode().catch((error) => {
  process.exitCode = 1;
  console.error(error);
});

Dieses Skript verwendet die programmatische API von ESLint, um alle JavaScript-Dateien in Ihrem Projekt statisch zu analysieren und dabei alle Probleme zu beheben, die sich automatisch korrigieren lassen.

Was ist dynamische Analyse?

Bei der dynamischen Analyse wird eine Anwendung während ihrer Ausführung analysiert. Sie bietet einen Echtzeit-Einblick in die Leistung, das Verhalten und die Ausgabe des Systems. Anders als die statische Analyse setzt die dynamische Analyse voraus, dass das Programm ausgeführt wird. Sie wird häufig beim Debugging eingesetzt, um Laufzeitprobleme zu finden, die bei der statischen Analyse möglicherweise unentdeckt bleiben.

Wenn Sie JavaScript im Browser oder in einer Node.js-Laufzeitumgebung verwenden, können Sie für die dynamische Analyse console.time() und console.timeEnd() nutzen:

function someFunction() {
  // Some code here...
}

console.time('someFunction');

someFunction();

console.timeEnd('someFunction');

Dieses Skript gibt aus, wie lange die Ausführung von someFunction () dauert, und ermöglicht so eine einfache Form der dynamischen Analyse.

Für native Node.js-Anwendungen können Sie mit dem integrierten Modul node:perf_hooks die Ausführungszeit einer Funktion messen:

const { performance } = require('perf_hooks');

function someFunction() {
  // Some code here...
}

const start = performance.now();

someFunction();

const end = performance.now();

console.log(`Time taken: ${end - start}ms`);

In der Anwendungssicherheit werden Tools für dynamische Anwendungssicherheitstests (DAST) eingesetzt, um Webanwendungen im laufenden Betrieb zu analysieren. Sie können dabei helfen, Sicherheitslücken wie Injection-Angriffe, Cross-Site-Scripting (XSS) und mehr aufzudecken. Erfahren Sie mehr über SAST vs. DAST und wie Sie beide kombinieren.

Der Nutzen der statischen Analyse gegenüber der dynamischen Analyse in bestimmten Situationen

Statische und dynamische Analysen haben jeweils eigene Vorteile und werden häufig in verschiedenen Phasen des Softwareentwicklungszyklus gemeinsam eingesetzt, um Codequalität und Sicherheit zu gewährleisten. In bestimmten Situationen bietet die statische Analyse jedoch klare Vorteile gegenüber der dynamischen Analyse.

• Frühe Fehlererkennung: Die statische Analyse kann direkt nach dem Schreiben des Codes ausgeführt werden. So können Sie Probleme früh im Entwicklungszyklus erkennen und beheben, noch bevor die Tests beginnen. Das spart viel Zeit und senkt die Kosten.

• Umfassende Codeabdeckung: Statische Analysetools durchsuchen die gesamte Codebasis. Die dynamische Analyse hingegen testet nur die Codeabschnitte, die während eines bestimmten Durchlaufs ausgeführt werden.

• Einhaltung von Codierungsstandards: Statische Analysetools setzen Codierungsstandards und Best Practices durch. Sie können so konfiguriert werden, dass sie Abweichungen markieren und dadurch zu einer gleichbleibenden Codequalität beitragen.

Statische Analyse in JavaScript einsetzen 

JavaScript wird häufig für die Erstellung interaktiver Webanwendungen eingesetzt und ist eine dynamische, schwach typisierte Sprache. Das bedeutet, dass Variablen in JavaScript Werte beliebigen Typs enthalten können, ohne dass eine Typprüfung erzwungen wird. Diese Flexibilität kann jedoch auch dazu führen, dass Bugs und Sicherheitslücken unentdeckt bleiben.

Sehen Sie sich zum Beispiel folgenden JavaScript-Code an:

function addNumbers(a, b) {
  return a+b;
}

console.log(addNumbers(1, 2));
// Outputs: 3

console.log(addNumbers(1, "2"));
// Outputs: "12"

Im obigen Beispiel soll addNumbers zwei Zahlen addieren. Aufgrund des schwachen Typsystems von JavaScript werden jedoch auch Zeichenfolgen und Zahlen miteinander verkettet, was wahrscheinlich nicht beabsichtigt ist. Dieses Beispiel unterstreicht die Bedeutung der statischen Analyse in JavaScript.

In JavaScript ist die statische Analyse entscheidend für die Sicherheit des Codes. Sie kann dabei helfen, im Code verborgene Sicherheitslücken aufzudecken, die von Angreifern ausgenutzt werden könnten. Angesichts der zunehmenden Bedeutung der Cybersicherheit sind statische Analysetools in Ihrem Entwicklungsprozess eher eine Notwendigkeit als eine Option.

Wie statische Analyse Codequalität und Sicherheit in JavaScript verbessert

Codequalität

Die statische Analyse hilft dabei, Codierungsstandards und Stilrichtlinien einzuhalten. Dadurch wird der Code konsistenter und lässt sich leichter lesen und verstehen. Außerdem erkennt sie potenzielle Probleme wie ungenutzte Variablen, nicht erreichbaren Code und redundante Bedingungen. So wird Ihr Code sauberer und effizienter.

Sehen Sie sich zum Beispiel folgenden JavaScript-Code an:

let x;
if (x = 10) {
  console.log("x is 10");
} else {
  console.log("x is not 10");
}

Bei der Ausführung von ESLint für diesen Code wird folgender Fehler angezeigt: Expected a conditional expression and instead saw an assignment no-cond-assign

Dieser Fehler hilft Entwicklern dabei, häufige Fehler zu vermeiden, etwa ein einzelnes Gleichheitszeichen für einen Vergleich zu verwenden, obwohl es sich dabei tatsächlich um einen Zuweisungsoperator handelt.

Codesicherheit

Statische Analysetools können eine Vielzahl von Sicherheitslücken erkennen, darunter Injection-Angriffe, Cross-Site-Scripting (XSS), unsichere Zufallszahlengenerierung und mehr. Sie ermöglichen es, automatisch nach solchen Sicherheitslücken zu suchen. Das ist deutlich effizienter und zuverlässiger als eine manuelle Codeprüfung.

Sehen Sie sich zum Beispiel folgenden Node.js-Code an:

const express = require('express');
const Sequelize = require('sequelize');

const access_token = 'a_sample_token';
const app = express();
const sequelize = new Sequelize('database', 'username', 'password', {
  dialect: 'sqlite',
  storage: 'data/juiceshop.sqlite'
});

app.post('/login', function (req, res) {
  sequelize.query('SELECT * FROM Products WHERE name LIKE ' +  req.body.username);
});

app.get('/test', function(req,res) {
  const test = null;
  const dog = test?.dog;
  console.log(dog);
});

app.get('/some/path', function(req, res) {
  res.redirect(req.param("target"));
});

window.addEventListener("message", (event) => {
  console.log(event.data);
});

Können Sie alle Sicherheitslücken darin finden?

Mit Snyk ist das zum Glück ganz einfach. Wenn Sie die Snyk-Erweiterung für VS Code in Ihrer IDE installieren, erhalten Sie in Echtzeit Feedback zur Sicherheit Ihres Codes. Nachdem Sie die Datei gespeichert haben, sehen Sie die Ergebnisse der Sicherheitsanalyse von Snyk direkt im Editor – ähnlich wie bei einem Linter.

Bei der Analyse dieses Codes mit Snyk werden folgende Warnungen angezeigt:

• SQL-Injection in der Route /login

• Im Code fest hinterlegtes Geheimnis für ein Zugriffstoken

Eine Sicherheitslücke durch Open Redirect in der Route /some/path

Tatsächlich verbergen sich dort noch ein paar weitere Probleme. Möchten Sie herausfinden, welche? Melden Sie sich kostenlos bei Snyk an und probieren Sie es aus!

Einführung in Abstract Syntax Trees (ASTs)

Der Abstract Syntax Tree, kurz AST, ist ein grundlegendes Konzept in der Programmierung und Codesicherheit. Er lässt sich als Baum darstellen, der die abstrakte syntaktische Struktur von Quellcode in einer Programmiersprache abbildet. Jeder Knoten des Baums steht für ein Element im Quellcode.

Bei der statischen Analyse von JavaScript spielt der Abstract Syntax Tree eine zentrale Rolle. Bei der statischen Analyse wird Code untersucht, ohne ihn auszuführen. Sie funktioniert wie eine automatische Codeprüfung und sucht nach potenziellen Bugs, Sicherheitslücken und Verstößen gegen Programmierkonventionen. ASTs sind dabei von großer Bedeutung, da sie den Quellcode strukturiert und leichter navigierbar darstellen. So können statische Analysetools den Code effizienter durchlaufen und Muster erkennen, die auf Bugs oder Sicherheitslücken hindeuten.

Sehen Sie sich folgenden JavaScript-Code an:

function greet (name) {
  return `Hello, ${name}!`;
}

Eine vereinfachte Version des zugehörigen AST würde so aussehen:

Program
  FunctionDeclaration
    Identifier (name: greet)
    BlockStatement
      ReturnStatement
        TemplateLiteral
          TemplateElement (value: Hello, )
          Identifier (name: name)
          TemplateElement (value: !)

Diese Darstellung hilft statischen Analysetools, die Struktur und den Ablauf des Codes zu verstehen. Dadurch lassen sich potenzielle Probleme leichter erkennen.

Mit AST Explorer die Struktur von JavaScript-Code verstehen

AST Explorer ist ein leistungsstarkes Tool, mit dem Entwickler nachvollziehen können, wie ein Codeabschnitt in einen Abstract Syntax Tree umgewandelt wird. Das Tool unterstützt verschiedene Sprachen, darunter JavaScript, und eignet sich hervorragend, um mehr über ASTs zu lernen und damit verbundene Probleme zu debuggen.

So verwenden Sie AST Explorer mit JavaScript:

1. Rufen Sie AST Explorer auf.

2. Wählen Sie im oberen Menü „JavaScript“ als Sprache aus.

3. Fügen Sie JavaScript-Code in den linken Bereich ein oder schreiben Sie ihn dort.

4. Im rechten Bereich wird automatisch der AST des eingegebenen Codes angezeigt.

Wenn Sie beispielsweise die Funktion greet aus unserem vorherigen Beispiel eingeben:

function greet (name) {
  return `Hello, ${name}!`;
}

erscheint der zugehörige AST im rechten Bereich. Dort wird die Baumstruktur Ihres Codes dargestellt. Sie können sich durch den Baum bewegen, um besser zu verstehen, wie Ihr Code interpretiert wird.

ASTs zu verstehen, ist ein wichtiger Bestandteil, um die statische Analyse von JavaScript zu beherrschen. Sie erhalten wertvolle Einblicke in die Struktur Ihres Codes, dessen Verarbeitung durch die JavaScript-Engine und die Interpretation durch statische Analysetools. Dieses Wissen hilft Ihnen, effizienteren, sichereren und fehlerfreien Code zu schreiben.

Drei statische Analysetools für JavaScript

Statische Analysetools untersuchen den Code, ohne ihn auszuführen – daher die Bezeichnung „statisch“. Sie parsen den Quellcode und erstellen einen Abstract Syntax Tree (AST), um Struktur und Semantik des Codes zu verstehen. Anschließend wenden sie verschiedene Regeln und Heuristiken auf den AST an, um potenzielle Probleme zu erkennen.

Für JavaScript stehen mehrere beliebte statische Analysetools zur Verfügung. Im Folgenden stellen wir einige davon vor.

1. Snyk Code

Snyk Code können Sie über die CLI, in Ihrer IDE oder mithilfe einer Git-Integration verwenden. Das Tool führt statische Sicherheitsanalysen durch. Zusätzlich zu den Standardfunktionen der statischen Analyse bietet Snyk Code eine tiefgehende Codeanalyse auf Basis symbolischer KI. So lassen sich komplexe Sicherheitslücken über mehrere Schritte hinweg erkennen, die andere Tools möglicherweise übersehen.

Sehen wir uns an, wie die statische Analyse dabei helfen kann, ein häufiges Sicherheitsproblem – SQL-Injection – zu erkennen. Betrachten Sie dazu den folgenden JavaScript-Codeausschnitt:

let query = "SELECT * FROM users WHERE name = '" + userInput + "'";

Im obigen Code wird userInput direkt an eine SQL-Abfrage angehängt. Wenn ein Angreifer userInput kontrolliert, kann er die Abfrage manipulieren, um vertrauliche Informationen auszulesen oder schädliche Aktionen auszuführen. Ein statisches Analysetool wie Snyk könnte dieses Muster als potenzielle SQL-Injection-Sicherheitslücke markieren.

Um Snyk Code zu verwenden, müssen Sie sich kostenlos bei Snyk anmelden und die Snyk CLI installieren. Alternativ können Sie die Snyk-Erweiterung für VS Code verwenden, um in Echtzeit Feedback zur Sicherheit Ihres Codes zu erhalten:

npm install -g snyk
snyk auth
snyk test

Mit den obigen Befehlen installieren wir die Snyk CLI, authentifizieren uns mit unserem Snyk-Konto und führen einen Snyk-Test für unseren Code aus.

2. ESLint für die statische Analyse von JavaScript

ESLint überprüft Ihren JavaScript-Code auf Stilprobleme, potenzielle Bugs und Sicherheitslücken. Dank seiner erweiterbaren Architektur können Entwickler eigene Regeln definieren und verwenden.

ESLint untersucht Ihren Code auf Muster und weist Sie auf potenzielle Probleme hin, die zu Bugs oder Inkonsistenzen führen könnten, etwa ungenutzte Variablen, nicht erreichbarer Code und fehlende Semikolons. Dazu parst ESLint Ihren Code und prüft ihn anhand eines von Ihnen festgelegten Regelwerks.

Hier sehen Sie eine grundlegende .eslintrc.json-Konfigurationsdatei für ESLint:

{
  "extends": ["eslint:recommended", "plugin:security/recommended"],
  "plugins": ["security"],
  "rules": {
     "security/detect-sql-injection": "warn"
  }
}

In der obigen Konfiguration erweitern wir die empfohlenen ESLint-Regeln und die empfohlenen Regeln des Sicherheits-Plugins. Außerdem aktivieren wir eine Warnung für potenzielle SQL-Injection-Sicherheitslücken.

Sie können ESLint so konfigurieren, dass eine Vielzahl von Formatierungsregeln eingehalten wird – darunter Einrückungen, die Verwendung von Semikolons, die Zeilenlänge und einfache oder doppelte Anführungszeichen für Strings. Wenn Sie beispielsweise zwei Leerzeichen für Einrückungen bevorzugen, können Sie ESLint so einrichten, dass Sie gewarnt werden, sobald der Code gegen diese Regel verstößt.

Darüber hinaus hilft ESLint, Fehler zu vermeiden, indem es Sie auf häufige Fehler und potenzielle Probleme im Code aufmerksam macht. Wenn Sie ESLint in Ihren Entwicklungs-Workflow integrieren, können Sie Fehler erkennen und beheben, bevor sie in die Produktion gelangen.

3. Prettier

Prettier ist eine Open-Source-JavaScript-Bibliothek, die als meinungsstarker Code-Formatter dient. Sie hilft dabei, einen einheitlichen Programmierstil in einer gesamten Codebasis oder einem Projekt durchzusetzen. Als Entwickler:in haben Sie vielleicht schon erlebt, wie Diskussionen über den Programmierstil vom Wesentlichen ablenken können. Prettier kümmert sich darum, damit Sie sich auf das Schreiben von Code konzentrieren können, statt sich Gedanken über dessen Formatierung zu machen.

Prettier unterstützt viele Sprachen, darunter JavaScript, TypeScript, CSS, HTML und Markdown. Es lässt sich in die meisten Editoren integrieren und funktioniert sofort – Sie müssen also keine Zeit in komplexe Konfigurationsdateien investieren. Prettier analysiert Ihren Code zunächst in einen abstrakten Syntaxbaum (AST), den wir bereits zuvor kennengelernt haben. Anschließend wendet es Formatierungsregeln an und gibt den neu formatierten Code aus.

Hier sehen Sie ein Beispiel für Code vor und nach der Formatierung mit Prettier:

Vor Prettier:

let foo=function( arg1, arg2 ) {
    if (arg1>arg2) {
        return arg1
    } else {
        return arg2
    }
}

Nach Prettier:

let foo = function(arg1, arg2) {
  if (arg1 > arg2) {
    return arg1;
  } else {
    return arg2;
  }
};

Wie Sie sehen, hat Prettier die Abstände und die Position der Klammern vereinheitlicht und außerdem am Ende der Return-Anweisungen ein Semikolon eingefügt.

Während Prettier sich ausschließlich auf die Formatierung von Code konzentriert, prüft ESLint JavaScript-Code auf Muster, die potenziell zu Fehlern führen können. ESLint lässt sich umfassend konfigurieren und anpassen, damit bestimmte Programmierstandards und Konventionen eingehalten werden.

Hier ergänzen sich Prettier und ESLint. Prettier sorgt für eine einheitliche Formatierung Ihres Codes, während ESLint prüft, ob Ihr Code Best Practices entspricht und keine potenziellen Fehler enthält. Gemeinsam können diese beiden Tools die Qualität Ihres Codes deutlich verbessern.

Sie können Prettier sogar so einrichten, dass Ihr Code bei jedem Speichern einer Datei im Editor formatiert wird, während ESLint Ihren Code auf potenzielle Probleme überprüft. So können Sie Probleme erkennen und beheben, bevor sie sich verschärfen.

Hier sehen Sie ein Beispiel für die Einrichtung in einer .eslintrc.json-Datei:

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

In dieser Konfiguration übernehmen wir die empfohlenen Regeln von ESLint und fügen Prettier als Plugin hinzu. Außerdem setzen wir die Regel prettier/prettier auf „error“. Das bedeutet: Immer wenn unser Code nicht dem Format von Prettier entspricht, gibt ESLint einen Fehler aus.