Next.js-Formular vor Bots schützen, ohne Rätsel

# .env.local: nie im Repository, nie mit dem Präfix NEXT_PUBLIC_.
ANTISY_SITE_KEY=VOTRE_CLE_DE_SITE
ANTISY_SECRET=VOTRE_SECRET_DE_VERIFICATION

// app/layout.tsx
import type { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="fr">
      <head>
        {/* Der Site-Key ist öffentlich: Er kommt in die Seite. Das Secret nie. */}
        <script src="https://api.antisy.com/v1/i/l.js" data-site={process.env.ANTISY_SITE_KEY} defer />
      </head>
      <body>{children}</body>
    </html>
  );
}

// app/contact/page.tsx: ein gewöhnliches HTML-Formular, ohne Zustand und ohne JavaScript auf Ihrer Seite.
export default function ContactPage() {
  return (
    <form method="post" action="/api/contact">
      <label>
        Nom <input name="name" autoComplete="name" />
      </label>
      <label>
        E-mail <input name="email" type="email" autoComplete="email" />
      </label>
      <label>
        Message <textarea name="message" />
      </label>
      <button>Envoyer</button>
    </form>
  );
}

// antisy.mjs: Node 22 oder neuer, ohne Abhängigkeit.
// Gibt "allow" oder "deny" zurück.
// Antisy antwortet nicht (Netz, Zeitlimit, 5xx): "allow". Alles andere Ungewisse: "deny".

// Der 429 ist Ihre Entscheidung. Standardmässig "allow", wie bei einem Ausfall;
// für ein sensibles Formular setzen Sie "deny" (siehe die Seite zur Verifizierung).
const ON_RATE_LIMIT = "allow";

export async function antisyVerdict(token) {
  // 1. Ein vorhandenes Token muss die Form eines Tokens haben: 1 bis 2048 druckbare ASCII-Zeichen.
  //    Sonst wird Antisy nicht aufgerufen und nichts durchgelassen.
  //    Ein leeres oder fehlendes Feld (Script blockiert) geht als leere Zeichenkette: Antisy liest es als fehlendes Token.
  if (token && !/^[\x20-\x7e]{1,2048}$/.test(token)) {
    console.warn("Jeton mal formé, envoi non vérifié");
    return "deny";
  }

  let response;
  try {
    response = await fetch("https://api.antisy.com/v1/siteverify", {
      method: "POST",
      // fetch folgt Weiterleitungen standardmässig: Eine 3xx würde den Body samt Secret anderswohin wiederholen.
      // Hier ist sie ein Fehler Ihres Aufrufs (weiter unten abgelehnt).
      redirect: "manual",
      // Ein URLSearchParams-Body geht als application/x-www-form-urlencoded.
      body: new URLSearchParams({
        secret: process.env.ANTISY_SECRET, // Ihr Secret, nie in der Seite
        response: token ?? "",             // das Feld antisy-token, wie erhalten
      }),
      signal: AbortSignal.timeout(3000),   // nach 3 s antwortet Antisy nicht
    });
  } catch (error) {
    console.warn("Antisy injoignable, envoi laissé passer :", error.name);
    return "allow";
  }
  if (response.status >= 500) {
    console.warn("Antisy a répondu " + response.status + ", envoi laissé passer");
    return "allow";
  }
  if (response.status === 429) {
    console.warn("Antisy a répondu 429, décision : " + ON_RATE_LIMIT);
    return ON_RATE_LIMIT;
  }
  if (!response.ok) {
    // 400, 401, 413, 415 ...: Der Fehler liegt in Ihrem Aufruf. Zu beheben, nie ein Freipass.
    console.error("Antisy a refusé la requête (" + response.status + "), envoi non vérifié");
    return "deny";
  }
  const result = await response.json().catch(() => null);
  if (typeof result?.success !== "boolean") {
    console.error("Réponse d'Antisy illisible, envoi non vérifié");
    return "deny";
  }
  // Ein fehlendes oder abgelehntes Secret ist kein HTTP-Fehler: Die Antwort ist eine Ablehnung, mit 200.
  const codes = result["error-codes"] ?? [];
  if (codes.includes("missing-input-secret") || codes.includes("invalid-input-secret")) {
    console.error("Antisy refuse le secret : " + codes.join(", "));
  }
  // success ist die einzige Annahme: Es ist genau dann true, wenn verdict "allow" ist.
  return result.success ? "allow" : "deny";
}

// app/api/contact/route.ts
import { antisyVerdict } from "../../../lib/antisy.mjs";

export async function POST(request: Request) {
  const form = await request.formData();
  const token = form.get("antisy-token"); // eine Zeichenkette, eine Datei oder nichts

  // Fehlendes Feld (Script blockiert): leere Zeichenkette, Antisy entscheidet. Eine Datei ist kein Token: Ablehnung.
  const verdict = token === null || typeof token === "string" ? await antisyVerdict(token ?? "") : "deny";
  if (verdict === "deny") {
    return new Response("Envoi refusé.", { status: 403 }); // allgemeine Ablehnung, ohne Begründung
  }

  // … die Nachricht speichern oder senden
  return new Response(null, { status: 303, headers: { Location: "/merci" } });
}

// app/layout.tsx: mit einer CSP-Richtlinie mit Nonce, gesetzt von proxy.ts (middleware.ts vor Next.js 16)
import { headers } from "next/headers";
import type { ReactNode } from "react";

export default async function RootLayout({ children }: { children: ReactNode }) {
  const nonce = (await headers()).get("x-nonce") ?? undefined;
  return (
    <html lang="fr">
      <head>
        <script src="https://api.antisy.com/v1/i/l.js" data-site={process.env.ANTISY_SITE_KEY} defer nonce={nonce} />
      </head>
      <body>{children}</body>
    </html>
  );
}

{
  "success": true,
  "verdict": "allow",
  "flags": [],
  "error-codes": [],
  "challenge_ts": "2026-09-24T10:00:00Z",
  "hostname": "shop.example",
  "action": "contact",
  "event_id": "evt_01J7X4M2Q9K8ZP3R5T6V7W8Y9A"
}