Eine sichere GraphQL-API mit Node.js entwickeln

GraphQL bietet dank Validierung und Typprüfung bereits standardmäßig Sicherheitsfunktionen. Allerdings deckt es nicht alle Sicherheitsrisiken im Zusammenhang mit APIs ab. In diesem Artikel erfahren Sie, wie Sie GraphQL-APIs absichern, indem Sie eine einfache Node.js-Anwendung mit Fastify und GraphQL erstellen.

Laut der offiziellen Dokumentation ist GraphQL eine Graph-Abfragesprache für APIs und eine Laufzeitumgebung, die diese Abfragen mit unseren Daten ausführt. GraphQL beschreibt die Daten in unserer API klar und ermöglicht es uns, schnelle und flexible APIs zu erstellen. Gleichzeitig haben Clients die volle Kontrolle darüber, welche Daten sie benötigen. Wie REST läuft GraphQL über HTTP, ist daher datenbankunabhängig und funktioniert mit jeder Backend-Sprache und jedem Client.

Fastify ist ein pluginbasiertes, hocheffizientes und besonders performantes Node.js-Framework für die Entwicklung schneller HTTP-Server. Fastify ist von Hapi und Express inspiriert und bietet eine entwicklerfreundlichere und leistungsstärkere Alternative mit geringem Overhead.

Fastify unterstützt GraphQL über das Mercurius-Plugin. Das Mercurius-Plugin ist ein konfigurierbarer GraphQL-Adapter für Fastify, den wir in den folgenden Abschnitten näher kennenlernen.

Beginnen wir mit den Voraussetzungen.

Voraussetzungen

Für diesen Artikel benötigen Sie Folgendes:

• Node.js Version 12 oder höher

• Grundkenntnisse in JavaScript

• Grundkenntnisse in GraphQL

Erste Schritte

Zunächst erstellen wir einen einfachen Node.js-Server.

Erstellen Sie ein Projekt, indem Sie einen Projektordner anlegen. Führen Sie in diesem Ordner den folgenden Code in der Kommandozeile (CLI) aus. Dadurch wird unsere Anwendung eingerichtet und die erforderlichen Abhängigkeiten werden installiert.

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

Dieses Projekt verwendet eine bestimmte Mercurius-Version. Installieren Sie sie mit folgendem Befehl:

1npm i mercurius@7.9.1

Als Nächstes aktivieren wir ES6-Module, damit wir statt commonJS das standardmäßige JavaScript-Modulsystem verwenden können. Fügen Sie dazu "type": "module" in die Datei package.json ein.

Anschließend aktualisieren wir die NPM-Skripte um einen Befehl zum Starten des Node.js-Servers. Öffnen Sie dazu die Datei package.json und bearbeiten Sie den Abschnitt „scripts“ wie folgt:

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}

Beachten Sie, dass der Codeausschnitt --es-module-specifier-resolution=node erforderlich ist, damit ES-Module und die commonJS-Module von Node interoperabel sind.

Erstellen Sie nun im Stammverzeichnis ein Verzeichnis src. Erstellen Sie darin einen Ordner graphql mit den Dateien schema.js und resolvers.js. Fügen Sie den folgenden Code in die Datei schema.js ein:

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

Fügen Sie nun den folgenden Code in die Datei resolvers.js ein:

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

Im nächsten Abschnitt aktualisieren wir schema.js und ergänzen die Datei resolvers.js. Wir müssen die Dateien jedoch jetzt schon mit etwas Boilerplate-Code erstellen, da unser Server sie benötigt, um korrekt zu funktionieren.

Erstellen Sie im Verzeichnis src eine Datei index.js und fügen Sie folgenden Code ein:

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

Der obige Code erstellt einen grundlegenden Fastify-Server und registriert das Mercurius-Plugin mit den Optionen schema, resolvers, graphiql und queryDepth.

Starten Sie den Server nun mit npm run dev. Die Ausgabe sieht folgendermaßen aus:

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

Wie Sie sehen, funktioniert unser Server. Im nächsten Abschnitt erstellen wir unsere Blog-APIs mit GraphQL.

Eine sichere Blog-API mit Fastify und GraphQL entwickeln

Es gibt verschiedene Strategien, um eine API abzusichern. Dazu gehören:

• Authentifizierung und Autorisierung: Bei der Authentifizierung wird überprüft, ob eine Person tatsächlich diejenige ist, für die sie sich ausgibt. Bei der Autorisierung geht es um Berechtigungen. Die Authentifizierung entscheidet, ob sich eine Person anmelden kann, und merkt sich anschließend diese Person. Die Autorisierung legt fest, welche Berechtigungen einem identifizierten Benutzer zugewiesen sind. Sie bestimmt damit, ob dieser beispielsweise Daten erstellen, lesen, aktualisieren oder löschen darf.

• Fehler maskieren: Die genauen Informationen zu einem Serverfehler werden zurückgehalten, um zu verhindern, dass dem Client unbeabsichtigt Details mitgeteilt werden, die Schwachstellen des Servers offenlegen könnten.

• Begrenzung der Abfragetiefe: Hierbei wird eine maximale Tiefe für GraphQL-Abfragen festgelegt. Tief verschachtelte Abfragen sind gefährlich, da sie viele Ressourcen benötigen und aufwendig zu berechnen sind. Dadurch können unsere APIs abstürzen.

• Eingaben bereinigen und validieren: Verwenden Sie gängige Web-Sicherheitstechniken, um zu verhindern, dass Benutzer schädliche Daten senden. In unserer Anwendung nutzen wir die integrierte GraphQL-Validierung.

