# 폼 제출에 레이트 리밋을 거는 방법 > 공유 저장소로 방문자별 폼 제출에 레이트 리밋을 걸고, Retry-After와 함께 429로 응답하며, 하나의 IP를 쓰는 사무실이 막히지 않게 하세요. 2026-10-25 게시 · https://ikiform.com/ko/guides/spam-protection/rate-limiting Redis처럼 모든 서버 인스턴스가 공유하는 저장소에서 방문자 IP별 POST 수를 세고, 짧은 버스트를 허용하며, 횟수가 다 떨어지면 `Retry-After` 헤더와 함께 `429`로 응답하세요. 메모리 내 카운터는 오래 실행되는 서버 하나에서만 작동하며, 서버리스 호스트에서는 절대 작동하지 않습니다. 제한은 실제 사람들이 폼을 쓰는 방식에 맞춰 정하고, 많은 사람이 하나의 IP를 공유하는 사무실과 행사장을 위한 여유를 두세요. ## 레이트 리밋이 다른 점 레이트 리밋은 스팸과 정상 메일을 구분하지 못합니다. 막는 것은 양입니다. 반복해서 POST하는 스크립트, 폼을 계속 돌리는 봇, 버튼을 연타하는 사람입니다. 그래서 본문을 읽기 전에 실행되므로 가장 저렴한 계층이면서, 공격자와 바쁜 사무실을 구분하지 못하므로 가장 무딘 계층입니다. 도움이 될지 해가 될지는 세 가지로 결정됩니다. 횟수를 어디에 저장하는지, 무엇을 기준으로 세는지, 허용량이 얼마나 빨리 회복되는지입니다. 다이어그램: 매끄러운 방문자별 제한에 한 방문자의 POST가 몰릴 때 1. 방문자가 10초 안에 POST 3건을 보냅니다. 모두 수락됩니다. 2. 다음 POST는 얼마나 기다려야 하는지 알려 주는 Retry-After 헤더와 함께 429로 거부됩니다. 3. 그 후에는 12초마다 POST가 하나씩 더 허용됩니다. 4. 1분 동안 조용하면 허용량이 모두 돌아옵니다. Ikiform의 Standard 수치입니다. 분당 5건, 10초에 최대 3건입니다. 매끄럽게 회복되므로 POST 하나를 더 보내려고 구간 전체를 기다릴 필요가 없습니다. ## 횟수를 저장하는 곳 | 저장소 | 작동 환경 | 주의할 점 | | --- | --- | --- | | 메모리 내 `Map` | 오래 실행되는 서버 하나 | 재시작하면 사라짐. 서버리스 인스턴스마다 맵이 따로 있어 실제 제한을 알 수 없음 | | Upstash 같은 Redis | 서버리스와 엣지를 포함해 어디서든 | POST마다 네트워크 호출 한 번. 서버와 가까운 리전을 고를 것 | | Cloudflare Workers 레이트 리밋 바인딩 | Workers | 근사치이며 Cloudflare 위치별로 집계. 기간은 10초 또는 60초만 가능 | | nginx `limit_req` 같은 리버스 프록시 | 직접 운영하는 프록시 뒤의 서버 | 프록시별로 집계. 실제 클라이언트 IP가 필요 | 알고리즘은 저장소보다 덜 중요하지만, 방문자가 느끼는 경험을 좌우합니다. 고정 구간은 매 분마다 초기화되므로, 스크립트가 한 분의 끝에 허용량 전부를 보내고 다음 분의 시작에 또 보낼 수 있습니다. 슬라이딩 구간은 이전 구간에 가중치를 주어 그 경계를 부드럽게 만듭니다. 토큰 버킷이나 Ikiform이 쓰는 비슷한 알고리즘은 POST를 하나씩 회복하므로, 오타를 낸 사람은 몇 초 뒤에 다시 보낼 수 있고 버스트의 문은 열리지 않습니다. 문의 폼이라면 수치가 사람들의 사용 방식에 맞기만 하면 어떤 것이든 괜찮습니다. 아래 예제는 Upstash의 `@upstash/ratelimit`을 사용합니다. 모든 프레임워크와 서버리스 호스트에서 똑같이 작동하기 때문입니다. `UPSTASH_REDIS_REST_URL`과 `UPSTASH_REDIS_REST_TOKEN`을 설정하고, 헬퍼를 한 번 저장하세요. `lib/limit.ts`: ```ts import { Ratelimit } from "@upstash/ratelimit"; import { Redis } from "@upstash/redis"; const contact = new Ratelimit({ redis: Redis.fromEnv(), limiter: Ratelimit.slidingWindow(5, "60 s"), prefix: "contact", }); export async function allow(ip: string | null | undefined) { const { success, reset } = await contact.limit(ip || "no-ip"); return { ok: success, retryAfter: Math.max(1, Math.ceil((reset - Date.now()) / 1000)) }; } ``` `reset`은 밀리초 단위의 Unix 시각이므로, 헬퍼가 `Retry-After`용으로 정수 초로 바꿉니다. IP가 없는 POST는 하나의 버킷을 공유하므로, 헤더가 없다고 해서 무사통과가 되지 않습니다. ## 프레임워크에 적용하기 **HTML** 일반 HTML 폼에는 무언가를 셀 서버가 없습니다. Ikiform으로 POST하고 폼에서 프리셋을 고르세요. 제한을 넘은 방문자에게는 오류 대신 짧은 속도 줄이기 안내 페이지가 표시됩니다. `contact.html`: ```html
``` **Next.js** 다른 작업을 하기 전에 서버 액션 맨 위에서 제한을 확인하세요. `app/contact/actions.ts`: ```ts "use server"; import { headers } from "next/headers"; import { allow } from "@/lib/limit"; export async function sendMessage(_previous: { message: string }, formData: FormData) { const forwarded = (await headers()).get("x-forwarded-for"); const limit = await allow(forwarded?.split(",")[0]?.trim()); if (!limit.ok) return { message: `Too many messages. Try again in ${limit.retryAfter} seconds.` }; await saveMessage(Object.fromEntries(formData)); return { message: "Thanks. We'll reply by email." }; } ``` **Astro** 온디맨드 페이지에서는 `context.clientAddress`로 방문자의 IP를 얻습니다. `TOO_MANY_REQUESTS`는 `429`에 대응합니다. `src/actions/index.ts`: ```ts import { ActionError, defineAction } from "astro:actions"; import { z } from "astro/zod"; import { allow } from "../lib/limit"; export const server = { sendMessage: defineAction({ accept: "form", input: z.object({ email: z.email(), message: z.string().min(1) }), handler: async (input, context) => { const limit = await allow(context.clientAddress); if (!limit.ok) { throw new ActionError({ code: "TOO_MANY_REQUESTS", message: `Too many messages. Try again in ${limit.retryAfter} seconds.` }); } await saveMessage(input); return { sent: true }; }, }), }; ``` **TanStack Start** `fetch` 호출자가 읽을 수 있도록 서버 함수에서 상태와 `Retry-After`를 설정하세요. `src/server/send-message.ts`: ```ts import { createServerFn } from "@tanstack/react-start"; import { getRequestHeader, setResponseHeaders, setResponseStatus } from "@tanstack/react-start/server"; import { allow } from "../lib/limit"; 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") ?? "") }; }) .handler(async ({ data }) => { const limit = await allow(getRequestHeader("x-forwarded-for")?.split(",")[0]?.trim()); if (!limit.ok) { setResponseStatus(429); setResponseHeaders(new Headers({ "Retry-After": String(limit.retryAfter) })); return { ok: false, message: `Too many messages. Try again in ${limit.retryAfter} seconds.` }; } await saveMessage(data); return { ok: true, message: "Thanks. We'll reply by email." }; }); ``` **React Router** `data()`를 쓰면 액션이 폼에 표시할 메시지와 함께 헤더가 붙은 `429`를 반환할 수 있습니다. `app/routes/contact.tsx`: ```ts import { data } from "react-router"; import { allow } from "../lib/limit"; import type { Route } from "./+types/contact"; export async function action({ request }: Route.ActionArgs) { const limit = await allow(request.headers.get("x-forwarded-for")?.split(",")[0]?.trim()); if (!limit.ok) { return data( { message: `Too many messages. Try again in ${limit.retryAfter} seconds.` }, { status: 429, headers: { "Retry-After": String(limit.retryAfter) } }, ); } await saveMessage(Object.fromEntries(await request.formData())); return { message: "Thanks. We'll reply by email." }; } ``` **SvelteKit** `getClientAddress()`는 어댑터에서 IP를 읽습니다. `fail(429)`는 메시지와 함께 폼을 페이지에 그대로 둡니다. 헬퍼는 `src/lib/limit.ts`로 저장하세요. SvelteKit 3은 `package.json`의 `#lib` 별칭으로 가져옵니다. `src/routes/contact/+page.server.ts`: ```ts import { fail } from "@sveltejs/kit"; import { allow } from "#lib/limit.js"; import type { Actions } from "./$types"; export const actions = { default: async ({ request, getClientAddress }) => { const limit = await allow(getClientAddress()); if (!limit.ok) return fail(429, { message: `Too many messages. Try again in ${limit.retryAfter} seconds.` }); await saveMessage(Object.fromEntries(await request.formData())); return { sent: true }; }, } satisfies Actions; ``` **Nuxt** `xForwardedFor`를 지정한 `getRequestIP`는 프록시 뒤에서 클라이언트 IP를 읽습니다. 헬퍼를 `server/utils`에 저장하면 자동으로 가져옵니다. `server/api/contact.post.ts`: ```ts export default defineEventHandler(async (event) => { const limit = await allow(getRequestIP(event, { xForwardedFor: true })); if (!limit.ok) { setResponseHeader(event, "Retry-After", limit.retryAfter); throw createError({ status: 429, message: `Too many messages. Try again in ${limit.retryAfter} seconds.` }); } await saveMessage(await readBody(event)); return { sent: true }; }); ``` **React** 싱글 페이지 앱은 제한을 강제할 수 없지만, 제한을 존중해야 합니다. 사람들이 버튼을 다시 누르게 두지 말고 `Retry-After`를 읽어 카운트다운하세요. `429 quota_exceeded`에는 `Retry-After`가 없으므로 오류 메시지로 넘어갑니다. `contact.js`: ```js const button = form.querySelector("button"); const status = form.querySelector("[role=status]"); form.addEventListener("submit", async (event) => { event.preventDefault(); const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form), }); const retryAfter = response.headers.get("Retry-After"); if (response.status === 429 && retryAfter) { let wait = Number(retryAfter); button.disabled = true; const timer = setInterval(() => { status.textContent = `Too many messages. Try again in ${wait} seconds.`; wait -= 1; if (wait < 0) { clearInterval(timer); button.disabled = false; status.textContent = ""; } }, 1000); return; } const result = await response.json(); status.textContent = result.ok ? "Thanks. We'll reply by email." : result.error.message; }); ``` **Vue** 같은 처리를 Vue 컴포넌트로 구현한 것입니다. `Retry-After`를 읽고, 버튼을 비활성화하고, ref로 카운트다운하세요. `src/components/ContactForm.vue`: ```vue