create-feedbax 0.2.0 → 0.2.2

package/template/src/images-runtime.test.ts

@@ -0,0 +1,133 @@
+import { expect, it } from "vitest";
+import { Miniflare } from "miniflare";
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import {
+  createConnectedStore,
+  createFeedbackModule,
+  createImageModule,
+} from "@feedbax/feedback";
+import { createImageRequestHandler } from "./images-runtime";
+import { readSessionToken, sessionHash } from "./connected-identity";
+it("authenticates uploads, bounds image bodies, and serves private objects only through authorized no-store responses", async () => {
+  const runtime = new Miniflare({
+    modules: true,
+    script: "export default {fetch(){return new Response('ok')}}",
+    compatibilityDate: "2026-07-30",
+    d1Databases: ["DB"],
+    r2Buckets: ["IMAGES"],
+  });
+  try {
+    const database = await runtime.getD1Database("DB");
+    for (const name of [
+      "0001_connected.sql",
+      "0002_participation.sql",
+      "0003_images.sql",
+    ])
+      await database.exec(
+        await readFile(
+          `${existsSync("apps/portal/migrations") ? "apps/portal/migrations" : "migrations"}/${name}`,
+          "utf8",
+        ),
+      );
+    const store = createConnectedStore(database);
+    await store.acceptIdentity({
+      subject: "alice",
+      displayName: "Alice",
+      nonce: "a",
+      sessionHash: sessionHash("session"),
+      expiresAt: Date.now() + 60000,
+    });
+    const participant = async (request: Request) => {
+      const token = readSessionToken(request);
+      return token ? store.session(sessionHash(token)) : undefined;
+    };
+    const bucket = await runtime.getR2Bucket("IMAGES");
+    const feedback = createFeedbackModule();
+    const handler = createImageRequestHandler({
+      enabled: true,
+      siteUrl: "https://feedback.example.com",
+      signedIn: async (request) => Boolean(await participant(request)),
+      getImages: async (request) =>
+        createImageModule({
+          database,
+          bucket,
+          feedback,
+          participant: await participant(request),
+          reviewSecret: "s".repeat(32),
+        }),
+      rateLimit: async () => true,
+    });
+    const png = Uint8Array.from(
+      Buffer.from(
+        "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+aE2sAAAAASUVORK5CYII=",
+        "base64",
+      ),
+    );
+    const headers = {
+      Origin: "https://feedback.example.com",
+      "Content-Type": "image/png",
+      Cookie: "__Host-feedbax-session=session",
+    };
+    expect(
+      (
+        await handler(
+          new Request("https://feedback.example.com/internal/images", {
+            method: "POST",
+            headers: { ...headers, Origin: "https://evil.example.com" },
+            body: png,
+          }),
+        )
+      )?.status,
+    ).toBe(403);
+    expect(
+      (
+        await handler(
+          new Request("https://feedback.example.com/internal/images", {
+            method: "POST",
+            headers: { Origin: headers.Origin, "Content-Type": "image/png" },
+            body: png,
+          }),
+        )
+      )?.status,
+    ).toBe(401);
+    expect(
+      (
+        await handler(
+          new Request("https://feedback.example.com/internal/images", {
+            method: "POST",
+            headers: {
+              ...headers,
+              "Content-Length": String(5 * 1024 * 1024 + 1),
+            },
+            body: png,
+          }),
+        )
+      )?.status,
+    ).toBe(413);
+    const upload = await handler(
+      new Request("https://feedback.example.com/internal/images", {
+        method: "POST",
+        headers,
+        body: png,
+      }),
+    );
+    expect(upload?.status).toBe(201);
+    const image = JSON.parse(await upload!.text());
+    const publicRead = await handler(
+      new Request(`https://feedback.example.com${image.src}`),
+    );
+    expect(publicRead?.status).toBe(404);
+    const ownRead = await handler(
+      new Request(`https://feedback.example.com${image.src}`, {
+        headers: { Cookie: headers.Cookie },
+      }),
+    );
+    expect(ownRead?.status).toBe(200);
+    expect(ownRead?.headers.get("Cache-Control")).toBe("no-store");
+    expect(ownRead?.headers.get("X-Content-Type-Options")).toBe("nosniff");
+    expect(new Uint8Array(await ownRead!.arrayBuffer())).toEqual(png);
+  } finally {
+    await runtime.dispose();
+  }
+});

package/template/src/images-runtime.ts

