Secure profile photo uploads and trust configured production origin

lib/account-api.ts

@@ -1,5 +1,7 @@
 import "server-only";
 import { createClient } from "@supabase/supabase-js";
+import { randomUUID } from "node:crypto";
+import sharp from "sharp";
 import { NextRequest, NextResponse } from "next/server";
 import {
   admin,
@@ -10,6 +12,8 @@ import {
   accountState,
 } from "./supabase";
 import { accountProfile } from "./profile";
+import { browserAccount } from "./request-security";
+import { ServiceError } from "./service-error";
 import {
   authActionSchema,
   authDestination,
@@ -24,7 +28,6 @@ import { issueInitialPassword } from "@/shared/initial-password";
 import {
   profileAvatarBucket,
   profileAvatarMaxBytes,
-  profileAvatarMimeTypes,
 } from "@/shared/profile-appearance";
 
 type Context = {
@@ -33,6 +36,98 @@ type Context = {
 };
 const json = (body: unknown, status = 200) =>
   NextResponse.json(body, { status, headers: { "Cache-Control": "no-store" } });
+const avatarRequestLimit = profileAvatarMaxBytes + 64 * 1024;
+
+async function avatarFile(request: NextRequest): Promise<File> {
+  const contentType = request.headers.get("content-type") ?? "";
+  if (!/^multipart\/form-data\s*;.*\bboundary=/i.test(contentType))
+    throw new ServiceError("Choose a valid profile photo", 400);
+  const contentLength = request.headers.get("content-length");
+  if (
+    contentLength &&
+    /^\d+$/.test(contentLength) &&
+    Number(contentLength) > avatarRequestLimit
+  )
+    throw new ServiceError("Image must be 5 MB or smaller", 413);
+
+  const reader = request.body?.getReader();
+  if (!reader) throw new ServiceError("Choose a profile photo", 400);
+  const chunks: Uint8Array[] = [];
+  let size = 0;
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    size += value.byteLength;
+    if (size > avatarRequestLimit) {
+      try {
+        await reader.cancel();
+      } catch {
+        // The request is already being rejected; cancellation is best effort.
+      }
+      throw new ServiceError("Image must be 5 MB or smaller", 413);
+    }
+    chunks.push(value);
+  }
+
+  let form: FormData;
+  try {
+    const boundedRequest = new Request(request.url, {
+      method: "POST",
+      headers: { "content-type": contentType },
+      body: Buffer.concat(chunks, size),
+    });
+    form = await boundedRequest.formData();
+  } catch {
+    throw new ServiceError("Choose a valid profile photo", 400);
+  }
+  const entries = [...form.entries()];
+  if (entries.length !== 1)
+    throw new ServiceError("Choose a valid profile photo", 400);
+  const entry = entries[0]!;
+  if (
+    entry[0] !== "photo" ||
+    typeof entry[1] === "string" ||
+    !(entry[1] instanceof File)
+  )
+    throw new ServiceError("Choose a valid profile photo", 400);
+  const file = entry[1];
+  if (!file.size || file.size > profileAvatarMaxBytes)
+    throw new ServiceError("Image must be 5 MB or smaller", 413);
+  return file;
+}
+
+async function normalizedAvatar(file: File) {
+  try {
+    const image = sharp(Buffer.from(await file.arrayBuffer()), {
+      limitInputPixels: 24_000_000,
+      failOn: "error",
+      animated: false,
+    });
+    const metadata = await image.metadata();
+    if (
+      !["jpeg", "png", "webp"].includes(metadata.format ?? "") ||
+      (metadata.pages ?? 1) !== 1
+    )
+      throw new ServiceError("Choose a JPG, PNG or WebP image", 400);
+    const output = await image
+      .rotate()
+      .resize({
+        width: 512,
+        height: 512,
+        fit: "inside",
+        withoutEnlargement: true,
+      })
+      .webp({ quality: 85 })
+      .toBuffer();
+    if (output.byteLength > profileAvatarMaxBytes)
+      throw new ServiceError("Image must be 5 MB or smaller", 413);
+    return output;
+  } catch (error) {
+    if (error instanceof ServiceError) throw error;
+    throw new ServiceError("Choose a valid JPG, PNG or WebP image", 400);
+  }
+}
+
 export async function accountApi(
   request: NextRequest,
   path: string[],
@@ -57,6 +152,52 @@ export async function accountApi(
       });
     return response;
   }
+  if (path[0] === "profile" && path[1] === "avatar" && path.length === 2) {
+    if (request.method !== "POST")
+      return json({ error: "Method not allowed" }, 405);
+    const account = await browserAccount(request, user);
+    await context.limit(`profile:avatar:${account.id}`, 10, 3600);
+    const file = await avatarFile(request);
+    const image = await normalizedAvatar(file);
+    const profileBefore = await accountProfile(account);
+    const avatarPath = `${account.id}/${randomUUID()}.webp`;
+    const storage = admin().storage.from(profileAvatarBucket);
+    const upload = await storage.upload(avatarPath, image, {
+      cacheControl: "31536000",
+      contentType: "image/webp",
+      upsert: false,
+    });
+    if (upload.error)
+      throw new ServiceError(
+        "Profile photo upload failed. Please try again.",
+        503,
+      );
+
+    const profile = await (async () => {
+      try {
+        return required(
+          await admin()
+            .from("profiles")
+            .update({ avatar_path: avatarPath })
+            .eq("id", account.id)
+            .select(
+              "id,display_name,avatar_path,role,name_glow,glow_color,bug_finder,custom_prefix,custom_prefix_icon",
+            )
+            .single(),
+        );
+      } catch (error) {
+        await storage.remove([avatarPath]).catch(() => {});
+        throw error;
+      }
+    })();
+    if (
+      profileBefore.avatar_path &&
+      profileBefore.avatar_path.startsWith(`${account.id}/`) &&
+      profileBefore.avatar_path.split("/").length === 2
+    )
+      await storage.remove([profileBefore.avatar_path]).catch(() => {});
+    return json({ profile });
+  }
   if (
     path[0] === "auth" &&
     path[1] === "initial-password" &&
@@ -92,8 +233,7 @@ export async function accountApi(
     return json({ ok: true });
   }
   if (path[0] === "profile" && path.length === 1) {
-    const account = await user();
-    if (!account) return json({ error: "Log in to manage your account" }, 401);
+    const account = await browserAccount(request, user);
     if (request.method === "GET")
       return json({
         profile: await accountProfile(account),
@@ -102,46 +242,20 @@ export async function accountApi(
     if (request.method === "PATCH") {
       const body = profileUpdateSchema.parse(await context.jsonBody(request));
       const current = await accountProfile(account);
+      if (
+        body.avatarPath !== undefined &&
+        body.avatarPath !== null &&
+        body.avatarPath !== current.avatar_path
+      )
+        return json(
+          { error: "Upload a profile photo through the avatar form" },
+          400,
+        );
       if (body.glowColor !== undefined && !current.name_glow)
         return json(
           { error: "Earn a username glow before choosing its color" },
           403,
         );
-      if (
-        body.avatarPath !== undefined &&
-        body.avatarPath !== null &&
-        body.avatarPath !== current.avatar_path
-      ) {
-        const [ownerId, filename] = body.avatarPath.split("/");
-        if (
-          ownerId !== account.id ||
-          !/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\.(jpg|png|webp)$/i.test(
-            filename ?? "",
-          )
-        )
-          return json({ error: "Choose a valid profile photo" }, 400);
-        const uploaded = await admin()
-          .storage.from(profileAvatarBucket)
-          .info(body.avatarPath);
-        if (uploaded.error || !uploaded.data)
-          return json(
-            { error: "Upload your profile photo again" },
-            400,
-          );
-        if (
-          !profileAvatarMimeTypes.includes(
-            uploaded.data.contentType as (typeof profileAvatarMimeTypes)[number],
-          ) ||
-          !uploaded.data.size ||
-          uploaded.data.size > profileAvatarMaxBytes
-        ) {
-          await admin().storage.from(profileAvatarBucket).remove([body.avatarPath]);
-          return json(
-            { error: "Choose an image no larger than 5 MB" },
-            400,
-          );
-        }
-      }
       const profile = required(
         await admin()
           .from("profiles")
@@ -166,7 +280,10 @@ export async function accountApi(
         body.avatarPath !== undefined &&
         body.avatarPath !== current.avatar_path
       ) {
-        if (current.avatar_path?.startsWith(`${account.id}/`))
+        if (
+          current.avatar_path?.startsWith(`${account.id}/`) &&
+          current.avatar_path.split("/").length === 2
+        )
           await admin()
             .storage.from(profileAvatarBucket)
             .remove([current.avatar_path]);