In diesem Artikel entwickeln und sichern wir unsere APIs mithilfe der oben genannten Strategien sowie Mercurius und des Mercurius-Auth-Plugins.

Das Mercurius-Auth-Plugin bietet für unsere Zwecke zwei wichtige Funktionen. Erstens können wir damit benutzerdefinierte Auth-Direktiven für Felder in unserem Schema definieren. Auth-Direktiven sind Zeichenfolgen, die als Bezeichner für geschützte Felder in unserem Schema dienen.

Außerdem können wir bei einer GraphQL-Anfrage benutzerdefinierte Auth-Richtlinien auf diese geschützten Felder anwenden.

Zunächst erstellen wir Beispieldaten. Erstellen Sie im Verzeichnis src einen Ordner data mit einer Datei index.js, die den folgenden Code enthält:

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

Als Nächstes richten wir unser schema ein, indem wir den Boilerplate-Code in der Datei schema.js durch folgenden Code ersetzen:

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;

Im obigen Code haben wir unser GraphQL-Schema erstellt und Auth-Direktiven für die Felder user und users definiert. Gleich wenden wir benutzerdefinierte Richtlinien auf diese geschützten Felder an.

Nun fügen wir unsere Resolver hinzu, indem wir den Boilerplate-Code in der Datei resolvers.js durch folgenden Code ersetzen:

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;

Der obige Code enthält Resolver für die Abfragen user, users und login.

Abschließend müssen wir eine benutzerdefinierte Auth-Richtlinie hinzufügen, indem wir das Mercurius-Auth-Plugin registrieren. Öffnen Sie dazu die Datei index.js im Verzeichnis src und fügen Sie den folgenden Code unter dem Kommentar register auth policy in Zeile 19 ein:

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

In unserer benutzerdefinierten Richtlinie ruft die Methode authContext das Benutzer-Token aus den Headern ab. Die Methode applyPolicy enthält benutzerdefinierte Richtlinien für Authentifizierung und Autorisierung.

Schlägt die Authentifizierung oder Autorisierung eines Benutzers fehl, geben wir außerdem einen Fehler mit einer allgemeinen Meldung aus, etwa „Ein Fehler ist aufgetreten. Versuchen Sie es erneut!“. Diese Meldung wird anstelle einer detaillierten Serverfehlermeldung angezeigt, die bestehende Schwachstellen des Servers offenlegen könnte.

Damit sind wir fertig. Im nächsten Abschnitt testen wir unsere APIs.

API testen

Starten Sie zunächst den Server, indem Sie im Stammverzeichnis npm run dev ausführen. Rufen Sie anschließend den GraphQL-Playground unter http://localhost:4500/playground auf.

Wenn wir nun eine geschützte API wie users oder user abfragen, erhalten wir den unten gezeigten Fehler:

Damit unsere Abfrage erfolgreich ist, müssen wir uns also authentifizieren. Melden wir uns an, um ein Token zu erhalten.

Öffnen Sie zum Anmelden einen neuen Tab im Playground und führen Sie die folgende Abfrage aus:

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

Bei erfolgreicher Abfrage wird ein Token erstellt und wie in der folgenden Abbildung zurückgegeben.

Beachten Sie, dass die Anmeldedaten des Benutzers bereits in der Datei index.js im Verzeichnis data enthalten sind.

Wenn Sie versuchen, sich mit Benutzerdaten anzumelden, die nicht in dieser Datei enthalten sind (z. B. mit dem Benutzernamen „John1Doe“), tritt der unten gezeigte Fehler auf:

Wenn wir unser Token nun als x-user im Header übergeben, können wir unsere geschützten APIs wie unten gezeigt erfolgreich abfragen. Kopieren Sie dazu das Token aus der Anmeldeabfrage und verwenden Sie es als Wert für x-user.

users-Abfrage

Hier sehen Sie ein Beispiel für eine users-Abfrage:

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

Fügen Sie Ihr Token wie unten gezeigt als Wert des HTTP-Header-Parameters x-user hinzu:

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

Das führt zu folgender Ausgabe:

user-Abfrage

Hier sehen Sie ein Beispiel für eine user-Abfrage:

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

Fügen Sie Ihr Token wie unten gezeigt als Wert des HTTP-Header-Parameters x-user hinzu:

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

Das führt zu folgender Ausgabe:

Fazit

In diesem Artikel haben wir gesehen, wie einfach sich GraphQL-APIs absichern lassen, wenn wir mit Fastify und GraphQL eine einfache Node.js-Anwendung erstellen.

Wie besprochen, bietet GraphQL integrierte Sicherheitsfunktionen wie Validierung und Typprüfung. Da Benutzer dank der Flexibilität und Leistungsfähigkeit nach Belieben Daten anfordern können, sollte Sicherheit jedoch immer höchste Priorität haben.

In diesem Artikel haben wir außerdem einige Strategien zur Absicherung von GraphQL-APIs vorgestellt: Authentifizierung und Autorisierung, Begrenzung der Abfragetiefe, Maskierung von Fehlern sowie Bereinigung und Validierung von Eingaben.

Diese Sicherheitsstrategien sind sehr wirksam. Zusätzliche Sicherheit bieten weitere Maßnahmen wie Abfrage-Timeouts und Ratenbegrenzungen. Sie legen fest, wie häufig ein Client eine API innerhalb eines bestimmten Zeitraums abfragen darf.

Testen Sie unser kostenloses Online-Tool JavaScript-Code-Prüfer, um zu sehen, wie die Snyk-Code-Engine Ihren Code auf Sicherheits- und Qualitätsprobleme untersucht.