Bot Protection

1// Client-side form component
2"use client";
3
4export function ContactForm() {
5  return (
6    <form action="/api/contact" method="POST">
7      <input type="text" name="name" placeholder="Name" required />
8      <input type="email" name="email" placeholder="Email" required />
9
10      {/* Honeypot - hidden from users, bots will fill it */}
11      <input
12        type="text"
13        name="website"
14        style={{
15          position: "absolute",
16          left: "-9999px",
17          tabIndex: -1,
18          autocomplete: "off",
19        }}
20        aria-hidden="true"
21      />
22
23      {/* Alternative CSS hiding */}
24      <div className="hidden">
25        <input type="text" name="phone_number" tabIndex={-1} />
26      </div>
27
28      <button type="submit">Send</button>
29    </form>
30  );
31}
32
33// Server-side validation
34// src/app/api/contact/route.ts
35
36import { NextRequest, NextResponse } from "next/server";
37
38export async function POST(request: NextRequest) {
39  const body = await request.formData();
40
41  // Check honeypot fields
42  const honeypot1 = body.get("website");
43  const honeypot2 = body.get("phone_number");
44
45  if (honeypot1 || honeypot2) {
46    // Log potential bot attempt
47    console.log("Bot detected: honeypot filled");
48
49    // Return success to not alert the bot
50    return NextResponse.json({ success: true });
51  }
52
53  // Process legitimate submission
54  const name = body.get("name");
55  const email = body.get("email");
56
57  // ...
58}

1// Client-side: Add timestamp to form
2"use client";
3
4import { useEffect, useState } from "react";
5
6export function ProtectedForm() {
7  const [timestamp, setTimestamp] = useState("");
8
9  useEffect(() => {
10    setTimestamp(Date.now().toString());
11  }, []);
12
13  return (
14    <form action="/api/submit" method="POST">
15      <input type="hidden" name="timestamp" value={timestamp} />
16      <input type="text" name="data" />
17      <button type="submit">Submit</button>
18    </form>
19  );
20}
21
22// Server-side validation
23// src/app/api/submit/route.ts
24
25import { NextRequest, NextResponse } from "next/server";
26
27const MIN_SUBMIT_TIME = 2000;  // 2 seconds minimum
28const MAX_SUBMIT_TIME = 3600000; // 1 hour maximum
29
30export async function POST(request: NextRequest) {
31  const body = await request.json();
32
33  const timestamp = parseInt(body.timestamp);
34  const now = Date.now();
35  const elapsed = now - timestamp;
36
37  // Too fast = bot
38  if (elapsed < MIN_SUBMIT_TIME) {
39    console.log(`Bot detected: submitted in ${elapsed}ms`);
40    return NextResponse.json(
41      { error: "Please take your time filling the form" },
42      { status: 400 }
43    );
44  }
45
46  // Too slow = stale token
47  if (elapsed > MAX_SUBMIT_TIME) {
48    return NextResponse.json(
49      { error: "Form expired. Please refresh and try again" },
50      { status: 400 }
51    );
52  }
53
54  // Process legitimate submission
55}

