Ajouter la sécurité à Nuxt 3

Écrit par

26 janvier 2023

0 minutes de lecture

Qu’est-ce que Nuxt ?

Nuxt est un framework Web intuitif qui vous permet de créer votre prochaine application Vue.js en toute confiance. Ce framework open source, sous licence MIT, rend le développement Web simple et puissant. Je vous recommande vivement de consulter le site officiel pour vous lancer.

À propos de la sécurité web

Les applications web deviennent chaque jour plus complexes. Elles peuvent stocker des données confidentielles ou traiter des informations utilisateur à la volée. Pour gérer efficacement ces enjeux, les développeurs doivent mettre en place plusieurs couches de sécurité. Pour cela, vous pouvez utiliser des mécanismes de sécurité tels que la limitation du débit et des packages open source qui contribuent à sécuriser votre application.

À propos du module nuxt-security

Dans cet article, je vous présente le nouveau module Nuxt que j’ai récemment créé pour vous aider à développer des applications Nuxt plus sécurisées, qu’il s’agisse d’un simple blog ou d’une boutique e-commerce complexe. Gardez simplement à l’esprit que ce module ne résoudra pas tous vos problèmes de sécurité. Son objectif principal est de vous aider à développer des applications sécurisées et de vous permettre facilement d’ajouter des couches de sécurité à votre projet.

Avant de commencer, consultez le module GitHub et la documentation. Le module nuxt-security repose actuellement sur deux grands principes : l’OWASP Top 10 pour Node.js et Helmet.js.

Avec nuxt-security, vous disposerez de fonctions middleware qui définissent les mêmes en-têtes de sécurité HTTP que ceux utilisés par HelmetJS, ainsi que de fonctions middleware personnalisées reposant sur les recommandations de l’OWASP.

Voici quelques exemples de codes d’état HTTP renvoyés pour les requêtes, selon les mécanismes de sécurité mis en place dans une application Nuxt :

429 trop de requêtes - Un trop grand nombre de requêtes provient d’une même adresse IP (protection contre les attaques par déni de service, ou DoS).
413 entité de requête trop volumineuse - Le corps de la requête (standard ou contenant un fichier) est trop volumineux pour être traité. Cela protège contre les attaques visant à épuiser la mémoire du serveur.
En-tête `X-Powered-By` masqué. Il est généralement déconseillé d’indiquer la technologie utilisée pour créer une application. Ce module masque donc complètement cet en-tête.
400 requête incorrecte - Un filtre XSS pour les requêtes GET et POST, qui rejette celles contenant du code dangereux.
Gestionnaire CORS, similaire aux middlewares populaires d’Express.js.
405 méthode non autorisée - Un filtre qui vous permet de limiter les méthodes HTTP acceptées.
Une implémentation de l’authentification Basic pour protéger votre application contre les accès non autorisés.

Les en-têtes de sécurité de Helmet.js auront la structure suivante :

1Content-Security-Policy: default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
2Cross-Origin-Embedder-Policy: require-corp
3Cross-Origin-Opener-Policy: same-origin
4Cross-Origin-Resource-Policy: same-origin
5Origin-Agent-Cluster: ?1
6Referrer-Policy: no-referrer
7Strict-Transport-Security: max-age=15552000; includeSubDomains
8X-Content-Type-Options: nosniff
9X-DNS-Prefetch-Control: off
10X-Download-Options: noopen
11X-Frame-Options: SAMEORIGIN
12X-Permitted-Cross-Domain-Policies: none
13X-XSS-Protection: 0

J’ai conçu ce module pour qu’il soit extensible et personnalisable. Vous pouvez ainsi adapter la configuration de sécurité de Nuxt aux besoins de votre application, par exemple en :

désactivant les en-têtes ou middlewares indésirables
configurant les middlewares pour qu’ils s’appliquent uniquement à certaines routes
modifiant les valeurs des middlewares

La documentation du module comprend également des sections sur les bonnes pratiques, où vous trouverez d’autres étapes à suivre pour mieux sécuriser votre application.

Utiliser le module nuxt-security

Ajouter `nuxt-security` à votre application Nuxt 3 est assez simple. Le module ne nécessite aucune configuration si vous utilisez les valeurs par défaut recommandées pour les middlewares, mais n’hésitez pas à les ajuster aux besoins de votre projet.

Pour utiliser nuxt-security dans votre application, commencez par l’installer à l’aide du gestionnaire de packages de votre choix :

1# if you use yarn:
2yarn add nuxt-security
3
4# if you use npm:
5npm i nuxt-security

Ajoutons-le ensuite au tableau des modules dans `nuxt.config.ts` :

1{
2  modules: [
3    "nuxt-security",
4  ],
5}

Et voilà ! Les en-têtes de sécurité HTTP de Helmet et les fonctions middleware sont désormais activés. Ils vous aideront à mieux protéger votre application.

En arrière-plan, ce module enregistre plusieurs middlewares de sécurité et recommandations. Pour en savoir plus sur ces fonctions, consultez le limiteur de taille des requêtes et les autres middlewares de cette section.

Si vous souhaitez personnaliser les fonctions de sécurité par défaut, voici comment procéder :

1{
modules: [
  "nuxt-security",
],
5​​  security: {
  rateLimiter: {
    value: {
      tokensPerInterval: 2,
      interval: "day",
    },
    route: '/my-custom-route',
  }
}
14}

Cette configuration remplace celle du middleware de sécurité par défaut : le limiteur de débit bloquera certaines adresses IP après seulement deux requêtes et sera réinitialisé au bout d’un jour. Toutefois, cela ne s’appliquera qu’à une route donnée. Pour l’appliquer partout, transmettez simplement une chaîne vide : c’est ainsi que Nuxt enregistre les middlewares globaux.

Pour découvrir d’autres options de personnalisation, consultez la page de configuration.

En résumé

Bravo ! Vous avez ajouté avec succès des mécanismes de sécurité à votre application, ce qui devrait la rendre un peu plus sûre. Gardez simplement à l’esprit que ce n’est que le début de votre parcours en sécurité. Pour en savoir plus, regardez la vidéo YouTube ci-dessous.

Si vous avez des suggestions ou des demandes, n’hésitez pas à me contacter.