Apptiva Logo

Content Security Policy in Express

Webseitenbetreiber stehen vor der Herausforderung, ihre Anwendungen gegen eine Vielzahl von Angriffen abzusichern. Eine der wichtigsten Massnahmen, um Sicherheitsrisiken wie Cross-Site Scripting (XSS) zu minimieren, ist die Content Security Policy (CSP). Mithilfe von CSP können Entwickler festlegen, welche Inhalte auf ihrer Webseite ausgeführt oder geladen werden dürfen – und von welchen Quellen.

Publiziert am von Linus Hüsler

In diesem Wissenshappen zeigen wir dir, wie du CSP in einer Express-Anwendung implementieren kannst. Dafür nutzen wir das beliebte Sicherheitsmodul Helmet, das die Konfiguration von Sicherheits-Headern erheblich vereinfacht.

Was ist Helmet?

Helmet ist ein Middleware-Paket für Express-Anwendungen, das wichtige Sicherheitsheader konfiguriert, um deine Webseite vor Angriffen zu schützen. Eines der Module innerhalb von Helmet ist die Content Security Policy, mit der du eine CSP einfach und flexibel definieren kannst.

Beispiel: CSP mit Helmet konfigurieren

Hier ist ein Beispiel, wie du CSP mithilfe von Helmet in einer Express-Anwendung implementierst:

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

const app = express();

// Content Security Policy konfigurieren
app.use(
helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'"], // Erlaubt Inhalte nur von der eigenen Domain
scriptSrc: ["'self'", "https://trusted-cdn.com"], // Erlaubt Skripte von der eigenen Domain und einem CDN
styleSrc: ["'self'", "'unsafe-inline'", "https://trusted-cdn.com"], // Erlaubt Styles von der eigenen Domain, Inline-Styles und einem CDN
imgSrc: ["'self'", "https://images.com"], // Erlaubt Bilder von der eigenen Domain und einem Bildhosting-Dienst
connectSrc: ["'self'", "https://api.example.com"], // Erlaubt Verbindungen zur eigenen Domain und einer API
fontSrc: ["'self'", "https://fonts.gstatic.com"], // Erlaubt Schriftarten von der eigenen Domain und Google Fonts
objectSrc: ["'none'"], // Blockiert Objekte wie Flash
upgradeInsecureRequests: [], // Erzwingt HTTPS für alle HTTP-Anfragen
},
})
);

app.get('/', (req, res) => {
res.send('<h1>Content Security Policy mit Helmet</h1>');
});

// Server starten
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server läuft auf http://localhost:${PORT}`);
});

Was passiert hier?

In diesem Code wird eine Content Security Policy mit Helmet definiert, die die folgenden Sicherheitsregeln implementiert:

  1. defaultSrc: Standardquellen werden auf die eigene Domain ('self') beschränkt. Dies blockiert alle Inhalte von unbekannten Quellen, wenn keine spezifische Direktive angegeben ist.
  2. scriptSrc: Skripte dürfen nur von der eigenen Domain und einem vertrauenswürdigen Content Delivery Network (CDN) geladen werden.
  3. styleSrc: Stylesheets sind von der eigenen Domain, einem CDN und Inline-Styles erlaubt. Die Nutzung von 'unsafe-inline' sollte jedoch vermieden werden, wenn möglich.
  4. imgSrc: Bilder dürfen nur von der eigenen Domain und einer Bildhosting-Plattform geladen werden.
  5. connectSrc: Externe Verbindungen, z. B. zu APIs, sind auf bestimmte Quellen beschränkt.
  6. fontSrc: Schriftarten dürfen nur von der eigenen Domain und Google Fonts geladen werden.
  7. objectSrc: Objekte wie Flash-Inhalte werden komplett blockiert, da sie häufig ein Sicherheitsrisiko darstellen.
  8. upgradeInsecureRequests: Alle unsicheren HTTP-Anfragen werden automatisch zu HTTPS umgeleitet, sofern möglich.

Warum ist CSP wichtig?

Die Content Security Policy schützt deine Webseite vor einer Vielzahl von Sicherheitsrisiken, indem sie:

  • Cross-Site Scripting (XSS) verhindert: Inline-Skripte oder unsichere Inhalte aus unbekannten Quellen werden blockiert.
  • Datensicherheit stärkt: Nur vertrauenswürdige Quellen können auf der Webseite verwendet werden.
  • Sicherheitsberichte liefert: CSP kann Berichte über Richtlinienverstösse an eine spezifizierte URI senden, was die Behebung von Sicherheitslücken erleichtert.

Tipps für die Implementierung

  • Schrittweise einführen: Starte mit einem Berichtsmodus (Report-Only), um potenzielle Probleme zu erkennen, bevor du die Richtlinien erzwingst.
  • Tools verwenden: Es gibt zahlreiche Tools, wie den CSP Evaluator, die dir helfen können, deine Richtlinien zu überprüfen und zu optimieren.
  • Sorgfältig planen: Eine zu restriktive CSP kann die Funktionalität deiner Webseite beeinträchtigen. Analysiere daher, welche Ressourcen wirklich benötigt werden.
  • Regelmässige Updates: Sicherheitsanforderungen ändern sich – passe deine CSP regelmässig an, um neue Bedrohungen abzuwehren