So fügst du ein Honeypot-Feld hinzu, das Bots ausfüllen und Menschen nicht

Füge ein zusätzliches Texteingabefeld hinzu, das du außerhalb des sichtbaren Bereichs versteckst, aus der Tab-Reihenfolge nimmst und in aria-hidden einpackst, mit einem Namen, den kein Browser automatisch ausfüllt. Menschen füllen es nie aus; Bots, die jedes Eingabefeld ausfüllen, schon. Behandle auf dem Server jeden Post mit einem Wert darin als Spam und antworte genauso wie auf eine echte Nachricht.

Was an einem Honeypot besonders ist

Ein Honeypot muss zwei Dinge zugleich sein. Für einen Bot, der das HTML liest, muss er wie ein normales Feld aussehen, das sich auszufüllen lohnt. Für jeden Menschen darf er nicht existieren, auch für Leute, die das Formular anders nutzen als du: jemand mit Screenreader, jemand, der mit der Tastatur tabbt, jemand, dessen Passwortmanager Formulare ausfüllt. Die meisten Honeypot-Fehler entstehen, weil eine dieser Personen vergessen wurde, und das Symptom ist eine echte Nachricht, die still als Spam abgelegt wird.

Das Markup

Setze die Falle ins Formular, neben die echten Felder, als einfaches Texteingabefeld. Ein Eingabefeld mit type="hidden" funktioniert nicht: Bots wissen, dass Menschen solche Felder nicht bearbeiten können, und lassen sie in Ruhe.

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="POST">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />
  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <div class="hp" aria-hidden="true">
    <label for="hp-field">Leave this empty</label>
    <input id="hp-field" name="_gotcha" type="text" tabindex="-1" autocomplete="off" />
  </div>

  <button>Send</button>
</form>

<style>
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
</style>

• aria-hidden="true" am Wrapper entfernt Label und Eingabefeld aus dem Accessibility Tree, sodass Screenreader sie nicht vorlesen.
• tabindex="-1" verhindert, dass die Tab-Taste auf einem Eingabefeld landet, das niemand sehen kann.
• Das Label lautet Leave this empty. Falls ein Tool das Feld trotzdem anzeigt, weiß die Person, die es liest, was zu tun ist.
• Füge kein required hinzu. Ein Pflichtfeld, das Menschen nicht sehen können, blockiert jedes ehrliche Absenden.

Wie du ihn versteckst

Bots haben gelernt, offensichtlich versteckte Felder zu überspringen. Einfache Scraper füllen immer noch alles aus, aber manche prüfen das hidden-Attribut oder ein Inline-display: none, bevor sie tippen. Je weiter das Verstecken vom Eingabefeld selbst entfernt ist, desto mehr Bots fallen darauf herein.

Verwende die Off-Screen-Klasse aus deinem Stylesheet. Sie fängt die meisten Bots und ist für Menschen am sichersten. Wenn ein Honeypot nicht mehr wirkt, füge einen zweiten mit anderem Namen hinzu, statt einen raffinierteren Versteck-Trick zu suchen.

Wähle einen Namen, den Autofill ignoriert

Browser und Passwortmanager füllen Felder, indem sie anhand von name, id, Label und autocomplete-Wert raten. autocomplete="off" ist nur ein Hinweis, und manche Browser ignorieren ihn bei Feldern, die nach Adressen oder Kontaktdaten aussehen. Die eigentliche Arbeit leistet also der Name.

Auf dem Server prüfen

Ein Honeypot wirkt nur, wenn der Server ihn liest. Eine Prüfung im Browser ist nutzlos, da ein Bot dein Skript nie ausführt. Hat das Feld einen Wert, antworte genauso wie auf eine echte Nachricht und speichere oder leite den Post nicht weiter. Eine andere Antwort verrät dem Bot, welches Feld ihn entlarvt hat. Die Beispiele unten rufen dein eigenes saveMessage auf; ersetze es durch das, was die Nachricht speichert oder mailt.

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="POST">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required />
  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <div class="hp" aria-hidden="true">
    <label for="hp-field">Leave this empty</label>
    <input id="hp-field" name="_gotcha" type="text" tabindex="-1" autocomplete="off" />
  </div>

  <button>Send</button>
</form>

"use server";

import { redirect } from "next/navigation";

export async function sendMessage(formData: FormData) {
  if (String(formData.get("company_website") ?? "").trim() !== "") {
    console.info("honeypot", { at: new Date().toISOString() });
    redirect("/contact/thanks");
  }
  await saveMessage({
    email: String(formData.get("email") ?? ""),
    message: String(formData.get("message") ?? ""),
  });
  redirect("/contact/thanks");
}

import { defineAction } from "astro:actions";
import { z } from "astro/zod";

export const server = {
  sendMessage: defineAction({
    accept: "form",
    input: z.object({
      email: z.email(),
      message: z.string().min(1),
      company_website: z.string().nullish(),
    }),
    handler: async ({ company_website, ...fields }) => {
      if (company_website?.trim()) return { sent: true };
      await saveMessage(fields);
      return { sent: true };
    },
  }),
};

