Introduction

Ce cours couvre les aspects essentiels de la sécurité en JavaScript, notamment la protection contre les attaques XSS et CSRF, et introduit les meilleures pratiques pour sécuriser les applications web.

Partie 1: XSS (Cross-Site Scripting)

Qu'est-ce que XSS?

Le Cross-Site Scripting (XSS) est une vulnérabilité qui permet aux attaquants d'injecter des scripts côté client dans les pages web vues par d'autres utilisateurs. Cela peut conduire à des vols d'informations sensibles, la manipulation de pages web, ou d'autres actions malveillantes.

Exemple de Vulnérabilité XSS :

// Exemple de code vulnérable à XSS
const userInput = document.querySelector("#input").value;
document.querySelector("#output").innerHTML = userInput;

Prévention du XSS :

  • Utiliser .textContent au lieu de .innerHTML pour afficher le contenu.
  • Échapper les entrées utilisateur pour enlever les caractères dangereux.
  • Utiliser des bibliothèques ou des frameworks qui échappent automatiquement XSS.

Partie 2: CSRF (Cross-Site Request Forgery)

Qu'est-ce que CSRF?

Le Cross-Site Request Forgery (CSRF) est une attaque qui force un utilisateur final à exécuter des actions non désirées sur une application web dans laquelle il est actuellement authentifié.

Exemple de Vulnérabilité CSRF : Imaginons un scénario où un utilisateur est connecté à son compte bancaire et clique sur un lien malveillant; cela pourrait déclencher une transaction financière indésirable.

Prévention du CSRF :

  • Utiliser des tokens anti-CSRF qui valident les requêtes côté serveur.

    • L'utilisation de .textContent au lieu de .innerHTML en JavaScript est une mesure de sécurité importante pour prévenir les attaques XSS (Cross-Site Scripting). Voici un exemple et une explication de leur utilisation :

      Exemple

      Utilisation de .innerHTML :

      // Risqué si userInput contient du code malveillant
const userInput = "<script>alert('Hacked');</script>";
document.getElementById("example").innerHTML = userInput;

      Cet exemple montre comment .innerHTML peut exécuter du code JavaScript malveillant inclus dans l'entrée de l'utilisateur, ce qui peut être utilisé pour des attaques XSS.

      Utilisation de .textContent :

      // Sécurisé car le contenu est traité comme du texte brut
const userInput = "<script>alert('Hacked');</script>";
document.getElementById("example").textContent = userInput;

      Avec .textContent, le contenu est ajouté comme texte brut, empêchant l'exécution de tout script. Cela rend le contenu sûr à afficher car il ne sera pas interprété comme HTML ou JavaScript.

      Explication

      • .innerHTML : interprète le contenu assigné comme HTML, ce qui inclut l'exécution de scripts, pouvant ouvrir des vulnérabilités XSS si le contenu contient des scripts malveillants.
      • .textContent : affecte uniquement le texte brut à un élément, sans interpréter de balises HTML ou exécuter de scripts. Cela garantit que tout code potentiellement dangereux fourni par l'utilisateur reste inoffensif.

      Utiliser .textContent pour manipuler ou afficher des données d'entrée utilisateur est donc une pratique sécuritaire essentielle pour protéger une application web contre les injections XSS.

  • S'assurer que les requêtes sensibles sont effectuées avec des méthodes POST, non GET.

    • Utiliser la méthode POST plutôt que GET pour les requêtes sensibles est une pratique de sécurité importante en développement web. Voici pourquoi et comment cela est mis en œuvre :

      Exemple

      Utilisation incorrecte avec GET :

      <!-- Exemple de lien GET pour une opération sensible -->
<a href="/delete-account?id=123">Supprimer le compte</a>

      Dans cet exemple, une action sensible comme la suppression d'un compte est exécutée via GET. Cela peut être problématique car les URLs avec GET peuvent être mémorisées, partagées involontairement, ou même enregistrées dans les logs du serveur.

      Utilisation recommandée avec POST :

      <!-- Utilisation de POST via un formulaire pour une opération sensible -->
<form action="/delete-account" method="post">
    <input type="hidden" name="id" value="123">
    <button type="submit">Supprimer le compte</button>
