Créer une API GraphQL sécurisée avec Node.js

GraphQL intègre des mécanismes de sécurité dès le départ, avec la validation et la vérification des types. Toutefois, il ne répond pas entièrement aux enjeux de sécurité des API. Dans cet article, nous allons apprendre à sécuriser des API GraphQL en créant une application Node.js simple avec Fastify et GraphQL.

Selon sa documentation officielle, GraphQL est un langage de requête graphique pour les API et un environnement d’exécution permettant de traiter ces requêtes avec nos données. GraphQL décrit clairement les données de notre API et nous permet de créer des API rapides et flexibles, tout en laissant aux clients le contrôle total des données dont ils ont besoin. Comme REST, GraphQL fonctionne sur HTTP : il est donc indépendant des bases de données et compatible avec tout langage backend ou client.

Fastify est un framework Node.js basé sur des plugins, très efficace et extrêmement performant, adapté à la création de serveurs HTTP rapides. Inspiré de Hapi et Express, Fastify offre une alternative plus conviviale pour les développeurs et plus performante, avec une faible surcharge.

Fastify prend en charge GraphQL grâce au plugin Mercurius. Ce plugin est un adaptateur GraphQL configurable pour Fastify, que nous allons découvrir plus en détail dans les sections suivantes.

Commençons par les prérequis.

Prérequis

Voici les prérequis pour cet article :

• Node.js version 12 ou ultérieure

• Connaissances de base en JavaScript

• Connaissances de base en GraphQL

Premiers pas

Pour commencer, nous devons créer un serveur Node.js de base.

Créez un projet de démarrage en créant un dossier de projet, puis exécutez le code ci-dessous dans l’interface de ligne de commande (CLI), depuis ce dossier. Cela initialisera notre application et installera les dépendances nécessaires.

1// bootstrap npm project
2npm init -y
3
4// install dependencies
5npm i fastify nodemon fastify-plugin mercurius-auth jsonwebtoken

Ce projet utilise une version spécifique de Mercurius. Pour l’installer, exécutez la commande suivante :

1npm i mercurius@7.9.1

Ensuite, nous activons les modules ES6 pour utiliser le système de modules JavaScript standard plutôt que commonJS, en ajoutant "type": "module" à notre fichier package.json.

Ensuite, nous mettons à jour les scripts NPM avec une commande de démarrage du serveur Node.js. Pour cela, ouvrez le fichier package.json et modifiez la section des scripts comme suit :

1"scripts": {
2    // start the Node.js server in production
3    "start": "node --es-module-specifier-resolution=node ./src/index.js",
4    // use nodemon to restart development server when code is compiled
5    "dev": "nodemon --es-module-specifier-resolution=node ./src/index.js"
6}

Notez que l’extrait --es-module-specifier-resolution=node est nécessaire pour assurer l’interopérabilité entre les modules ES et les modules commonJS de Node.

Créez maintenant un répertoire src à la racine du projet. Dans le répertoire src, créez un dossier graphql contenant les fichiers schema.js et resolvers.js. Ajoutez le code suivant au fichier schema.js :

1const schema =`
2  type Query {
3    users: [User]!
4  }
5
6  type User {
7    id: ID!
8  }
9  `;
10  export default schema;

Ajoutez maintenant le code suivant au fichier resolvers.js :

1const resolvers = {};
2export default resolvers;

Nous mettrons à jour le fichier schema.js et ajouterons du code au fichier resolvers.js dans la section suivante. Mais nous devons les créer dès maintenant avec du code passe-partout, car ils sont nécessaires au bon fonctionnement de notre serveur.

Dans le répertoire src, créez un fichier index.js contenant le code suivant :

1import fastify from 'fastify';
2import mercurius from 'mercurius';
3import jwt from 'jsonwebtoken';
4import mercuriusAuth from 'mercurius-auth';
5import schema from './graphql/schema.js'; 
6import resolvers from './graphql/resolvers.js';
7
8const port = process.env.PORT || 4500;
9const app = fastify({ logger: true });
10
11// Activate plugins below:
12app.register(
13  mercurius, { 
14      schema, 
15      resolvers, 
16      graphiql: 'playground', 
17      queryDepth: 7 
18});
19
20// register auth policy
21
22// create server
23const start = async () => {
24  try {
25    await app.listen(port);
26  } catch (err) {
27    app.log.error(err);
28    process.exit(1);
29  }
30};
31start();

Le code ci-dessus crée un serveur Fastify principal et enregistre le plugin Mercurius avec les options suivantes : schema, resolvers, graphiql et queryDepth.

Nous pouvons maintenant démarrer le serveur en exécutant npm run dev. Voici le résultat :

