セキュリティ
Captchaはあなたが人間であることを証明する。HATCHAはあなたが人間ではないことを証明する。
Captcha proves you're human. HATCHA proves you're not (github.com)
要約
HATCHAは、人間にとっては困難だがAIエージェントにとっては簡単な課題（大きな数の乗算、文字列の反転、バイナリデコードなど）を通過させることで、アクセスを制限するリバースCAPTCHAです。 サーバーサイドでの検証を行い、回答はクライアントに到達せず、HMAC署名付きトークンを使用するためステートレスでデータベース不要です。 Next.js App RouterおよびExpressミドルウェア用のフレームワークアダプターが付属し、テーマ設定やカスタムチャレンジの登録も可能です。
全文翻訳
HATCHA CAPTCHAはあなたが人間であることを証明します。HATCHAはあなたが人間ではないことを証明します。HATCHA（Hyperfast Agent Test for Computational Heuristic Assessment）は、AIエージェントにとっては些細なことだが、人間にとっては困難な課題（大きな数の乗算、文字列の反転、バイナリデコードなど）の背後でアクセスを制限するリバースCAPTCHAです。
サーバーサイドでの検証 — 回答は決してクライアントに到達しません。HMAC署名付きトークン、ステートレス、データベース不要。5種類の組み込みチャレンジタイプ — 数学、文字列反転、文字数カウント、ソート、バイナリデコード。拡張可能 — 実行時にカスタムチャレンジジェネレーターを登録できます。テーマ設定可能 — CSSカスタムプロパティを介してダーク、ライト、または自動モード。フレームワークアダプター — Next.js App RouterおよびExpressミドルウェアをすぐに利用できます。
クイックスタート (Next.js)
1. インストール
npm install @mondaycom/hatcha-react @mondaycom/hatcha-server
2. APIルートを追加
// app/api/hatcha/[...hatcha]/route.ts
import { createHatchaHandler } from "@mondaycom/hatcha-server/nextjs";
const handler = createHatchaHandler({
secret: process.env.HATCHA_SECRET!,
});
export const GET = handler;
export const POST = handler;
3. レイアウトをラップ
// app/layout.tsx
import { HatchaProvider } from "@mondaycom/hatcha-react";
import "@mondaycom/hatcha-react/styles.css";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<HatchaProvider>{children}</HatchaProvider>
</body>
</html>
);
}
4. 検証をトリガー
"use client";
import { useHatcha } from "@mondaycom/hatcha-react";
function AgentModeButton() {
const { requestVerification } = useHatcha();
return (
<button
onClick={() =>
requestVerification((token) => {
console.log("Agent verified!", token);
})
}
>
Enter Agent Mode
</button>
);
}
5. シークレットを設定
# .env.local
HATCHA_SECRET=your-random-secret-here
仕組み
Client Server
│ │
│ GET /api/hatcha/challenge │
│────────────────────────────────►│
│ │ Generate challenge
│ │ Hash answer
│ │ HMAC-sign { hash, expiry }
{ challenge (no answer), token } │◄────────────────────────────────│
│ │
│ Agent solves the challenge │
│ │
│ POST /api/hatcha/verify │
│ { answer, token } │
│────────────────────────────────►│
│ │ Verify HMAC signature
│ │ Check expiry
│ │ Compare answer hash
{ success, verificationToken } │ │◄────────────────────────────────│
回答はクライアントに到達しません。署名されたトークンは不透明であり、ハッシュ化された回答と有効期限のみを含みます。検証はステートレス — データベースは不要です。
チャレンジの種類
タイプ アイコン 実行内容 時間制限
math × 5桁 × 5桁の乗算 30秒
string ↔ 60～80文字のランダムな文字列を反転 30秒
count # 約250文字の中から特定の文字を数える 30秒
sort ⇅ 15個の数字をソートし、k番目に小さい数を返す 30秒
binary 01 バイナリオクテットをASCIIにデコード 30秒
カスタムチャレンジ
import { registerChallenge } from "@mondaycom/hatcha-server";
registerChallenge({
type: "hex",
generate() {
const n = Math.floor(Math.random() * 0xffffff);
return {
display: {
type: "hex",
icon: "0x",
title: "Hex Decode",
description: "Convert this hex number to decimal.",
prompt: `0x${n.toString(16).toUpperCase()}`,
timeLimit: 30,
answer: String(n),
},
answer: String(n),
};
},
});
テーマ設定
HATCHAは、--hatcha-* のスコープを持つCSSカスタムプロパティを使用します。任意の親要素でこれらをオーバーライドできます。
[data-hatcha-theme] {
--hatcha-accent: #3b82f6;
--hatcha-accent-light: #60a5fa;
--hatcha-bg: #060b18;
--hatcha-fg: #e4eaf6;
--hatcha-success: #22c55e;
--hatcha-danger: #ef4444;
}
<HatchaProvider>または<Hatcha>に theme="dark"、theme="light"、または theme="auto" を渡します。
Express
import express from "express";
import { hatchaRouter } from "@mondaycom/hatcha-server/express";
const app = express();
app.use(express.json());
app.use("/api/hatcha", hatchaRouter({ secret: process.env.HATCHA_SECRET! }));
app.listen(3000);
パッケージ
パッケージ 説明
@mondaycom/hatcha-core チャレンジ生成と暗号化検証
@mondaycom/hatcha-react Reactコンポーネント、プロバイダー、スタイル
@mondaycom/hatcha-server Next.jsおよびExpressサーバーハンドラー
開発
git clone https://github.com/mondaycom/HATCHA.git
cd HATCHA
pnpm install
pnpm build
cd examples/nextjs-app
pnpm dev
コントリビューション
コントリビューションを歓迎します！セットアップ手順とガイドラインについてはCONTRIBUTING.mdを参照してください。
ライセンス
MIT