</form>

      Ce formulaire utilise POST pour envoyer la demande de suppression, ce qui est plus sécurisé car les données envoyées ne sont pas exposées dans l'URL et ne sont généralement pas enregistrées dans les logs du serveur.

      Explication

      • Méthode GET : Transmet les données comme partie de l'URL; principalement utilisée pour récupérer des données. Elle est moins sécurisée pour les actions modifiant des données car elle peut être facilement exploitée par des requêtes malveillantes incorporées dans des URLs.
      • Méthode POST : Envoie les données dans le corps de la requête, non visible dans l'URL. Cela convient mieux aux opérations qui affectent le serveur, comme les mises à jour ou les suppressions de données.

      S'assurer que les requêtes sensibles utilisent POST aide à protéger les données et à éviter des modifications non autorisées, améliorant ainsi la sécurité globale de l'application.

  • Implémenter des politiques de même origine strictes.

    • Explication des Politiques de Même Origine (Same-Origin Policy)

      La politique de même origine (Same-Origin Policy) est une mesure de sécurité cruciale dans le développement web qui restreint comment les documents ou scripts chargés depuis une origine peuvent interagir avec des ressources d'une autre origine. Cette politique vise à prévenir les attaques malveillantes telles que les scripts intersites (Cross-Site Scripting, XSS) et les requêtes intersites forgées (Cross-Site Request Forgery, CSRF).

      Exemple de Mise en Œuvre

      Scénario : Un script sur https://example.com essaie d'accéder à une API sur https://api.example.com.

      // Tentative d'accès à une ressource de différente origine
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Access denied:', error));

      Politique appliquée : Si les deux URLs partagent le même protocole, le même domaine et le même port, la requête réussit. Sinon, elle échoue, sauf si des en-têtes CORS spécifiques sont utilisés pour permettre explicitement l'accès intersite.

      Utilisation des En-têtes CORS pour Assouplir la Politique

      Pour permettre l'accès intersite dans des cas spécifiques tout en maintenant la sécurité, vous pouvez utiliser les en-têtes Cross-Origin Resource Sharing (CORS). Par exemple, le serveur à https://api.example.com peut inclure un en-tête comme Access-Control-Allow-Origin: https://example.com pour permettre les requêtes depuis https://example.com uniquement.

      Cette approche maintient un équilibre entre la sécurité et la flexibilité, permettant une interaction sécurisée entre des origines différentes lorsqu'elle est correctement configurée.

      Pour mettre en place des en-têtes CORS pour permettre un accès intersite sécurisé, vous devez configurer votre serveur pour qu'il inclue des en-têtes HTTP appropriés lors de la réponse aux requêtes. Voici comment procéder spécifiquement pour autoriser des requêtes depuis un domaine spécifique :

      1. Configuration du Serveur:

        • Exemple pour un serveur Node.js avec Express:

          const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://example.com');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept'
  );
  next();
});

