mondaycom/hatchaCAPTCHA는 당신이 인간임을 증명합니다. HATCHA는 당신이 인간이 아님을 증명합니다.
CAPTCHA는 당신이 사람임을 증명합니다. HATCHA는 당신이 아님을 증명합니다.
HATCHA (Hyperfast Agent Test for Computational Heuristic Assessment)는 AI 에이전트에게는 쉬우나 인간에게는 고통스러운 과제(큰 수 곱셈, 문자열 뒤집기, 이진 디코딩 등)를 통과해야 접근할 수 있는 역 CAPTCHA입니다.
npm install @mondaycom/hatcha-react @mondaycom/hatcha-server
// 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;
// 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>
);
}
"use client";
import { useHatcha } from "@mondaycom/hatcha-react";
function AgentModeButton() {
const { requestVerification } = useHatcha();
return (
<button
onClick={() =>
requestVerification((token) => {
console.log("Agent verified!", token);
})
}
>
에이전트 모드 진입
</button>
);
}
# .env.local
HATCHA_SECRET=your-random-secret-here
Client Server
│ │
│ GET /api/hatcha/challenge │
│────────────────────────────────►│
│ │ 챌린지 생성
│ │ 답변 해시
│ │ HMAC 서명 { hash, expiry }
│ { challenge (no answer), token }
│◄────────────────────────────────│
│ │
│ 에이전트가 챌린지 해결 │
│ │
│ POST /api/hatcha/verify │
│ { answer, token } │
│────────────────────────────────►│
│ │ HMAC 서명 확인
│ │ 만료 확인
│ │ 답변 해시 비교
│ { success, verificationToken } │
│◄────────────────────────────────│
답변은 절대 클라이언트에 도달하지 않습니다. 서명된 토큰은 불투명하며 해시된 답변 + 만료 시간만 포함합니다. 검증은 상태 비저장이며 데이터베이스가 필요하지 않습니다.
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: "이 16진수를 10진수로 변환하세요.",
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"를 전달하세요.
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 | 챌린지 생성 및 암호화 검증 |
git clone https://github.com/mondaycom/HATCHA.git
cd HATCHA
pnpm install
pnpm build
cd examples/nextjs-app
pnpm dev
기여를 환영합니다! 설정 방법 및 지침은 CONTRIBUTING.md를 참조하세요.
| 유형 | 아이콘 | 설명 | 시간 제한 |
|---|
math | × | 5자리 × 5자리 곱셈 | 30초 |
string | ↔ | 60~80자 임의 문자열 뒤집기 | 30초 |
count | # | 약 250자에서 특정 문자 세기 | 30초 |
sort | ⇅ | 15개의 숫자를 정렬하여 k번째로 작은 값 반환 | 30초 |
binary | 01 | 이진 옥텟을 ASCII로 디코딩 | 30초 |
@mondaycom/hatcha-react | React 컴포넌트, Provider 및 스타일 |
@mondaycom/hatcha-server | Next.js 및 Express 서버 핸들러 |