Premiers pas avec l’analyse statique JavaScript

Lors de l’écriture de code JavaScript, l’analyse statique est essentielle pour préserver la qualité et la lisibilité du code, et en garantir la sécurité. Il s’agit d’un processus automatisé qui analyse et vérifie votre code source avant son exécution afin de repérer les pratiques de codage problématiques, les bugs, les vulnérabilités et les erreurs susceptibles d’entraîner de graves problèmes de sécurité ou des défaillances de l’application.

JavaScript est un langage réputé pour son dynamisme et sa flexibilité. L’analyse statique peut donc s’avérer particulièrement utile. Elle peut compenser l’absence d’un compilateur traditionnel et aider les développeurs à détecter les problèmes potentiels tôt dans le cycle de développement. C’est probablement l’une des raisons pour lesquelles vous avez envisagé d’adopter TypeScript, n’est-ce pas ?

Comprendre l’analyse statique

L’analyse statique, également appelée analyse statique du code, est une méthode de débogage qui examine automatiquement le code source avant l’exécution d’un programme. Elle analyse un ensemble de code au regard d’un ou plusieurs ensembles de règles de codage.

L’analyse statique consiste à examiner le code source d’une application logicielle sans exécuter cette dernière. Contrairement à l’analyse dynamique, qui évalue le code en l’exécutant, l’analyse statique est réalisée hors environnement d’exécution. Cette méthode est essentielle pour détecter les erreurs, les bugs et autres problèmes susceptibles de nuire à l’application ou à ses fonctionnalités. Elle aide également les développeurs à comprendre la base de code, à garantir sa qualité et à respecter les normes de codage dans l’ensemble du projet.

En JavaScript, l’analyse statique peut être effectuée à l’aide d’outils tels qu’ESLint, JSHint et TSLint. Voici un exemple simple du fonctionnement d’ESLint :

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

Lorsqu’ESLint analyse ce code, il affiche un avertissement : Unexpected console statement no-console

Cet avertissement aide les développeurs à éviter d’utiliser des instructions console.log dans leur code de production, une pratique considérée comme déconseillée.

Analyse statique et analyse dynamique

Examinons en détail l’analyse statique et l’analyse dynamique, ainsi que les avantages de l’analyse statique par rapport à l’analyse dynamique dans certaines situations.

Voici un exemple d’analyse statique avec 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);
});

Ce script utilise l’API programmatique d’ESLint pour effectuer une analyse statique de tous les fichiers JavaScript de votre projet et corriger au passage les problèmes qu’il peut résoudre.

Qu’est-ce que l’analyse dynamique ?

À l’inverse, l’analyse dynamique consiste à analyser une application pendant son exécution. Elle donne une vue en temps réel des performances, du comportement et des résultats du système. Contrairement à l’analyse statique, elle nécessite que le programme soit en cours d’exécution. Elle est souvent utilisée pour le débogage afin de détecter des problèmes à l’exécution qui pourraient échapper à l’analyse statique.

Par exemple, dans un navigateur ou un environnement d’exécution Node.js, vous pouvez utiliser console.time() et console.timeEnd() pour effectuer une analyse dynamique :

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

console.time('someFunction');

someFunction();

console.timeEnd('someFunction');

Ce script affichera le temps nécessaire à l’exécution de someFunction (), offrant ainsi une forme simple d’analyse dynamique.