app.get('/data', (req, res) => {
  res.json({ data: 'some data' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

        • Dans cet exemple, le middleware CORS est configuré pour accepter les requêtes de https://example.com uniquement.

        • Access-Control-Allow-Origin: Cet en-tête spécifie les origines qui sont autorisées à accéder à la ressource.

        • Si vous souhaitez autoriser toutes les origines de manière sécurisée, vous pourriez dynamiquement adapter l'en-tête Access-Control-Allow-Origin en fonction de l'origine de la requête si elle est considérée comme sûre.

      2. Tester la Configuration:

        • Utilisez des outils comme Postman ou réalisez des requêtes HTTP depuis le domaine autorisé pour vérifier que la configuration fonctionne comme prévu.

      Cette configuration aide à sécuriser votre API en s'assurant que seules les requêtes provenant de domaines de confiance sont acceptées, tout en permettant une certaine flexibilité pour l'accès intersite.

Partie 3: Best Practices de Sécurité

Techniques et Stratégies

  • Validation et Assainissement des Entrées : Toujours valider et assainir les entrées utilisateur pour éviter les injections SQL, XSS et d'autres vulnérabilités.

    • Validation et Assainissement des Entrées en JavaScript

      Importance

      La validation et l'assainissement des entrées utilisateur sont cruciaux pour protéger une application web contre diverses formes de vulnérabilités telles que les injections SQL et les attaques XSS (Cross-Site Scripting). Ces techniques permettent de s'assurer que les données entrantes respectent les attentes de l'application et sont exemptes de code malveillant.

      Exemple de Validation

      Supposons une application qui accepte un numéro de téléphone via un formulaire web :

      function validatePhoneNumber(input) {
    const re = /^\d{10}$/;
    return re.test(input);
}

      Explication : Ce code utilise une expression régulière pour vérifier que l'entrée est un numéro de téléphone valide de 10 chiffres. C'est un exemple de validation, où l'entrée est contrôlée pour correspondre à un format spécifique.

      Exemple d'Assainissement

      Pour un scénario où l'utilisateur soumet un commentaire :

      function sanitizeInput(input) {
    return input.replace(/<script.*?>.*?<\/script>/gi, '');
}

      Explication : Cet exemple montre comment un script malveillant potentiel pourrait être retiré d'une entrée utilisateur. Ce code recherche toute balise <script> et la supprime, réduisant le risque d'attaques XSS.

      Conclusion

      Il est essentiel d'intégrer la validation et l'assainissement à toutes les étapes de la manipulation des entrées utilisateur pour garantir la sécurité et la robustesse des applications web. Ces pratiques aident à prévenir des problèmes de sécurité graves et à maintenir l'intégrité des données de l'application.

  • Utilisation de HTTPS : S'assurer que votre site fonctionne exclusivement en HTTPS pour sécuriser la transmission des données.

    • Explication de l'Utilisation de HTTPS

      HTTPS (Hypertext Transfer Protocol Secure) est la version sécurisée du HTTP, utilisée pour garantir une communication sécurisée sur un réseau informatique. L'utilisation de HTTPS est essentielle pour protéger les données sensibles transmises entre le navigateur de l'utilisateur et le serveur, car elle implique l'encapsulation des données échangées avec le chiffrement SSL/TLS.

      Exemple de Mise en œuvre de HTTPS

      Supposons que vous avez un site web accessible via HTTP et que vous souhaitez le sécuriser avec HTTPS. Voici les étapes générales que vous devriez suivre :

      1. Achetez un Certificat SSL/TLS : Vous pouvez obtenir ce certificat auprès d'une autorité de certification (CA) qui valide votre propriété du domaine.
      2. Installez le Certificat sur Votre Serveur : Cela dépend de votre serveur et de votre hébergement, mais généralement, vous devrez configurer les détails de votre certificat dans la configuration de votre serveur web.
      3. Redirigez le Trafic HTTP vers HTTPS : Configurez votre serveur pour rediriger automatiquement toutes les requêtes HTTP vers HTTPS pour s'assurer que toutes les communications sont sécurisées.
      # Exemple de configuration de redirection pour Nginx
server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$server_name$request_uri;
}

      Explication : Ce bloc de configuration Nginx écoute sur le port 80 (HTTP) et redirige toutes les requêtes vers HTTPS, en utilisant une redirection 301, ce qui est bénéfique pour le SEO et assure que les utilisateurs accèdent toujours au site via une connexion sécurisée.

      Cette mise en œuvre aide à protéger contre l'interception des données par des parties malveillantes et est essentielle pour toute application web traitant des données sensibles.

  • Mises à Jour Régulières : Maintenir toutes les dépendances à jour pour protéger contre les vulnérabilités connues.

    • L'Importance des Mises à Jour Régulières

      Maintenir les dépendances logicielles à jour est essentiel pour la sécurité des systèmes informatiques. Cela permet de réduire les risques liés aux vulnérabilités connues qui peuvent être exploitées par des attaquants.

      Exemple de Mise en Œuvre des Mises à Jour

      Pour un projet JavaScript utilisant Node.js, vous pouvez utiliser npm pour vérifier et mettre à jour les dépendances.

      Vérification des mises à jour disponibles :

      Terminal: npm outdated

      Cette commande liste les paquets installés qui ont des mises à jour disponibles.

      Mise à jour des dépendances :

      Terminal: npm update

      Cette commande met à jour les paquets vers les dernières versions respectant les versions spécifiées dans le fichier package.json.

      Explication

      Utiliser npm outdated et npm update permet de garder facilement vos dépendances à jour. Cela contribue à la sécurité de votre application en intégrant rapidement les correctifs et améliorations publiés par les développeurs de paquets. Maintenir à jour vos logiciels aide à protéger votre application contre les failles de sécurité qui pourraient être exploitées par des attaquants.

  • Stockage Sécurisé des Mots de Passe : Utiliser des algorithmes de hachage modernes comme bcrypt pour le stockage des mots de passe.

    • Stockage Sécurisé des Mots de Passe : Utilisation de Bcrypt

      Pourquoi Utiliser Bcrypt?

      Bcrypt est un algorithme de hachage conçu pour sécuriser le stockage des mots de passe. Il intègre un coût (ou "salt") pour ralentir le processus de hachage, ce qui rend plus difficile pour les attaquants de générer une table de correspondance de tous les mots de passe possibles.

      Exemple d'Utilisation de Bcrypt en Node.js

      const bcrypt = require('bcrypt');

// Hachage d'un mot de passe
async function hashPassword(password) {
  const saltRounds = 10; // Plus le nombre est élevé, plus le hachage est sécurisé et coûteux en calcul
  const hashedPassword = await bcrypt.hash(password, saltRounds);
  return hashedPassword;
}

// Vérification d'un mot de passe
async function checkPassword(password, hashedPassword) {
  const isMatch = await bcrypt.compare(password, hashedPassword);
  return isMatch;
}

      Explication

      • Hachage: bcrypt.hash() crée un hachage du mot de passe en utilisant un "salt" aléatoire généré automatiquement et répète l'opération un nombre défini de fois (saltRounds), rendant ainsi la création de tables de hachage pratiquement impossible.
      • Vérification: bcrypt.compare() permet de vérifier si un mot de passe non haché correspond au hachage stocké, sans jamais reconstituer le mot de passe en clair.
      •  

      L'utilisation de méthodes comme bcrypt pour sécuriser les mots de passe est essentielle pour protéger les données utilisateur contre les attaques de type brute force ou rainbow table.

Conclusion

La sécurité en JavaScript est cruciale pour développer des applications web fiables et résistantes. En suivant les meilleures pratiques et en comprenant les attaques communes comme XSS et CSRF, les développeurs peuvent considérablement améliorer la sécurité de leurs applications.

Modifié le: jeudi 16 mai 2024, 11:03