Kommentare auf statischen Astro-Blogs mit Netlify Forms einbinden

Die Integration eines Kommentarsystems auf einem statischen Blog klingt zunächst einfach – doch die Umsetzung stellt Entwickler oft vor Herausforderungen. Während Drittanbieter-Dienste wie Disqus oder Giscus schnell integriert sind, bringen sie externe Abhängigkeiten und potenzielle Sicherheitsrisiken mit sich. Eine elegantere Alternative bietet die Nutzung bestehender Hosting-Ressourcen.

Wer seine Website auf Netlify betreibt, kann ohne zusätzlichen Aufwand ein vollwertiges Kommentarsystem realisieren. Dabei kommen Netlify Forms und serverlose Funktionen zum Einsatz – eine Kombination, die ohne Datenbank oder Moderations-Dashboard auskommt. Diese Lösung wurde maßgeblich von Phil Hawksworths jamstack-comments-engine inspiriert und ermöglicht eine vollständige Kontrolle über veröffentlichte Inhalte.

Ein System mit vier klaren Schritten

Das Kommentarsystem folgt einem strukturierten Ablauf, der sich in vier Phasen unterteilt. Jeder Schritt ist automatisiert und erfordert keine manuelle Interaktion des Website-Betreibers:

• Einreichung: Ein Besucher füllt das Kommentarformular aus und sendet es ab. Netlify erfasst die Daten automatisch in einer Warteschlange, ohne dass eine serverseitige Verarbeitung nötig ist.

• Benachrichtigung: Ein Webhook löst die Funktion comment-handler aus, die eine E-Mail mit speziellen Genehmigungs- und Löschlinks versendet. Diese Links sind mit einem HMAC-Signatur geschützt, um Missbrauch zu verhindern.

• Freigabe: Durch Klicken auf Genehmigen wird die Funktion approve-comment aktiviert. Diese überträgt die Kommentardaten in ein zweites Formular (approved-comments) und entfernt sie aus der ursprünglichen Warteschlange.

• Anzeige: Die Funktion get-comments liest ausschließlich freigegebene Kommentare aus und stellt sie auf der Website dar. So erreichen nur vom Betreiber geprüfte Inhalte die Leser.

Dieses Design eliminiert nicht nur den Bedarf an externen Skripten, sondern bietet auch eine vollständige Transparenz über veröffentlichte Inhalte – ganz ohne zusätzliche Infrastruktur.

Das Kommentarformular: Einfach, aber sicher

Netlify erkennt Formulare automatisch während des Build-Prozesses, indem es nach dem Attribut data-netlify="true" sucht. Da der Blog mit Astro erstellt wird, handelt es sich bei dem Formular um eine serverseitig gerenderte Komponente. Dadurch ist es im generierten HTML enthalten und wird von Netlify ohne manuelle Konfiguration erfasst.

<form name="blog-comments" method="POST" data-netlify="true" netlify-honeypot="bot-field">
  <input type="hidden" name="form-name" value="blog-comments" />
  <input type="hidden" name="postSlug" value={postId} />
  
  <!-- Honeypot-Feld zur Spam-Erkennung -->
  <input name="bot-field" style="display:none" tabindex="-1" />
</form>

Wichtige Details zur Implementierung:

• `form-name` ist erforderlich, wenn das Formular per fetch statt über einen regulären POST-Request gesendet wird. Netlify nutzt diesen Wert, um die Daten der richtigen Formularwarteschlange zuzuordnen.

• `postSlug` speichert die eindeutige Kennung des Blogbeitrags. Diese Information dient später als Filterkriterium, um Kommentare dem richtigen Artikel zuzuordnen.

• Der `netlify-honeypot`-Mechanismus unterdrückt automatisch alle Einreichungen, bei denen das versteckte Feld bot-field ausgefüllt wurde – ein einfacher, aber effektiver Schutz vor automatisierten Spam-Bots.

Das Formular wird per fetch mit dem Header Content-Type: application/x-www-form-urlencoded an die aktuelle Seiten-URL gesendet. Netlify fängt diese Anfragen ab, bevor sie den Ursprungsserver erreichen.

Serverlose Funktionen: Automatisierung ohne Backend

