Webhook-Signaturen verifizieren

So verifizierst du Formspree-Webhook-Signaturen in deinem Empfänger-Code.

Das entscheidende Detail ist, dass Formspree nicht nur den Roh-Body signiert. Es signiert sowohl den Zeitstempel als auch den Roh-Body, in diesem Format:

{timestamp}.{raw_body}

Die Signatur wird im Header Formspree-Signature in diesem Format gesendet:

t=<unix>,v1=<hex>

Wesentliche Anforderungen

• Verwende den Roh-Request-Body genau so, wie er empfangen wurde.
• Parse den Header Formspree-Signature, um t und v1 zu extrahieren.
• Berechne HMAC_SHA256(secret, f"{t}.{raw_body}") und vergleiche es mit v1.
• Optional: Lehne Requests ab, die älter als ein Toleranzfenster sind (Schutz vor Replay-Angriffen).

Code-Beispiele

Hier sind ein paar Code-Snippets, die dir den Einstieg erleichtern.

Python (Flask)

import hmac
import hashlib
import time
from flask import Flask, request, abort

app = Flask(__name__)

SIGNING_SECRET = "your_signing_secret"  # Set this to the secret shown in Formspree

def verify_formspree_signature(secret, signature_header, raw_body, tolerance=300):
    if not signature_header:
        return False

    try:
        # Header format: "t=<unix>,v1=<hex>"
        parts = dict(item.split("=", 1) for item in signature_header.split(","))
        timestamp = int(parts.get("t", "0"))
        received_sig = parts.get("v1")
    except Exception:
        return False

    if not received_sig:
        return False

    # Optional: reject old requests to prevent replay attacks
    if abs(int(time.time()) - timestamp) > tolerance:
        return False

    # Formspree signs: "{timestamp}.{raw_body}"
    signed_payload = f"{timestamp}.{raw_body}"

    # Compute HMAC-SHA256 with the shared secret
    expected_sig = hmac.new(
        key=secret.encode("utf-8"),
        msg=signed_payload.encode("utf-8"),
        digestmod=hashlib.sha256,
    ).hexdigest()

    # Constant-time compare to avoid timing attacks
    return hmac.compare_digest(expected_sig, received_sig)

@app.post("/webhook")
def webhook():
    # Important: read the raw request body as sent
    raw_body = request.get_data(as_text=True)
    signature = request.headers.get("Formspree-Signature", "")

    if not verify_formspree_signature(SIGNING_SECRET, signature, raw_body):
        abort(401)

    return ("ok", 200)

JavaScript (Node.js + Express)

const crypto = require("crypto");
const express = require("express");
const app = express();

const SIGNING_SECRET = "your_signing_secret"; // Set this to the secret shown in Formspree

// Capture the raw body before JSON parsing changes it
app.use(express.json({
  verify: (req, res, buf) => {
    req.rawBody = buf.toString("utf8");
  }
}));

function verifyFormspreeSignature(secret, signatureHeader, rawBody, tolerance = 300) {
  if (!signatureHeader) return false;

  // Header format: "t=<unix>,v1=<hex>"
  const parts = Object.fromEntries(
    signatureHeader.split(",").map(s => s.split("=", 2))
  );
  const timestamp = parseInt(parts.t || "0", 10);
  const receivedSig = parts.v1;

  if (!receivedSig) return false;

  // Optional: reject old requests to prevent replay attacks
  const now = Math.floor(Date.now() / 1000);
  if (Math.abs(now - timestamp) > tolerance) return false;

  // Formspree signs: "{timestamp}.{raw_body}"
  const signedPayload = `${timestamp}.${rawBody}`;

  // Compute HMAC-SHA256 with the shared secret
  const expectedSig = crypto
    .createHmac("sha256", secret)
    .update(signedPayload, "utf8")
    .digest("hex");

  // Constant-time compare to avoid timing attacks
  return crypto.timingSafeEqual(
    Buffer.from(expectedSig, "utf8"),
    Buffer.from(receivedSig, "utf8")
  );
}

app.post("/webhook", (req, res) => {
  const signature = req.header("Formspree-Signature") || "";

  if (!verifyFormspreeSignature(SIGNING_SECRET, signature, req.rawBody)) {
    return res.status(401).send("invalid signature");
  }

  res.status(200).send("ok");
});

app.listen(3000);

Fehlerbehebung und häufige Probleme

Hier sind einige häufige Fehler, auf die du achten solltest:

• JSON vor dem Signieren erneut serialisieren: Verifiziere anhand der Roh-Request-Body-Bytes genau so, wie sie empfangen wurden, da das Parsen und erneute Stringifizieren von JSON die Byte-Sequenz verändert und den HMAC bricht.
• Nur den Body signieren (das t.-Präfix fehlt): Wie oben erwähnt, signiert Formspree den Zeitstempel und das Payload zusammen, daher musst du den HMAC über t.<raw_body> (einschließlich des t.-Trennzeichens) berechnen und nicht nur über den Body allein.
• Mit dem gesamten Header-String anstelle des v1-Werts vergleichen: Extrahiere den v1-Signaturwert aus dem Signatur-Header und vergleiche nur diesen Hex-Digest, nicht den gesamten kommagetrennten Header-Inhalt.
• Ein anderes Secret als das für den Webhook konfigurierte signing_secret verwenden: Stelle sicher, dass das Secret, das du für den HMAC verwendest, genau das Webhook-Signing-Secret aus den Formspree-Webhook-Einstellungen ist und nicht dein API-Key oder ein anderes Projekt-Secret.