1{"level":30,"time":1620202591072,"pid":11775,"hostname":"pc-name","msg":"Server listening at http://127.0.0.1:4500"}

Nous pouvons constater que notre serveur fonctionne. Dans la section suivante, nous allons commencer à créer nos API de blog avec GraphQL.

Créer une API de blog sécurisée avec Fastify et GraphQL

Il existe plusieurs stratégies pour sécuriser une API, notamment :

• Authentification et autorisation : l’authentification consiste à vérifier qu’un utilisateur est bien celui qu’il prétend être, tandis que l’autorisation concerne les permissions. L’authentification détermine si un utilisateur peut se connecter et permet ensuite de le reconnaître. L’autorisation définit les permissions attribuées à un utilisateur identifié et détermine s’il peut effectuer des opérations telles que créer, lire, mettre à jour ou supprimer.

• Masquage des erreurs : ne pas divulguer les informations précises d’une erreur serveur afin d’éviter de révéler involontairement au client des détails susceptibles d’exposer les vulnérabilités du serveur.

• Limitation de la profondeur des requêtes : définir une profondeur maximale pour les requêtes GraphQL. Les requêtes profondément imbriquées sont dangereuses, car elles mobilisent beaucoup de ressources et sont coûteuses à calculer. Elles peuvent donc faire tomber nos API.

• Nettoyage et validation des entrées : utiliser des techniques standard de sécurité Web pour empêcher les utilisateurs d’envoyer des données malveillantes. Nous tirerons parti de la validation GraphQL intégrée à notre application.

Dans cet article, nous allons créer et sécuriser nos API à l’aide des stratégies ci-dessus, avec Mercurius et le plugin Mercurius Auth.

Pour nos besoins, le plugin Mercurius Auth offre deux fonctionnalités principales. Premièrement, il nous permet de définir des directives d’authentification personnalisées sur les champs de notre schéma. Ces directives sont des chaînes qui servent d’identifiants pour les champs protégés de notre schéma.

Il permet également d’appliquer des politiques d’authentification personnalisées à ces champs protégés lors d’une requête GraphQL.

Commençons par créer des données fictives. Dans le répertoire src, créez un dossier data contenant un fichier index.js avec le code ci-dessous :

1export default {
2    users: [
3        { id: 1, username: 'JohnDoe', email: 'John_doe@gmail.com', password: '12345', role: 'admin' },
4        { id: 2, username: 'JaneDoe', email: 'Jane_doe@gmail.com', password: '12345', role: 'user' },
5        { id: 3, username: 'JoeDoe', email: 'Joe_doe@gmail.com', password: '12345', role: 'user' }
6    ]
7};

Ensuite, configurons notre schema en remplaçant le code passe-partout du fichier schema.js par le code suivant :

1const schema = `
2
3directive @auth(
4    requires: Role = ADMIN,
5  ) on OBJECT | FIELD_DEFINITION
6
7  enum Role {
8    ADMIN
9    USER
10  }
11
12type Query {
13    user(id: ID!): User! @auth(requires: ADMIN)
14    users: [User]! @auth(requires: ADMIN)
15    login(username:String!, password:String!): String
16}
17
18type User {
19    id: ID!
20    username: String!
21    email: String!
22    password: String!
23    role: String!
24}
25`;
26
27export default schema;

Dans le code ci-dessus, nous avons créé notre schéma GraphQL et défini des directives d’authentification pour les champs user et users. Nous allons bientôt appliquer des politiques personnalisées à ces champs protégés.

Ajoutons maintenant nos résolveurs en remplaçant le code passe-partout du fichier resolvers.js par le code suivant :

1import jwt from 'jsonwebtoken';
2import Data from '../data';
3
4const resolvers = {
5    Query: {
6        users: async (_, obj) => Data.users,
7
8        user: async (_, { id }) => {
9            let user = Data.users.find((user) => user.id == id);
10            if (!user) {
11                throw new Error('unknown user');
12            }
13            return user;
14        },
15
16        login: async (_, { username, password }) => {
17            let user = Data.users.find((user) => user.username === username && user.password === password);
18            if (!user) {
19                throw new Error('unknown user!');
20            }
21
22            const token = jwt.sign({ username: user.username, password: user.password, role: user.role }, 'mysecrete');
23            return token;
24        }
25    }
26};
27
28export default resolvers;

Le code ci-dessus contient des résolveurs qui gèrent les requêtes user, users et login.

Enfin, nous devons ajouter une politique d’authentification personnalisée en enregistrant le plugin Mercurius Auth. Pour cela, dans le fichier index.js du répertoire src, ajoutons le code suivant sous le commentaire register auth policy, à la ligne 19 :

