import { createCanvas, loadImage } from '@gfx/canvas-wasm'; import TTLCache from '@isaacs/ttlcache'; import { z } from 'zod'; import { AppController } from '@/app.ts'; import { Conf } from '@/config.ts'; import { createAdminEvent } from '@/utils/api.ts'; interface Point { x: number; y: number; } interface Dimensions { w: number; h: number; } const captchas = new TTLCache(); /** Puzzle captcha controller. */ export const captchaController: AppController = async (c) => { const { bg, puzzle, solution } = await generateCaptcha( await Deno.readFile(new URL('../../../captcha/tj-holowaychuk.jpg', import.meta.url)), await Deno.readFile(new URL('../../../captcha/puzzle-mask.png', import.meta.url)), await Deno.readFile(new URL('../../../captcha/puzzle-hole.png', import.meta.url)), { cw: 370, ch: 400, pw: 65, ph: 65, }, ); const id = crypto.randomUUID(); const now = new Date(); const ttl = Conf.captchaTTL; captchas.set(id, solution, { ttl }); return c.json({ id, type: 'puzzle', bg: bg.toDataURL(), puzzle: puzzle.toDataURL(), created_at: now.toISOString(), expires_at: new Date(now.getTime() + ttl).toISOString(), }); }; /** Generate a puzzle captcha, returning canvases for the board and piece. */ async function generateCaptcha( from: Uint8Array, mask: Uint8Array, hole: Uint8Array, opts: { pw: number; ph: number; cw: number; ch: number; }, ) { const { pw, ph, cw, ch } = opts; const bg = createCanvas(cw, ch); const ctx = bg.getContext('2d'); const image = await loadImage(from); ctx.drawImage(image, 0, 0, image.width(), image.height(), 0, 0, cw, ch); const puzzle = createCanvas(pw, ph); const pctx = puzzle.getContext('2d'); const solution = getPieceCoords(bg.width, bg.height, pw, ph); const maskImage = await loadImage(mask); const holeImage = await loadImage(hole); pctx.drawImage(maskImage, 0, 0, pw, ph); pctx.globalCompositeOperation = 'source-in'; pctx.drawImage(bg, solution.x, solution.y, pw, ph, 0, 0, pw, ph); ctx.globalCompositeOperation = 'source-atop'; ctx.drawImage(holeImage, solution.x, solution.y, pw, ph); return { bg, puzzle, solution, }; } function getPieceCoords(cw: number, ch: number, pw: number, ph: number): Point { // Random x coordinate such that the piece fits within the canvas horizontally const x = Math.floor(Math.random() * (cw - pw)); // Random y coordinate such that the piece fits within the canvas vertically const y = Math.floor(Math.random() * (ch - ph)); return { x, y }; } const pointSchema = z.object({ x: z.number(), y: z.number(), }); /** Verify the captcha solution and sign an event in the database. */ export const captchaVerifyController: AppController = async (c) => { const id = c.req.param('id'); const result = pointSchema.safeParse(await c.req.json()); const pubkey = await c.get('signer')!.getPublicKey(); if (!result.success) { return c.json({ error: 'Invalid input' }, { status: 422 }); } const solution = captchas.get(id); if (!solution) { return c.json({ error: 'Captcha expired' }, { status: 410 }); } const dim = { w: 65, h: 65 }; const point = result.data; const success = areIntersecting( { ...point, ...dim }, { ...solution, ...dim }, ); if (success) { captchas.delete(id); await createAdminEvent({ kind: 1985, tags: [ ['L', 'pub.ditto.captcha'], ['l', 'solved', 'pub.ditto.captcha'], ['p', pubkey, Conf.relay], ], }, c); return new Response(null, { status: 204 }); } return c.json({ error: 'Incorrect solution' }, { status: 400 }); }; type Rectangle = Point & Dimensions; function areIntersecting(rect1: Rectangle, rect2: Rectangle, threshold = 0.5) { const r1cx = rect1.x + rect1.w / 2; const r2cx = rect2.x + rect2.w / 2; const r1cy = rect1.y + rect1.h / 2; const r2cy = rect2.y + rect2.h / 2; const dist = Math.sqrt((r2cx - r1cx) ** 2 + (r2cy - r1cy) ** 2); const e1 = Math.sqrt(rect1.h ** 2 + rect1.w ** 2) / 2; const e2 = Math.sqrt(rect2.h ** 2 + rect2.w ** 2) / 2; return dist < (e1 + e2) * threshold; }