Sicherheit für Nuxt 3

Artikel von

26. Januar 2023

0 Min. Lesezeit

Was ist Nuxt?

Nuxt ist ein intuitives Web-Framework, mit dem Sie Ihre nächste Vue.js-Anwendung sicher entwickeln können. Es ist ein Open-Source-Framework unter MIT-Lizenz, das die Webentwicklung einfach und leistungsstark macht. Wenn Sie loslegen möchten, empfehle ich Ihnen wärmstens, die offizielle Website zu besuchen.

Websicherheit

Webanwendungen werden täglich komplexer. Sie können vertrauliche Daten speichern oder Benutzerinformationen in Echtzeit verarbeiten. Um dies effektiv zu bewältigen, müssen Entwickler bestimmte Sicherheitsebenen implementieren. Dies lässt sich mit Sicherheitsmaßnahmen wie Rate-Limitern und Open-Source-Paketen erreichen, die Ihre Anwendung sicherer machen.

Über das nuxt-security-Modul

In diesem Artikel möchte ich Ihnen das neue Nuxt-Modul vorstellen, das ich kürzlich entwickelt habe und das Ihnen helfen soll, sicherere Nuxt-Anwendungen zu erstellen – egal, ob es sich um einen einfachen Blog oder einen komplexen E-Commerce-Shop handelt. Denken Sie daran, dass dieses Modul nicht alle Ihre Sicherheitsprobleme löst. Sein Hauptzweck ist es, Sie beim Erstellen sicherer Anwendungen zu unterstützen und Ihnen eine einfache Möglichkeit zu bieten, Sicherheitsebenen in Ihrem Projekt zu implementieren.

Bevor wir loslegen, sehen Sie sich das GitHub-Modul und die Dokumentation an. Das nuxt-security-Modul basiert derzeit auf zwei Hauptaspekten: den OWASP Top 10 für Node.js und Helmet.js.

Mit nuxt-security stehen Ihnen Middleware-Funktionen zur Verfügung, die dieselben HTTP-Sicherheitsheader wie HelmetJS festlegen, sowie benutzerdefinierte Middleware-Funktionen auf Grundlage von Empfehlungen von OWASP.

Hier sind Beispiele für HTTP-Statuscodes, die bei Anfragen zurückgegeben werden, wenn Sicherheitsmaßnahmen in einer Nuxt-Anwendung implementiert sind:

429 zu viele Anfragen – Von einer IP-Adresse gehen zu viele Anfragen ein (Schutz vor DoS-Angriffen – Denial of Service).
413 Anfrageentität zu groß – Der Request-Body (sowohl normale Daten als auch Dateien) ist zu groß für die Verarbeitung. Schutz vor Angriffen, die darauf abzielen, den Serverspeicher zu erschöpfen.
Ausgeblendeter `X-Powered-By`-Header. Es gilt meist als schlechte Praxis, offenzulegen, mit welcher Technologie eine Anwendung erstellt wurde. Daher blendet dieses Modul den Header vollständig aus.
400 ungültige Anfrage – Ein XSS-Validator für GET- und POST-Anfragen, der Anfragen mit gefährlichem Code verwirft.
CORS-Handler, ähnlich wie beliebte Express.js-Middleware.
405 Methode nicht erlaubt – Mit einem HTTP-Methoden-Restriktor können Sie festlegen, welche HTTP-Methoden akzeptiert werden.
Eine Implementierung der einfachen Authentifizierung, mit der Sie Ihre Anwendung vor unbefugtem Zugriff schützen können.

Die Sicherheitsheader von Helmet.js haben die folgende Struktur:

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

Bei der Entwicklung dieses Moduls habe ich Erweiterbarkeit und Anpassbarkeit berücksichtigt. So können Sie die Nuxt-Sicherheitskonfiguration auf die Anforderungen Ihrer Anwendung abstimmen, zum Beispiel:

nicht benötigte Header oder Middleware deaktivieren
Middleware so konfigurieren, dass sie nur für bestimmte Routen gilt
Middleware-Werte ändern

In der Moduldokumentation finden Sie außerdem Abschnitte mit bewährten Vorgehensweisen. Dort erfahren Sie mehr über die nächsten Schritte, mit denen Sie Ihre Anwendung sicherer machen können.

Das nuxt-security-Modul verwenden

`nuxt-security` zu Ihrer Nuxt-3-App hinzuzufügen, ist ganz einfach. Bei Verwendung der standardmäßigen und empfohlenen Middleware-Werte benötigt das Modul keine Konfiguration. Experimentieren Sie aber gern mit den Werten, um sie optimal an die Anforderungen Ihres Projekts anzupassen.

Um nuxt-security in Ihrer App zu verwenden, müssen Sie es zunächst mit einem Paketmanager Ihrer Wahl installieren:

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

Fügen wir es als Nächstes dem modules-Array in `nuxt.config.ts` hinzu:

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

Das war’s! Sowohl die HTTP-Sicherheitsheader von Helmet als auch die Middleware-Funktionen sind jetzt aktiviert und helfen Ihnen dabei, Ihre Anwendung sicherer zu machen.

Dieses Modul registriert im Hintergrund mehrere Sicherheits-Middlewares und Empfehlungen für Sie. Wenn Sie mehr über diese Funktionen erfahren möchten, sehen Sie sich den Request Size Limiter und die anderen Middleware-Funktionen in diesem Abschnitt an.

Wenn Sie die standardmäßigen Sicherheitsfunktionen anpassen möchten, können Sie das folgendermaßen tun:

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

Damit wird die Standardkonfiguration der Sicherheits-Middleware überschrieben: Der Rate-Limiter sperrt bestimmte IP-Adressen bereits nach zwei Anfragen und wird nach einem Tag zurückgesetzt. Dies gilt jedoch nur für eine bestimmte Route. Wenn die Regel global gelten soll, übergeben Sie einfach eine leere Zeichenfolge – so registriert Nuxt globale Middleware.

Weitere Anpassungsmöglichkeiten finden Sie auf der Konfigurationsseite.

Zusammenfassung

Sehr gut! Sie haben Ihrer Anwendung erfolgreich Sicherheitsmaßnahmen hinzugefügt, die sie etwas sicherer machen sollten. Denken Sie aber daran: Das ist erst der Anfang Ihrer Sicherheitsreise. Weitere Informationen finden Sie im folgenden YouTube-Video.

Wenn Sie Empfehlungen oder Wünsche haben, können Sie sich jederzeit gerne an mich wenden.