# 봇은 채우고 사람은 채우지 않는 허니팟 필드를 추가하는 방법
> 스크린 리더, 키보드, 자동 완성에 걸리지 않으면서 봇을 잡는 허니팟을 어떤 폼에든 추가하고, 스택별 서버 검사까지 구현하세요.
2026-10-25 게시 · https://ikiform.com/ko/guides/spam-protection/honeypot
텍스트 입력을 하나 더 추가해 화면 밖에 숨기고, 탭 순서에서 빼고, `aria-hidden`으로 감싼 뒤 어떤 브라우저도 자동 완성하지 않는 이름을 붙이세요. 사람은 절대 채우지 않지만, 모든 입력을 채우는 봇은 채웁니다. 서버에서는 이 필드에 값이 있는 POST를 스팸으로 처리하고, 실제 메시지와 똑같이 응답하세요.
## 허니팟이 다른 점
허니팟은 두 가지 조건을 동시에 만족해야 합니다. HTML을 읽는 봇에게는 채울 만한 평범한 필드로 보여야 합니다. 모든 사람에게는 존재하지 않아야 하며, 여러분과 다른 방식으로 폼을 쓰는 사람도 포함됩니다. 스크린 리더를 쓰는 사람, 키보드로 탭 이동하는 사람, 비밀번호 관리자가 폼을 대신 채워 주는 사람입니다. 허니팟 버그는 대부분 이 중 누군가를 잊어서 생기며, 증상은 실제 메시지가 조용히 스팸으로 분류되는 것입니다.
다이어그램: 사람과 봇이 같은 허니팟 필드를 만나는 방식
1. 사람은 화면, 키보드, 스크린 리더 등 자신이 쓰는 도구로 폼을 채웁니다.
2. 함정은 화면 밖에 있고, 탭 순서에서 빠져 있으며, 보조 기술에서 숨겨져 있으므로 사람은 절대 닿지 않습니다.
3. 이름이 브라우저와 비밀번호 관리자가 자동 완성하지 않는 것이라 비어 있는 채로 남습니다.
4. 함정이 빈 채로 POST가 도착하고 받음 처리됩니다.
5. 스크립트 봇은 HTML을 파싱해 함정을 포함한 모든 입력을 찾습니다.
6. 모두 채워서 바로 POST합니다.
7. 함정에 값이 있으므로 POST는 스팸입니다. 봇은 그래도 평범한 성공 응답을 받습니다.
윗줄의 각 안전장치는 실제 사람이 필드에 닿을 수 있는 경로를 하나씩 막습니다. 하나라도 빠지면 윗줄도 스팸으로 끝날 수 있습니다.
## 마크업
함정은 폼 안에 실제 필드와 나란히 일반 텍스트 입력으로 두세요. `type="hidden"` 입력은 효과가 없습니다. 봇은 사람이 그런 입력을 편집할 수 없다는 것을 알고 건드리지 않습니다.
`contact.html`:
```html
```
`스타일`:
```html
```
- 래퍼의 `aria-hidden="true"`는 레이블과 입력을 접근성 트리에서 제거하므로 스크린 리더가 읽지 않습니다.
- `tabindex="-1"`은 Tab 키가 아무도 볼 수 없는 입력에 멈추지 않게 합니다.
- 레이블에는 **Leave this empty**라고 적습니다. 어떤 도구가 여전히 필드를 노출하더라도 읽는 사람은 어떻게 해야 하는지 알 수 있습니다.
- `required`는 추가하지 마세요. 사람이 볼 수 없는 필수 필드는 모든 정상 제출을 막습니다.
## 숨기는 방법
봇은 대놓고 숨긴 필드를 건너뛰는 법을 배웠습니다. 단순한 스크레이퍼는 여전히 모두 채우지만, 일부는 입력하기 전에 `hidden` 속성이나 인라인 `display: none`을 확인합니다. 숨기는 장치가 입력 자체에서 멀수록 더 많은 봇이 속습니다.
| 기법 | 사람에게 숨겨짐 | 여전히 잡히는 봇 |
| --- | --- | --- |
| `hidden` 속성 또는 인라인 `display: none` | 예 | 가장 단순한 봇만. 똑똑한 봇이 가장 먼저 확인하는 부분 |
| 스타일시트의 화면 밖 클래스 | 예 | 대부분. 봇이 CSS를 불러와 적용해야만 알아챔 |
| `opacity: 0` 또는 크기 0 | 대체로. 일부 돋보기 도구와 포커스 윤곽선에는 여전히 드러남 | 대부분. 하지만 사람에게는 더 위험 |
| 로드 후 JavaScript로 추가 | 예 | 스크립트를 실행하는 봇. 일반 HTML 스크레이퍼는 보지 못하므로 놓침 |
스타일시트의 화면 밖 클래스를 쓰세요. 가장 많은 봇을 잡고 사람에게도 가장 안전합니다. 허니팟 하나가 효과를 잃으면 더 교묘한 숨김 기법 대신 이름이 다른 허니팟을 하나 더 추가하세요.
## 자동 완성이 무시하는 이름 고르기
브라우저와 비밀번호 관리자는 필드의 `name`, `id`, 레이블, `autocomplete` 값을 보고 추측해서 채웁니다. `autocomplete="off"`는 힌트일 뿐이며, 일부 브라우저는 주소나 연락처처럼 보이는 필드에서 이를 무시합니다. 그래서 실제로 일을 하는 것은 이름입니다.
| 피할 것 | 이유 | 대신 쓸 것 |
| --- | --- | --- |
| `email2`, `phone`, `name`, `address` | 자동 완성이 알아보고 실제 사람의 정보로 채움 | `_gotcha`, `company_website` |
| `honeypot`, `trap`, `bot` | 일부 봇은 이름이 뻔한 필드를 건너뜀 | 평범하고 그럴듯한 이름 |
| `url`, `website` 단독 | 일부 자동 완성 도구는 저장된 프로필로 웹사이트 필드를 채움 | `company_website` 같은 복합 이름 |
## 서버에서 확인하기
허니팟은 서버가 읽어야만 작동합니다. 봇은 여러분의 스크립트를 실행하지 않으므로 브라우저 측 검사는 쓸모가 없습니다. 필드에 값이 있으면 실제 메시지와 똑같이 응답하되, POST를 저장하거나 전달하지 마세요. 응답이 다르면 어떤 필드 때문에 들켰는지 봇에게 알려 주게 됩니다. 아래 예제는 여러분의 `saveMessage`를 호출합니다. 메시지를 저장하거나 이메일로 보내는 코드로 바꾸세요.
**HTML**
일반 HTML 폼에는 자체 서버가 없습니다. 폼을 Ikiform으로 연결하고 함정 이름을 `_gotcha`로 짓거나, **Honeypot field**에서 폼마다 이름을 바꾸세요. Ikiform이 서버 검사를 하며, 함정은 응답으로 저장되지 않습니다.
`contact.html`:
```html
```
**Next.js**
서버 액션에서는 함정에 걸린 POST도 실제 POST와 같은 감사 페이지로 리디렉션하고 저장은 건너뛰세요.
`app/contact/actions.ts`:
```ts
"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");
}
```
**Astro**
Astro Action에서는 입력에서 함정을 꺼내고, 값이 있으면 평소와 같은 결과를 반환하세요.
`src/actions/index.ts`:
```ts
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 };
},
}),
};
```
**TanStack Start**
`.validator()`에서 함정을 읽고 핸들러에서 저장을 건너뛰세요. 두 경로 모두 같은 응답을 반환합니다.
`src/server/send-message.ts`:
```ts
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 };
});
```
**React Router**
라우트 액션은 어느 경우든 감사 페이지로 리디렉션하고, 함정에 걸리지 않은 POST만 저장합니다.
`app/routes/contact.tsx`:
```ts
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");
}
```
**SvelteKit**
폼 액션은 함정이 비어 있을 때만 저장한 뒤, 두 경우 모두 `303`으로 리디렉션합니다.
`src/routes/contact/+page.server.ts`:
```ts
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;
```
**Nuxt**
서버 라우트는 함정에 걸린 POST와 실제 POST 모두에 같은 본문과 함께 `201`로 응답합니다.
`server/api/contact.post.ts`:
```ts
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 };
});
```
**React**
싱글 페이지 앱은 함정을 직접 확인할 수 없습니다. 다른 필드와 함께 보내고, POST를 받는 서버가 판단하게 하세요. `FormData`는 추가 코드 없이 함정을 포함합니다.
`submit.ts`:
```ts
const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(form),
});
```
**Vue**
Vue에서도 마찬가지입니다. `new FormData(form)`이 함정을 포함하도록 `