1app.register(mercuriusAuth, {
2    authContext(context) {
3        return { identity: context.reply.request.headers['x-user'] };
4    },
5    async applyPolicy(authDirectiveAST, parent, args, context, info) {
6        const token = context.auth.identity;
7        try {
8            const claim = jwt.verify(token, 'mysecrete');
9        } catch (error) {
10            throw new Error(`An error occurred. Try again!`);
11        }
12
13        return true;
14    },
15    authDirective: 'auth'
16});

Dans notre politique personnalisée ci-dessus, la méthode authContext récupère le jeton utilisateur dans les en-têtes, tandis que la méthode applyPolicy contient les politiques personnalisées d’authentification et d’autorisation.

De plus, si l’authentification ou l’autorisation d’un utilisateur échoue, nous renvoyons une erreur accompagnée d’un message générique, par exemple « Une erreur s’est produite. Réessayez ! ». Ce message remplace un message d’erreur serveur détaillé, qui pourrait exposer d’éventuelles vulnérabilités du serveur.

Et voilà, notre travail est terminé. Nous allons tester nos API dans la section suivante.

Tester l’API

Commencez par démarrer le serveur en exécutant npm run dev depuis le répertoire racine. Ensuite, accédez à l’interface GraphQL Playground à l’adresse http://localhost:4500/playground.

Lorsque nous interrogeons une API protégée, comme users ou user, nous obtenons l’erreur illustrée ci-dessous :

Pour que notre requête aboutisse, nous devons donc nous authentifier. Connectons-nous pour obtenir un jeton.

Pour vous connecter, ouvrez un nouvel onglet dans Playground et exécutez la requête suivante :

1query {
2  login(username: "JohnDoe", password: "12345")
3}

Si la requête aboutit, un jeton est généré et renvoyé, comme illustré ci-dessous.

Notez que les données utilisateur utilisées pour la connexion figurent déjà dans le fichier index.js du répertoire data.

Si vous tentez de vous connecter avec des données utilisateur absentes de ce fichier (par exemple, le nom d’utilisateur « John1Doe »), une erreur s’affiche, comme illustré ci-dessous :

En transmettant notre jeton dans les en-têtes sous la forme x-user, nous pouvons désormais interroger nos API protégées, comme illustré ci-dessous. Veillez à copier le jeton reçu après la requête de connexion et à utiliser sa valeur pour x-user.

Requête users

Voici un exemple de requête users :

1query {
2  users {
3    id
4    username
5    password
6    email
7    role
8  }
9}

Ajoutez votre jeton comme valeur du paramètre d’en-tête HTTP x-user, comme illustré ci-dessous :

1{
2  "x-user": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IkpvaG5Eb2UiLCJwYXNzd29yZCI6IjEyMzQ1Iiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNjQ0NTA3MDE5fQ.faslGjI6x-ODO2LGYOaTHClGs2MXCBOoMlWPYnwoH18"
3}

Voici le résultat obtenu :

Requête user

Voici un exemple de requête user :

1query {
2  user(id: "1") {
3    id
4    username
5    email
6    password
7    role
8  }
9}

Ajoutez votre jeton comme valeur du paramètre d’en-tête HTTP x-user, comme illustré ci-dessous :

1{
2  "x-user": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IkpvaG5Eb2UiLCJwYXNzd29yZCI6IjEyMzQ1Iiwicm9sZSI6ImFkbWluIiwiaWF0IjoxNjQ0NTA3MDE5fQ.faslGjI6x-ODO2LGYOaTHClGs2MXCBOoMlWPYnwoH18"
3}

Voici le résultat obtenu :

Conclusion

Dans cet article, nous avons découvert à quel point il est facile de sécuriser des API GraphQL en créant une application Node.js simple avec Fastify et GraphQL.

Comme nous l’avons vu, GraphQL intègre certains mécanismes de sécurité, tels que la validation et la vérification des types. Toutefois, la flexibilité et la puissance qui permettent aux utilisateurs de demander librement des données impliquent que la sécurité doit toujours être une priorité.

Cet article a également présenté plusieurs stratégies pour sécuriser les API GraphQL : l’authentification et l’autorisation, la limitation de la profondeur des requêtes, le masquage des erreurs, ainsi que le nettoyage et la validation des entrées.

Ces stratégies de sécurité sont très efficaces, mais nous pouvons renforcer encore la sécurité en mettant en œuvre d’autres méthodes, comme les délais d’expiration des requêtes et la limitation du débit, qui définissent la fréquence à laquelle un client peut interroger une API pendant une période donnée.

Essayez gratuitement notre outil en ligne de vérification du code JavaScript pour découvrir comment le moteur Snyk Code analyse votre code afin d’identifier les problèmes de sécurité et de qualité.