@@ -0,0 +1,125 @@
+import {
+  ImageAttachmentError,
+  type createImageModule,
+} from "@feedbax/feedback";
+import { env } from "cloudflare:workers";
+import feedbax from "./feedbax";
+import {
+  configuredImages,
+  createConfiguredFeedbackModule,
+  requestParticipant,
+} from "./feedback-runtime";
+import { sameOrigin } from "./connected-identity";
+
+export function createImageRequestHandler(options: {
+  enabled: boolean;
+  siteUrl: string;
+  getImages(request: Request): Promise<ReturnType<typeof createImageModule>>;
+  signedIn(request: Request): Promise<boolean>;
+  rateLimit(request: Request): Promise<boolean>;
+}) {
+  return async (request: Request): Promise<Response | undefined> => {
+    const url = new URL(request.url);
+    if (
+      url.pathname !== "/internal/images" &&
+      !url.pathname.startsWith("/internal/images/")
+    )
+      return;
+    const json = (body: unknown, status = 200) =>
+      Response.json(body, { status, headers: { "Cache-Control": "no-store" } });
+    if (!options.enabled) return json({ error: "Not found." }, 404);
+    const id = url.pathname.slice("/internal/images/".length);
+    try {
+      if (request.method === "GET" && /^[-a-f0-9]{36}$/.test(id)) {
+        const image = await (
+          await options.getImages(request)
+        ).read(id, url.searchParams.get("review") ?? undefined);
+        if (!image) return json({ error: "Image is unavailable." }, 404);
+        return new Response(image.body as BodyInit, {
+          headers: {
+            "Content-Type": image.contentType,
+            "Content-Length": String(image.bytes),
+            "Cache-Control": "no-store",
+            "X-Content-Type-Options": "nosniff",
+            "Content-Security-Policy": "default-src 'none'; sandbox",
+            "Cross-Origin-Resource-Policy": "same-origin",
+            "Referrer-Policy": "no-referrer",
+          },
+        });
+      }
+      if (request.method !== "POST" && request.method !== "DELETE")
+        return json({ error: "Method not allowed." }, 405);
+      if (!sameOrigin(request, options.siteUrl))
+        return json({ error: "Request origin is invalid." }, 403);
+      if (!(await options.signedIn(request)))
+        return json({ error: "Sign in to add images." }, 401);
+      if (!(await options.rateLimit(request)))
+        return json(
+          { error: "Too many image requests. Try again shortly." },
+          429,
+        );
+      const images = await options.getImages(request);
+      if (request.method === "DELETE") {
+        if (!/^[-a-f0-9]{36}$/.test(id))
+          return json({ error: "Invalid image." }, 400);
+        await images.removePending(id);
+        return json({ removed: true });
+      }
+      if (url.pathname !== "/internal/images")
+        return json({ error: "Not found." }, 404);
+      const type = request.headers.get("Content-Type") ?? "";
+      if (!["image/jpeg", "image/png", "image/webp"].includes(type))
+        return json({ error: "Choose a JPEG, PNG, or WebP image." }, 400);
+      const max = 5 * 1024 * 1024;
+      if (Number(request.headers.get("Content-Length")) > max)
+        return json({ error: "Each image must be 5 MiB or smaller." }, 413);
+      const reader = request.body?.getReader();
+      if (!reader) return json({ error: "Choose an image." }, 400);
+      const chunks: Uint8Array[] = [];
+      let length = 0;
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        length += value.byteLength;
+        if (length > max) {
+          await reader.cancel();
+          return json({ error: "Each image must be 5 MiB or smaller." }, 413);
+        }
+        chunks.push(value);
+      }
+      const bytes = new Uint8Array(length);
+      let offset = 0;
+      for (const chunk of chunks) {
+        bytes.set(chunk, offset);
+        offset += chunk.byteLength;
+      }
+      return json(await images.upload(bytes, type), 201);
+    } catch (error) {
+      return json(
+        {
+          error:
+            error instanceof ImageAttachmentError
+              ? error.message
+              : "Images are temporarily unavailable. Try again.",
+        },
+        error instanceof ImageAttachmentError ? 400 : 503,
+      );
+    }
+  };
+}
+export const handleImageRequest = createImageRequestHandler({
+  enabled: Boolean(feedbax.connected?.images),
+  siteUrl: feedbax.product.siteUrl ?? "https://not-configured.invalid",
+  signedIn: async (request) => Boolean(await requestParticipant(request)),
+  getImages: async (request) =>
+    configuredImages(
+      createConfiguredFeedbackModule(),
+      await requestParticipant(request),
+    ),
+  rateLimit: async (request) =>
+    (
+      await env.PORTAL_SUBMISSIONS_RATE_LIMITER.limit({
+        key: `images:${request.headers.get("CF-Connecting-IP") ?? "unknown"}`,
+      })
+    ).success,
+});