From 83d65bdd15946c4307a38af9f5c43b4c51e906fb Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Tue, 15 Jul 2025 23:26:04 +0200 Subject: feat: remove waitlist count due to bots --- apps/web/src/components/landing/hero.tsx | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) (limited to 'apps/web/src/components/landing/hero.tsx') diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index 01ad7e7e..462e3ba7 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/apps/web/src/components/landing/hero.tsx @@ -10,11 +10,7 @@ import { toast } from "sonner"; import Image from "next/image"; import { Handlebars } from "./handlebars"; -interface HeroProps { - signupCount: number; -} - -export function Hero({ signupCount }: HeroProps) { +export function Hero() { const [email, setEmail] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); @@ -131,18 +127,6 @@ export function Hero({ signupCount }: HeroProps) { - - {signupCount > 0 && ( - -
- {signupCount.toLocaleString()} people already joined - - )}
); -- cgit v1.3.1 From 5178732c4c1205698d1846dd82896d9342558ac6 Mon Sep 17 00:00:00 2001 From: Ahmet Kilinc Date: Wed, 16 Jul 2025 00:44:42 +0100 Subject: csrf token and browser detection --- apps/web/src/app/api/waitlist/route.ts | 173 +++++++++++++++++++++++---- apps/web/src/app/api/waitlist/token/route.ts | 47 ++++++++ apps/web/src/components/landing/hero.tsx | 71 ++++++----- apps/web/src/lib/rate-limit.ts | 1 + 4 files changed, 235 insertions(+), 57 deletions(-) create mode 100644 apps/web/src/app/api/waitlist/token/route.ts (limited to 'apps/web/src/components/landing/hero.tsx') diff --git a/apps/web/src/app/api/waitlist/route.ts b/apps/web/src/app/api/waitlist/route.ts index f6f81103..4d64be77 100644 --- a/apps/web/src/app/api/waitlist/route.ts +++ b/apps/web/src/app/api/waitlist/route.ts @@ -4,51 +4,179 @@ import { waitlist } from "@opencut/db/schema"; import { nanoid } from "nanoid"; import { waitlistRateLimit } from "@/lib/rate-limit"; import { z } from "zod"; +import { env } from "@/env"; +import { cookies } from "next/headers"; +import crypto from "crypto"; const waitlistSchema = z.object({ email: z.string().email("Invalid email format").min(1, "Email is required"), }); +const CSRF_TOKEN_NAME = "waitlist-csrf"; +const TOKEN_EXPIRY = 60 * 60 * 1000; + +function validateBrowserRequest(request: NextRequest): boolean { + const origin = request.headers.get("origin"); + const referer = request.headers.get("referer"); + const userAgent = request.headers.get("user-agent") || ""; + const secFetchSite = request.headers.get("sec-fetch-site"); + const secFetchMode = request.headers.get("sec-fetch-mode"); + const secFetchDest = request.headers.get("sec-fetch-dest"); + const contentType = request.headers.get("content-type"); + const accept = request.headers.get("accept"); + + if (env.NODE_ENV === "development") { + console.log("=== Validating Browser Request ==="); + console.log("Origin:", origin); + console.log("Referer:", referer); + console.log("User-Agent:", userAgent); + console.log("Sec-Fetch-Site:", secFetchSite); + console.log("Sec-Fetch-Mode:", secFetchMode); + console.log("Sec-Fetch-Dest:", secFetchDest); + console.log("Content-Type:", contentType); + console.log("Accept:", accept); + } + + const allowedOrigins = + env.NODE_ENV === "development" ? ["http://localhost:3000", "http://127.0.0.1:3000"] : ["https://opencut.app", "https://www.opencut.app"]; + + if (!origin || !allowedOrigins.includes(origin)) { + console.log("Failed: Invalid origin"); + return false; + } + + if (!referer || !referer.startsWith(origin)) { + console.log("Failed: Invalid referer"); + return false; + } + + const suspiciousUserAgents = [ + "curl", + "wget", + "postman", + "insomnia", + "thunder client", + "httpie", + "python-requests", + "node-fetch", + "axios", + "scrapy", + "httpclient", + "okhttp", + "libwww-perl", + "python-urllib", + "go-http-client", + "java/", + "apache-httpclient", + ]; + + const lowerUserAgent = userAgent.toLowerCase(); + if (!userAgent || suspiciousUserAgents.some((agent) => lowerUserAgent.includes(agent))) { + console.log("Failed: Suspicious user agent"); + return false; + } + + const hasBrowserIndicators = + lowerUserAgent.includes("mozilla/") || + lowerUserAgent.includes("chrome/") || + lowerUserAgent.includes("safari/") || + lowerUserAgent.includes("firefox/") || + lowerUserAgent.includes("edge/"); + + if (!hasBrowserIndicators) { + console.log("Failed: No browser indicators in user agent"); + return false; + } + + if (secFetchSite && secFetchSite !== "same-origin") { + console.log("Failed: Invalid Sec-Fetch-Site:", secFetchSite); + return false; + } + + if (secFetchMode && secFetchMode !== "cors") { + console.log("Failed: Invalid Sec-Fetch-Mode:", secFetchMode); + return false; + } + + if (secFetchDest && secFetchDest !== "empty") { + console.log("Failed: Invalid Sec-Fetch-Dest:", secFetchDest); + return false; + } + + if (!contentType || !contentType.includes("application/json")) { + console.log("Failed: Invalid Content-Type"); + return false; + } + + if (!accept || (!accept.includes("application/json") && !accept.includes("*/*"))) { + console.log("Failed: Invalid Accept header"); + return false; + } + + console.log("Browser validation passed!"); + return true; +} + +async function validateCSRFToken(request: NextRequest): Promise { + const clientToken = request.headers.get("x-csrf-token"); + if (!clientToken) return false; + + const cookieStore = await cookies(); + const cookieValue = cookieStore.get(CSRF_TOKEN_NAME)?.value; + if (!cookieValue) return false; + + const [token, timestamp, signature] = cookieValue.split(":"); + if (!token || !timestamp || !signature) return false; + + if (clientToken !== token) return false; + + const now = Date.now(); + const tokenTime = parseInt(timestamp); + if (now - tokenTime > TOKEN_EXPIRY) return false; + + const expectedSignature = crypto + .createHmac("sha256", env.BETTER_AUTH_SECRET || "fallback-secret") + .update(`${token}:${timestamp}`) + .digest("hex"); + + return signature === expectedSignature; +} + export async function POST(request: NextRequest) { - // Rate limit check const identifier = request.headers.get("x-forwarded-for") ?? "127.0.0.1"; const { success } = await waitlistRateLimit.limit(identifier); if (!success) { - return NextResponse.json( - { error: "Too many requests. Please try again later." }, - { status: 429 } - ); + return NextResponse.json({ error: "Too many requests. Please try again later." }, { status: 429 }); + } + + if (!validateBrowserRequest(request)) { + await new Promise((resolve) => setTimeout(resolve, Math.random() * 2000 + 1000)); + + return NextResponse.json({ error: "Invalid request" }, { status: 403 }); + } + + const isValidToken = await validateCSRFToken(request); + if (!isValidToken) { + return NextResponse.json({ error: "Invalid security token" }, { status: 403 }); } try { const body = await request.json(); const { email } = waitlistSchema.parse(body); - // Check if email already exists - const existingEmail = await db - .select() - .from(waitlist) - .where(eq(waitlist.email, email.toLowerCase())) - .limit(1); + const existingEmail = await db.select().from(waitlist).where(eq(waitlist.email, email.toLowerCase())).limit(1); if (existingEmail.length > 0) { - return NextResponse.json( - { error: "Email already registered" }, - { status: 409 } - ); + return NextResponse.json({ error: "Email already registered" }, { status: 409 }); } - // Add to waitlist await db.insert(waitlist).values({ id: nanoid(), email: email.toLowerCase(), }); - return NextResponse.json( - { message: "Successfully joined waitlist!" }, - { status: 201 } - ); + return NextResponse.json({ message: "Successfully joined waitlist!" }, { status: 201 }); } catch (error) { if (error instanceof z.ZodError) { const firstError = error.errors[0]; @@ -56,9 +184,6 @@ export async function POST(request: NextRequest) { } console.error("Waitlist signup error:", error); - return NextResponse.json( - { error: "Internal server error" }, - { status: 500 } - ); + return NextResponse.json({ error: "Internal server error" }, { status: 500 }); } } diff --git a/apps/web/src/app/api/waitlist/token/route.ts b/apps/web/src/app/api/waitlist/token/route.ts new file mode 100644 index 00000000..76622fc5 --- /dev/null +++ b/apps/web/src/app/api/waitlist/token/route.ts @@ -0,0 +1,47 @@ +import { NextRequest, NextResponse } from "next/server"; +import { cookies } from "next/headers"; +import crypto from "crypto"; +import { env } from "@/env"; + +const CSRF_TOKEN_NAME = "waitlist-csrf"; +const TOKEN_EXPIRY = 60 * 60 * 1000; + +export async function GET(request: NextRequest) { + const referer = request.headers.get("referer"); + const host = request.headers.get("host"); + + if (referer) { + const refererUrl = new URL(referer); + const allowedHosts = env.NODE_ENV === "development" ? ["localhost:3000", "127.0.0.1:3000"] : ["opencut.app", "www.opencut.app"]; + + if (!allowedHosts.some((allowed) => refererUrl.host === allowed || refererUrl.host.endsWith(allowed))) { + return NextResponse.json({ error: "Forbidden" }, { status: 403 }); + } + } else if (host) { + const allowedHosts = env.NODE_ENV === "development" ? ["localhost:3000", "127.0.0.1:3000"] : ["opencut.app", "www.opencut.app"]; + + if (!allowedHosts.some((allowed) => host === allowed || host.endsWith(allowed))) { + return NextResponse.json({ error: "Forbidden" }, { status: 403 }); + } + } else { + return NextResponse.json({ error: "Forbidden" }, { status: 403 }); + } + + const token = crypto.randomBytes(32).toString("hex"); + const timestamp = Date.now(); + const signature = crypto + .createHmac("sha256", env.BETTER_AUTH_SECRET || "fallback-secret") + .update(`${token}:${timestamp}`) + .digest("hex"); + + const cookieStore = await cookies(); + cookieStore.set(CSRF_TOKEN_NAME, `${token}:${timestamp}:${signature}`, { + httpOnly: true, + secure: env.NODE_ENV === "production", + sameSite: "strict", + maxAge: TOKEN_EXPIRY / 1000, + path: "/", + }); + + return NextResponse.json({ token }); +} diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index 462e3ba7..54aba300 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/apps/web/src/components/landing/hero.tsx @@ -4,7 +4,7 @@ import { motion } from "motion/react"; import { Button } from "../ui/button"; import { Input } from "../ui/input"; import { ArrowRight } from "lucide-react"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import { toast } from "sonner"; import Image from "next/image"; @@ -13,6 +13,20 @@ import { Handlebars } from "./handlebars"; export function Hero() { const [email, setEmail] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); + const [csrfToken, setCsrfToken] = useState(null); + + useEffect(() => { + fetch("/api/waitlist/token", { + credentials: "include", + }) + .then((res) => res.json()) + .then((data) => { + if (data.token) { + setCsrfToken(data.token); + } + }) + .catch((err) => console.error("Failed to fetch CSRF token:", err)); + }, []); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -24,6 +38,13 @@ export function Hero() { return; } + if (!csrfToken) { + toast.error("Security error", { + description: "Please refresh the page and try again.", + }); + return; + } + setIsSubmitting(true); try { @@ -31,7 +52,9 @@ export function Hero() { method: "POST", headers: { "Content-Type": "application/json", + "X-CSRF-Token": csrfToken, }, + credentials: "include", body: JSON.stringify({ email: email.trim() }), }); @@ -42,11 +65,15 @@ export function Hero() { description: "You'll be notified when we launch.", }); setEmail(""); + + fetch("/api/waitlist/token", { credentials: "include" }) + .then((res) => res.json()) + .then((data) => { + if (data.token) setCsrfToken(data.token); + }); } else { toast.error("Oops!", { - description: - (data as { error: string }).error || - "Something went wrong. Please try again.", + description: (data as { error: string }).error || "Something went wrong. Please try again.", }); } } catch (error) { @@ -60,13 +87,7 @@ export function Hero() { return (
- landing-page.bg + landing-page.bg - A simple but powerful video editor that gets the job done. Works on - any platform. + A simple but powerful video editor that gets the job done. Works on any platform. - -
+ +
setEmail(e.target.value)} - disabled={isSubmitting} + disabled={isSubmitting || !csrfToken} required />
- diff --git a/apps/web/src/lib/rate-limit.ts b/apps/web/src/lib/rate-limit.ts index 92e78e74..ac63a64c 100644 --- a/apps/web/src/lib/rate-limit.ts +++ b/apps/web/src/lib/rate-limit.ts @@ -12,4 +12,5 @@ export const waitlistRateLimit = new Ratelimit({ redis, limiter: Ratelimit.slidingWindow(5, "1 m"), // 5 requests per minute analytics: true, + prefix: "waitlist-rate-limit", }); -- cgit v1.3.1 From ece9c78b16acd683f09b0fcd7c7b515c64da52f9 Mon Sep 17 00:00:00 2001 From: Ahmet Kilinc Date: Wed, 16 Jul 2025 01:05:42 +0100 Subject: coderabbit comments --- apps/web/src/app/api/waitlist/route.ts | 5 +---- apps/web/src/app/api/waitlist/token/route.ts | 13 ++++++------- apps/web/src/components/landing/hero.tsx | 15 +++++++++++++-- 3 files changed, 20 insertions(+), 13 deletions(-) (limited to 'apps/web/src/components/landing/hero.tsx') diff --git a/apps/web/src/app/api/waitlist/route.ts b/apps/web/src/app/api/waitlist/route.ts index 031ebd5a..076dd228 100644 --- a/apps/web/src/app/api/waitlist/route.ts +++ b/apps/web/src/app/api/waitlist/route.ts @@ -135,10 +135,7 @@ async function validateCSRFToken(request: NextRequest): Promise { const tokenTime = parseInt(timestamp); if (now - tokenTime > TOKEN_EXPIRY) return false; - const expectedSignature = crypto - .createHmac("sha256", env.BETTER_AUTH_SECRET || "fallback-secret") - .update(`${token}:${timestamp}`) - .digest("hex"); + const expectedSignature = crypto.createHmac("sha256", env.BETTER_AUTH_SECRET).update(`${token}:${timestamp}`).digest("hex"); return signature === expectedSignature; } diff --git a/apps/web/src/app/api/waitlist/token/route.ts b/apps/web/src/app/api/waitlist/token/route.ts index 76622fc5..4c7695fa 100644 --- a/apps/web/src/app/api/waitlist/token/route.ts +++ b/apps/web/src/app/api/waitlist/token/route.ts @@ -5,6 +5,7 @@ import { env } from "@/env"; const CSRF_TOKEN_NAME = "waitlist-csrf"; const TOKEN_EXPIRY = 60 * 60 * 1000; +const allowedHosts = env.NODE_ENV === "development" ? ["localhost:3000", "127.0.0.1:3000"] : ["opencut.app", "www.opencut.app"]; export async function GET(request: NextRequest) { const referer = request.headers.get("referer"); @@ -12,14 +13,11 @@ export async function GET(request: NextRequest) { if (referer) { const refererUrl = new URL(referer); - const allowedHosts = env.NODE_ENV === "development" ? ["localhost:3000", "127.0.0.1:3000"] : ["opencut.app", "www.opencut.app"]; if (!allowedHosts.some((allowed) => refererUrl.host === allowed || refererUrl.host.endsWith(allowed))) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }); } } else if (host) { - const allowedHosts = env.NODE_ENV === "development" ? ["localhost:3000", "127.0.0.1:3000"] : ["opencut.app", "www.opencut.app"]; - if (!allowedHosts.some((allowed) => host === allowed || host.endsWith(allowed))) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }); } @@ -27,12 +25,13 @@ export async function GET(request: NextRequest) { return NextResponse.json({ error: "Forbidden" }, { status: 403 }); } + if (!env.BETTER_AUTH_SECRET) { + throw new Error("BETTER_AUTH_SECRET must be configured"); + } + const token = crypto.randomBytes(32).toString("hex"); const timestamp = Date.now(); - const signature = crypto - .createHmac("sha256", env.BETTER_AUTH_SECRET || "fallback-secret") - .update(`${token}:${timestamp}`) - .digest("hex"); + const signature = crypto.createHmac("sha256", env.BETTER_AUTH_SECRET).update(`${token}:${timestamp}`).digest("hex"); const cookieStore = await cookies(); cookieStore.set(CSRF_TOKEN_NAME, `${token}:${timestamp}:${signature}`, { diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index 54aba300..b1910dc5 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/apps/web/src/components/landing/hero.tsx @@ -16,16 +16,24 @@ export function Hero() { const [csrfToken, setCsrfToken] = useState(null); useEffect(() => { + let isMounted = true; fetch("/api/waitlist/token", { credentials: "include", }) .then((res) => res.json()) .then((data) => { - if (data.token) { + if (isMounted && data.token) { setCsrfToken(data.token); } }) - .catch((err) => console.error("Failed to fetch CSRF token:", err)); + .catch((err) => { + console.error("Failed to fetch CSRF token:", err); + if (isMounted) { + toast.error("Security initialization failed", { + description: "Please refresh the page to continue.", + }); + } + }); }, []); const handleSubmit = async (e: React.FormEvent) => { @@ -70,6 +78,9 @@ export function Hero() { .then((res) => res.json()) .then((data) => { if (data.token) setCsrfToken(data.token); + }) + .catch((err) => { + console.error("Failed to refresh CSRF token:", err); }); } else { toast.error("Oops!", { -- cgit v1.3.1