Next.jsでAICP相当のAdSense狩り対策を作る

graph TD
  A[ユーザーが広告をクリック] --> B[AdClickGuard: blur+mouseenter検知]
  B --> C[POST /api/ad-guard]
  C --> D[Upstash Redis: IPごとにカウント]
  D --> E{制限超過?}
  E -->|No| F[通常表示を継続]
  E -->|Yes| G[広告を非表示にする]
  E -->|Yes| H[Discord通知]

// components/AdClickGuard.tsx
"use client";

import { useCallback, useEffect, useRef, useState } from "react";

const AD_GUARD_ENDPOINT = "/api/ad-guard";

type Props = {
  children: React.ReactNode;
  maxClicks?: number;
};

export function AdClickGuard({ children, maxClicks = 3 }: Props) {
  const containerRef = useRef<HTMLDivElement>(null);
  const isMouseOverAd = useRef(false);
  const [blocked, setBlocked] = useState(false);

  // マウント時に制限状態を確認
  useEffect(() => {
    fetch(AD_GUARD_ENDPOINT)
      .then((res) => res.json())
      .then((data) => {
        if (data.blocked) setBlocked(true);
      })
      .catch(() => {});
  }, []);

  const reportClick = useCallback(async () => {
    try {
      const res = await fetch(AD_GUARD_ENDPOINT, { method: "POST" });
      const data = await res.json();
      if (data.blocked) {
        setBlocked(true);
      }
    } catch {
      // ネットワークエラー時は無視
    }
  }, []);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const handleMouseEnter = () => {
      isMouseOverAd.current = true;
    };
    const handleMouseLeave = () => {
      isMouseOverAd.current = false;
    };

    const handleBlur = () => {
      if (isMouseOverAd.current) {
        reportClick();
        // blur 後にフォーカスを戻す（連続クリック検知のため）
        setTimeout(() => window.focus(), 0);
      }
    };

    container.addEventListener("mouseenter", handleMouseEnter);
    container.addEventListener("mouseleave", handleMouseLeave);
    window.addEventListener("blur", handleBlur);

    return () => {
      container.removeEventListener("mouseenter", handleMouseEnter);
      container.removeEventListener("mouseleave", handleMouseLeave);
      window.removeEventListener("blur", handleBlur);
    };
  }, [reportClick]);

  if (blocked) return null;

  return <div ref={containerRef}>{children}</div>;
}

npm install @upstash/redis

UPSTASH_REDIS_REST_URL=https://your-instance.upstash.io
UPSTASH_REDIS_REST_TOKEN=your-token-here

// app/api/ad-guard/route.ts
import { Redis } from "@upstash/redis";
import { headers } from "next/headers";
import { NextResponse } from "next/server";

import { AD_GUARD_CONFIG } from "@/lib/ad-guard-config";

const redis = Redis.fromEnv();

function getKey(ip: string): string {
  return `${AD_GUARD_CONFIG.redisKeyPrefix}:${ip}`;
}

async function getClientIp(): Promise<string> {
  const h = await headers();
  return (
    h.get("x-forwarded-for")?.split(",")[0]?.trim() ??
    h.get("x-real-ip") ??
    "unknown"
  );
}

// GET: 現在のブロック状態を確認
export async function GET() {
  const ip = await getClientIp();
  const count = (await redis.get<number>(getKey(ip))) ?? 0;

  return NextResponse.json({
    blocked: count >= AD_GUARD_CONFIG.maxClicks,
    count,
  });
}

// POST: クリックを記録
export async function POST() {
  const ip = await getClientIp();
  const key = getKey(ip);

  const count = await redis.incr(key);

  // 初回のみ有効期限を設定（スライディングウィンドウではなく固定ウィンドウ）
  if (count === 1) {
    await redis.expire(key, AD_GUARD_CONFIG.windowSeconds);
  }

  const blocked = count >= AD_GUARD_CONFIG.maxClicks;

  if (blocked) {
    // Discord通知（オプション）
    if (process.env.DISCORD_WEBHOOK_URL) {
      const { notifyDiscord } = await import("@/lib/notify-discord");
      await notifyDiscord(ip, count);
    }
  }

  return NextResponse.json({ blocked, count });
}

// lib/ad-guard-store-local.ts（開発用）
const store = new Map<string, { count: number; expiresAt: number }>();

export function increment(ip: string, windowSeconds: number): number {
  const now = Date.now();
  const existing = store.get(ip);

  if (!existing || existing.expiresAt < now) {
    store.set(ip, { count: 1, expiresAt: now + windowSeconds * 1000 });
    return 1;
  }

  existing.count += 1;
  return existing.count;
}

export function getCount(ip: string): number {
  const existing = store.get(ip);
  if (!existing || existing.expiresAt < Date.now()) return 0;
  return existing.count;
}

// lib/ad-guard-config.ts
export const AD_GUARD_CONFIG = {
  /** 時間ウィンドウ内の最大クリック数 */
  maxClicks: 3,
  /** ウィンドウの長さ（秒） */
  windowSeconds: 60 * 60, // 1時間
  /** Redis キーのプレフィックス */
  redisKeyPrefix: "ad-guard",
} as const;

// components/ProtectedAdSlot.tsx
"use client";

import { AdClickGuard } from "./AdClickGuard";
import { AD_GUARD_CONFIG } from "@/lib/ad-guard-config";

type Props = {
  slotId: string;
  format?: string;
  className?: string;
};

export function ProtectedAdSlot({
  slotId,
  format = "auto",
  className,
}: Props) {
  return (
    <AdClickGuard maxClicks={AD_GUARD_CONFIG.maxClicks}>
      <ins
        className={`adsbygoogle ${className ?? ""}`}
        style={{ display: "block" }}
        data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
        data-ad-slot={slotId}
        data-ad-format={format}
        data-full-width-responsive="true"
      />
    </AdClickGuard>
  );
}

// 使用例
<ProtectedAdSlot slotId="1234567890" />

// lib/notify-discord.ts
export async function notifyDiscord(
  ip: string,
  clickCount: number
): Promise<void> {
  const webhookUrl = process.env.DISCORD_WEBHOOK_URL;
  if (!webhookUrl) return;

  const maskedIp = ip.replace(/\.\d+$/, ".***");

  await fetch(webhookUrl, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      embeds: [
        {
          title: "⚠️ AdSense Click Guard Alert",
          color: 0xff6b35,
          fields: [
            { name: "IP", value: maskedIp, inline: true },
            { name: "Clicks", value: String(clickCount), inline: true },
            {
              name: "Action",
              value: "Ads hidden for this visitor",
              inline: true,
            },
          ],
          timestamp: new Date().toISOString(),
        },
      ],
    }),
  });
}