import { createServerFn } from "@tanstack/react-start";

export const sendMessage = createServerFn({ method: "POST" })
  .validator((data: unknown) => {
    if (!(data instanceof FormData)) throw new Error("Expected form data");
    return {
      email: String(data.get("email") ?? ""),
      message: String(data.get("message") ?? ""),
      trapped: String(data.get("company_website") ?? "").trim() !== "",
    };
  })
  .handler(async ({ data: { trapped, ...fields } }) => {
    if (!trapped) await saveMessage(fields);
    return { ok: true };
  });

import { redirect } from "react-router";
import type { Route } from "./+types/contact";

export async function action({ request }: Route.ActionArgs) {
  const form = await request.formData();
  if (String(form.get("company_website") ?? "").trim()) return redirect("/contact/thanks");
  await saveMessage({ email: String(form.get("email")), message: String(form.get("message")) });
  return redirect("/contact/thanks");
}

import { redirect } from "@sveltejs/kit";
import type { Actions } from "./$types";

export const actions = {
  default: async ({ request }) => {
    const form = await request.formData();
    if (!String(form.get("company_website") ?? "").trim()) {
      await saveMessage({ email: String(form.get("email")), message: String(form.get("message")) });
    }
    redirect(303, "/contact/thanks");
  },
} satisfies Actions;

export default defineEventHandler(async (event) => {
  const body = await readBody<{ email?: string; message?: string; company_website?: string }>(event);
  if (body.company_website?.trim()) {
    setResponseStatus(event, 201);
    return { sent: true };
  }
  await saveMessage({ email: body.email ?? "", message: body.message ?? "" });
  setResponseStatus(event, 201);
  return { sent: true };
});

const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
  method: "POST",
  headers: { Accept: "application/json" },
  body: new FormData(form),
});

const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
  method: "POST",
  headers: { Accept: "application/json" },
  body: new FormData(form),
});

Wie Ikiform mit dem Honeypot umgeht

Jedes Ikiform-Formular hat standardmäßig einen Honeypot namens _gotcha. Ändere ihn pro Formular unter Honeypot field in den Einstellungen des Formulars; jeder Name, den du wählst, ist reserviert und wird nie als Antwort gespeichert. Ein ausgefüllter Honeypot erhöht den Spam-Score um 5, was allein die Schwelle von 5 erreicht.

Ikiform verwirft den Post nicht. Es behält ihn als Spam, sodass du die Nachricht finden und wiederherstellen kannst, falls je ein echter Mensch in die Falle tappt. Ein als Spam eingestufter Post bekommt dieselbe Erfolgsantwort wie ein echter, ein Bot lernt also nichts. Er wird mit dem Status spam gespeichert, löst weder Benachrichtigungs-E-Mail noch Webhook aus, zählt nicht zu deiner Nutzung und wird nach 30 Tagen gelöscht. Jeden Montag bekommt ein Workspace, der Spam blockiert hat, eine Zusammenfassung per E-Mail mit der Gesamtzahl, den meistbetroffenen Formularen und den häufigsten Gründen. Die Spam-Dokumentation und HTML-Formulare enthalten die Referenz.

Prüfen, ob es funktioniert

1. Lade das Formular mit eingeschaltetem Screenreader und geh es durch. Die Falle wird nie vorgelesen.
2. Tabbe durch das Formular. Der Fokus springt vom letzten echten Feld direkt zum Button.
3. Lass Browser und Passwortmanager das Formular automatisch ausfüllen. Die Falle bleibt leer.
4. Sende einen Post mit ausgefülltem Honeypot, _gotcha=bot. Er bekommt trotzdem eine Erfolgsantwort, aber die Einsendung wird als Spam gespeichert und löst weder E-Mail noch Webhook aus.
5. Sende eine normale Nachricht. Sie kommt als angenommen an, ohne Spur des Fallen-Felds.

Stolperfallen

• JSON-Posts. Wenn du den Body von Hand statt mit FormData baust, nimm die Falle mit auf, sonst liest dein Server sie auch bei Bots als leer.
• Formular-Builder, die Felder umbenennen. Manche Builder versehen Eingabefelder mit Präfixen oder benennen sie um. Prüfe im gesendeten Body, nicht im Editor, wie die Falle wirklich heißt.
• Caching. Hat eine gecachte Seite nach dem Umbenennen noch den alten Fallennamen, kommen Posts mit dem alten Namen an und gehen durch. Benenne auf beiden Seiten gleichzeitig um.
• Checkbox-Honeypots. Eine versteckte Checkbox funktioniert auch, aber Screenreader gehen mit verirrten Checkboxen schlechter um als mit Texteingabefeldern. Nimm lieber ein Texteingabefeld.
• Eine Schicht. Bots, die einen echten Browser ausführen und unsichtbare Felder überspringen, kommen an jedem Honeypot vorbei. Kombiniere ihn mit einem Rate-Limit und bei Bedarf einer Menschlichkeitsprüfung.

Fragen