Die Lösung umfasst drei Netlify Functions, die jeweils eine spezifische Aufgabe übernehmen. Alle Funktionen laufen als serverlose Logik und benötigen keine dauerhafte Infrastruktur.

get-comments: Kommentare sicher abrufen

Die Funktion get-comments liest freigegebene Kommentare aus dem approved-comments-Formular und filtert sie nach dem postSlug-Parameter. Ein zentraler Sicherheitsaspekt ist die Maskierung von E-Mail-Adressen durch Hashing, um die Privatsphäre der Nutzer zu schützen.

import crypto from "node:crypto";

function gravatarHash(email) {
  return crypto
    .createHash("md5")
    .update(email.trim().toLowerCase())
    .digest("hex");
}

const comments = submissions
  .filter((s) => s.data?.postSlug === slug)
  .map((s) => ({
    name: s.data.name,
    comment: s.data.comment,
    date: s.data.originalDate || s.created_at,
    emailHash: s.data.email ? gravatarHash(s.data.email) : null,
  }))
  .sort((a, b) => new Date(a.date) - new Date(b.date));

Der Code verwendet MD5-Hashing, um E-Mail-Adressen in ein Format zu konvertieren, das mit der Gravatar-API kompatibel ist. Zudem wird das ursprüngliche Erstellungsdatum der Kommentare beibehalten, da das Feld created_at im approved-comments-Formular das Genehmigungsdatum widerspiegelt. Die originalDate-Logik stellt sicher, dass das ursprüngliche Einreichungsdatum erhalten bleibt.

comment-handler: Automatische Moderationsbenachrichtigung

Sobald ein neues Kommentar in der blog-comments-Warteschlange landet, wird die Funktion comment-handler per Webhook ausgelöst. Sie versendet eine E-Mail mit Genehmigungs- und Löschlinks, die jeweils mit einer HMAC-SHA256-Signatur geschützt sind.

import crypto from "node:crypto";

function hmac(submissionId, action, secret) {
  return crypto
    .createHmac("sha256", secret)
    .update(`${submissionId}:${action}`)
    .digest("hex");
}

const approveToken = hmac(id, "approve", secret);
const deleteToken = hmac(id, "delete", secret);

Jeder Token enthält die Submissions-ID sowie die beabsichtigte Aktion. Dadurch kann ein Genehmigungstoken nicht als Löschtoken missbraucht werden, und Tokens sind nur für die jeweilige Einreichung gültig. Die E-Mail wird über Resend versendet, einen Dienst, der auch für andere Benachrichtigungen wie neue Blogbeiträge genutzt wird.

approve-comment: Sichere Freigabe von Inhalten

Die Funktion approve-comment wird aktiviert, sobald ein Nutzer auf einen der signierten Links in der E-Mail klickt. Sie führt zwei zentrale Aufgaben aus:

• Überprüfung der HMAC-Signatur mit crypto.timingSafeEqual, um Manipulationen zu erkennen.
• Übertragung der Daten in das approved-comments-Formular und Löschen des ursprünglichen Eintrags aus der Warteschlange.

if (!crypto.timingSafeEqual(token, expectedToken)) {
  return new Response("Ungültiger Token", { status: 403 });
}

Die Funktion stellt sicher, dass nur authentifizierte Aktionen durchgeführt werden, und garantiert so die Integrität des Moderationsprozesses.

Fazit: Ein zukunftssicheres Kommentarsystem

Diese Lösung demonstriert, wie sich mit bestehenden Hosting-Ressourcen ein vollständig kontrollierbares Kommentarsystem auf statischen Websites umsetzen lässt – ohne externe Abhängigkeiten oder komplexe Backend-Infrastruktur. Die Kombination aus Netlify Forms, serverlosen Funktionen und Webhooks bietet nicht nur eine hohe Sicherheit, sondern auch eine einfache Skalierbarkeit.

Für Entwickler, die Wert auf Datenschutz und Kontrolle legen, stellt dieser Ansatz eine überzeugende Alternative zu Drittanbieter-Lösungen dar. Da die Technik auf Astro und Netlify setzt, lässt sie sich zudem leicht auf ähnliche Projekte übertragen.