Pour les applications Node.js natives, vous pouvez utiliser le module intégré node:perf_hooks afin de mesurer le temps d’exécution d’une fonction :

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`);

En sécurité des applications, les outils de test dynamique de la sécurité des applications (DAST) servent à analyser les applications web en cours d’exécution. Ils peuvent aider à détecter des vulnérabilités de sécurité telles que les attaques par injection, les scripts intersites (XSS), et bien plus encore. Pour en savoir plus, consultez SAST et DAST : pourquoi et comment les combiner.

Les avantages de l’analyse statique par rapport à l’analyse dynamique dans certaines situations

L’analyse statique et l’analyse dynamique ont chacune des avantages uniques et sont souvent utilisées ensemble à différentes étapes du cycle de vie du développement logiciel pour garantir la qualité et la sécurité du code. Dans certaines situations, toutefois, l’analyse statique présente un avantage indéniable sur l’analyse dynamique.

• Détection précoce des bugs : l’analyse statique peut être exécutée dès l’écriture du code. Vous pouvez ainsi détecter et corriger les problèmes tôt dans le cycle de développement, avant même le début des tests. Cela peut vous faire gagner beaucoup de temps et réduire les coûts.

• Couverture complète du code : les outils d’analyse statique analysent l’ensemble de la base de code, contrairement à l’analyse dynamique, qui ne teste que les parties du code exécutées lors d’une exécution donnée.

• Respect des normes de codage : les outils d’analyse statique imposent le respect des normes de codage et des bonnes pratiques. Vous pouvez les configurer pour signaler les écarts et ainsi préserver une qualité de code cohérente.

Utiliser l’analyse statique en JavaScript

JavaScript, souvent utilisé pour créer des applications web interactives, est un langage dynamique au typage faible. Cela signifie que les variables JavaScript peuvent contenir des valeurs de n’importe quel type sans vérification de type obligatoire. Cette flexibilité peut aussi entraîner des bugs et des vulnérabilités qui passent inaperçus.

Prenons par exemple le code JavaScript suivant :

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

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

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

Dans l’exemple ci-dessus, addNumbers est conçue pour additionner deux nombres. Toutefois, en raison du système de typage faible de JavaScript, elle concatène également les chaînes de caractères et les nombres, ce qui n’est probablement pas le comportement souhaité. Cet exemple souligne l’importance de l’analyse statique en JavaScript.

En JavaScript, l’analyse statique est essentielle pour préserver la sécurité du code. Elle peut aider à révéler des vulnérabilités dissimulées dans le code, que des acteurs malveillants pourraient exploiter. Compte tenu de l’importance croissante de la cybersécurité, intégrer des outils d’analyse statique à votre processus de développement est une nécessité, et non un simple choix.

Comment l’analyse statique améliore la qualité et la sécurité du code JavaScript

Qualité du code

L’analyse statique contribue au respect des normes et des styles de codage, ce qui rend le code plus cohérent, plus lisible et plus facile à comprendre. Elle peut également détecter des problèmes potentiels tels que les variables inutilisées, le code inaccessible, les conditions redondantes, et bien d’autres, pour rendre votre code plus propre et plus efficace.

Prenons par exemple le code JavaScript suivant :

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

Lorsqu’ESLint analyse ce code, il affiche une erreur : Expected a conditional expression and instead saw an assignment no-cond-assign

Cette erreur aide les développeurs à éviter les erreurs courantes, comme l’utilisation d’un seul signe égal pour une comparaison, alors qu’il s’agit en réalité d’un opérateur d’affectation.

Sécurité du code

Les outils d’analyse statique peuvent détecter un large éventail de vulnérabilités de sécurité, telles que les attaques par injection, les scripts intersites (XSS), la génération non sécurisée de nombres aléatoires, et bien plus encore. Ils permettent de vérifier automatiquement la présence de ces vulnérabilités, ce qui est beaucoup plus efficace et fiable qu’une revue manuelle du code.

Prenons par exemple le code Node.js suivant :

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);
});

Pouvez-vous repérer toutes les vulnérabilités ?

Heureusement, avec Snyk, c’est simple. Il vous suffit d’installer l’extension Snyk pour VS Code dans votre IDE pour obtenir un retour en temps réel sur la sécurité de votre code. Après avoir enregistré le fichier, les résultats de l’analyse de sécurité de Snyk s’affichent dans l’éditeur, comme avec un linter.

Lorsque vous exécutez Snyk sur ce code, les avertissements suivants s’affichent :

• Injection SQL dans la route /login

• Secret codé en dur utilisé pour le jeton d’accès dans le code

Vulnérabilité de redirection ouverte dans la route /some/path

Et en fait, quelques autres problèmes sont dissimulés ici. Envie de les découvrir ? Créez gratuitement un compte Snyk et essayez !

Présentation de l’arbre syntaxique abstrait (AST)

L’arbre syntaxique abstrait, généralement appelé AST, est un concept essentiel en programmation et en sécurité du code. Il s’agit d’une représentation arborescente de la structure syntaxique abstraite du code source écrit dans un langage de programmation. Chaque nœud de l’arbre représente une construction présente dans le code source.

En analyse statique JavaScript, l’arbre syntaxique abstrait joue un rôle essentiel. L’analyse statique consiste à examiner le code sans l’exécuter. C’est comme une revue de code automatique, qui recherche les bugs potentiels, les vulnérabilités et les violations des conventions de programmation. Les AST jouent un rôle clé dans ce processus, car ils fournissent une représentation structurée du code source, plus facile à parcourir. Ils permettent aux outils d’analyse statique de parcourir le code plus efficacement et de repérer les motifs susceptibles d’indiquer des bugs ou des vulnérabilités de sécurité.

Considérez le code JavaScript suivant :

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

Voici à quoi ressemblerait une version simplifiée de son AST :

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

Cette représentation aide les outils d’analyse statique à comprendre la structure et le flux du code, ce qui facilite la détection des problèmes potentiels.

Utiliser AST Explorer pour comprendre la structure du code JavaScript

AST Explorer est un outil puissant qui aide les développeurs à comprendre comment un morceau de code est transformé en arbre syntaxique abstrait. Il prend en charge plusieurs langages, dont JavaScript, et constitue un excellent outil pour apprendre et déboguer les problèmes liés aux AST.

Pour utiliser AST Explorer avec JavaScript, procédez comme suit :

1. Accédez à AST Explorer.

2. Dans le menu supérieur, sélectionnez « JavaScript » comme langage.

3. Collez ou écrivez du code JavaScript dans le panneau de gauche.

4. Le panneau de droite se met automatiquement à jour pour afficher l’AST du code fourni.

Par exemple, si vous saisissez la fonction greet de notre exemple précédent :

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

L’AST correspondant apparaît dans le panneau de droite. Il vous présente la structure arborescente de votre code, que vous pouvez parcourir pour mieux comprendre comment celui-ci est interprété.

Comprendre les AST est essentiel pour maîtriser l’analyse statique JavaScript. Cela vous permet de mieux comprendre la structure de votre code, la façon dont le moteur JavaScript le lit et la manière dont les outils d’analyse statique l’interprètent. Ces connaissances peuvent vous aider à écrire un code plus efficace, plus sûr et sans bugs.

Trois outils d’analyse statique pour JavaScript

Les outils d’analyse statique analysent le code sans l’exécuter, d’où le terme « statique ». Ils analysent le code source et construisent un arbre syntaxique abstrait (AST) pour en comprendre la structure et la sémantique. Ils appliquent ensuite différentes règles et heuristiques à l’AST afin de détecter les problèmes potentiels.

Il existe plusieurs outils d’analyse statique populaires pour JavaScript. Nous allons en présenter quelques-uns.

1. Snyk Code

Snyk Code est un outil que vous pouvez utiliser dans l’interface de ligne de commande (CLI), dans votre IDE ou via une intégration Git pour effectuer une analyse statique de sécurité. En plus des fonctionnalités d’analyse statique standard, Snyk Code propose une analyse approfondie du code, optimisée par l’IA symbolique. Cela lui permet de détecter des vulnérabilités complexes en plusieurs étapes qui pourraient échapper à d’autres outils.

Voyons comment l’analyse statique peut aider à détecter un problème de sécurité courant : l’injection SQL. Prenons l’extrait de code JavaScript suivant :

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

Dans le code ci-dessus, userInput est directement concaténé à une requête SQL. Si un attaquant contrôle userInput, il peut manipuler la requête pour extraire des informations sensibles ou effectuer des actions malveillantes. Un outil d’analyse statique comme Snyk peut signaler ce motif comme une vulnérabilité potentielle d’injection SQL.

Pour utiliser Snyk Code, vous devez créer gratuitement un compte Snyk et installer la Snyk CLI, ou utiliser l’extension Snyk pour VS Code pour obtenir un retour en temps réel sur la sécurité de votre code :

npm install -g snyk
snyk auth
snyk test

Dans les commandes ci-dessus, nous installons la Snyk CLI, nous nous authentifions avec notre compte Snyk et nous exécutons un test Snyk sur notre code.

2. ESLint pour l’analyse statique JavaScript

ESLint vérifie le style de votre code JavaScript et recherche les bugs potentiels et les vulnérabilités de sécurité. Son architecture extensible permet aux développeurs de définir et d’utiliser des règles personnalisées.

ESLint analyse votre code à la recherche de motifs et vous signale les problèmes potentiels susceptibles d’entraîner des bugs ou des incohérences, comme les variables inutilisées, le code inaccessible et les points-virgules manquants. Pour ce faire, il analyse et vérifie votre code au regard d’un ensemble de règles que vous définissez.

Voici un fichier de configuration .eslintrc.json de base pour ESLint :

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

Dans la configuration ci-dessus, nous étendons les règles recommandées d’ESLint et celles recommandées par le plug-in de sécurité. Nous activons également un avertissement en cas de vulnérabilité potentielle d’injection SQL.

Vous pouvez configurer ESLint pour appliquer un large éventail de règles de style, notamment l’indentation, l’utilisation des points-virgules, la longueur des lignes et l’utilisation de guillemets simples ou doubles pour les chaînes de caractères. Par exemple, si vous préférez une indentation de deux espaces, vous pouvez configurer ESLint pour qu’il vous avertisse dès qu’il détecte du code qui ne respecte pas cette règle.

De plus, ESLint contribue à prévenir les erreurs en vous alertant sur les erreurs courantes et les problèmes potentiels dans votre code. En intégrant ESLint à votre processus de développement, vous pouvez détecter et corriger les erreurs avant qu’elles n’arrivent en production.

3. Prettier

Prettier est une bibliothèque JavaScript open source qui sert de formateur de code avec des choix de style bien définis. Elle permet d’appliquer un style de codage cohérent à l’ensemble d’une base de code ou d’un projet. En tant que développeur, vous avez peut-être constaté que les désaccords sur le style de code peuvent détourner l’attention de l’essentiel. Prettier s’en charge, afin que vous puissiez vous concentrer sur l’écriture du code plutôt que sur son apparence.

Prettier prend en charge de nombreux langages, notamment JavaScript, TypeScript, CSS, HTML et Markdown. Il s’intègre à la plupart des éditeurs et fonctionne immédiatement, sans que vous ayez à consacrer du temps à configurer des fichiers complexes. Prettier analyse votre code pour le transformer en arbre syntaxique abstrait (AST), présenté précédemment, applique des règles de formatage, puis produit le code nouvellement formaté.

Voici un exemple de code avant et après son passage dans Prettier :

Avant Prettier :

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

Après Prettier :

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

Comme vous pouvez le constater, Prettier a uniformisé les espaces et la position des crochets, et ajouté un point-virgule à la fin des instructions return.

Prettier se concentre uniquement sur le formatage du code, tandis qu’ESLint est un outil qui repère dans le code JavaScript des schémas susceptibles de provoquer des erreurs. ESLint est hautement configurable et peut être ajusté avec précision pour appliquer des normes et conventions de codage spécifiques.

C’est là que Prettier et ESLint peuvent se compléter. Prettier garantit la cohérence du formatage de votre code, tandis qu’ESLint vérifie qu’il respecte les bonnes pratiques et ne contient pas de bogues potentiels. Utiliser ces deux outils ensemble peut grandement améliorer la qualité de votre code.

Vous pouvez même configurer Prettier pour qu’il formate votre code à chaque enregistrement d’un fichier dans votre éditeur, et ESLint pour qu’il vérifie la présence de problèmes potentiels. Vous pouvez ainsi détecter et corriger les problèmes avant qu’ils n’en deviennent de sérieux.

Voici un exemple de configuration dans un fichier .eslintrc.json :

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

Dans cette configuration, nous étendons les règles recommandées d’ESLint et ajoutons Prettier comme plug-in. Nous définissons également la règle prettier/prettier sur « error », ce qui signifie qu’ESLint générera une erreur dès que notre code ne respectera pas le formatage de Prettier.