1// src/lib/bot-detection.ts
2
3const BOT_PATTERNS = [
4  /bot/i,
5  /crawler/i,
6  /spider/i,
7  /scraper/i,
8  /curl/i,
9  /wget/i,
10  /python-requests/i,
11  /axios/i,
12  /node-fetch/i,
13  /headless/i,
14  /phantom/i,
15  /selenium/i,
16  /puppeteer/i,
17];
18
19// Known good bots (search engines)
20const GOOD_BOTS = [
21  /googlebot/i,
22  /bingbot/i,
23  /yandexbot/i,
24  /duckduckbot/i,
25  /slurp/i, // Yahoo
26];
27
28export function analyzeUserAgent(userAgent: string | null): {
29  isBot: boolean;
30  isGoodBot: boolean;
31  confidence: number;
32} {
33  if (!userAgent) {
34    return { isBot: true, isGoodBot: false, confidence: 0.9 };
35  }
36
37  // Check for good bots first
38  for (const pattern of GOOD_BOTS) {
39    if (pattern.test(userAgent)) {
40      return { isBot: true, isGoodBot: true, confidence: 0.95 };
41    }
42  }
43
44  // Check for bad bot patterns
45  for (const pattern of BOT_PATTERNS) {
46    if (pattern.test(userAgent)) {
47      return { isBot: true, isGoodBot: false, confidence: 0.8 };
48    }
49  }
50
51  // Suspicious: no version numbers
52  if (!/\d/.test(userAgent)) {
53    return { isBot: true, isGoodBot: false, confidence: 0.6 };
54  }
55
56  return { isBot: false, isGoodBot: false, confidence: 0.1 };
57}
58
59// Usage in API route
60export async function POST(request: NextRequest) {
61  const userAgent = request.headers.get("user-agent");
62  const { isBot, isGoodBot, confidence } = analyzeUserAgent(userAgent);
63
64  if (isBot && !isGoodBot && confidence > 0.7) {
65    return NextResponse.json(
66      { error: "Access denied" },
67      { status: 403 }
68    );
69  }
70
71  // Continue processing
72}

1// src/middleware.ts
2
3import { NextRequest, NextResponse } from "next/server";
4
5// Protected paths
6const PROTECTED_PATHS = [
7  "/api/contact",
8  "/api/signup",
9  "/api/login",
10];
11
12export function middleware(request: NextRequest) {
13  const { pathname } = request.nextUrl;
14
15  // Only check protected paths
16  if (!PROTECTED_PATHS.some((path) => pathname.startsWith(path))) {
17    return NextResponse.next();
18  }
19
20  // Check for missing headers that browsers always send
21  const userAgent = request.headers.get("user-agent");
22  const acceptLanguage = request.headers.get("accept-language");
23  const acceptEncoding = request.headers.get("accept-encoding");
24
25  if (!userAgent || !acceptLanguage || !acceptEncoding) {
26    return NextResponse.json(
27      { error: "Access denied" },
28      { status: 403 }
29    );
30  }
31
32  // Check for suspicious patterns
33  const suspiciousHeaders = [
34    request.headers.get("x-forwarded-for")?.split(",").length > 5,
35    /python|curl|wget/i.test(userAgent),
36  ];
37
38  if (suspiciousHeaders.some(Boolean)) {
39    console.log("Suspicious request blocked:", {
40      ip: request.ip,
41      userAgent,
42      path: pathname,
43    });
44
45    return NextResponse.json(
46      { error: "Access denied" },
47      { status: 403 }
48    );
49  }
50
51  return NextResponse.next();
52}
53
54export const config = {
55  matcher: ["/api/:path*"],
56};

1// npm install @marsidev/react-turnstile
2
3"use client";
4
5import { Turnstile } from "@marsidev/react-turnstile";
6import { useState } from "react";
7
8export function ProtectedForm() {
9  const [token, setToken] = useState<string>("");
10
11  return (
12    <form action="/api/submit" method="POST">
13      <input type="text" name="data" />
14
15      <Turnstile
16        siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY!}
17        onSuccess={(token) => setToken(token)}
18      />
19
20      <input type="hidden" name="turnstileToken" value={token} />
21
22      <button type="submit" disabled={!token}>
23        Submit
24      </button>
25    </form>
26  );
27}
28
29// Server-side verification
30// src/app/api/submit/route.ts
31
32async function verifyTurnstile(token: string): Promise<boolean> {
33  const response = await fetch(
34    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
35    {
36      method: "POST",
37      headers: { "Content-Type": "application/json" },
38      body: JSON.stringify({
39        secret: process.env.TURNSTILE_SECRET_KEY,
40        response: token,
41      }),
42    }
43  );
44
45  const data = await response.json();
46  return data.success;
47}
48
49export async function POST(request: NextRequest) {
50  const body = await request.json();
51
52  const isValid = await verifyTurnstile(body.turnstileToken);
53
54  if (!isValid) {
55    return NextResponse.json(
56      { error: "CAPTCHA verification failed" },
57      { status: 400 }
58    );
59  }
60
61  // Process submission
62}