@cytario/web 2.1.7 → 2.2.0

package/app/routes/connections/connection.schema.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
-// Connection name: 2-60 chars, alphanumeric + hyphens + spaces,
-// no leading/trailing hyphens or spaces, no consecutive hyphens or spaces
+import { isAllowedS3Host } from "~/utils/s3HostAllowlist";
+
 export const connectionNameSchema = z
   .string()
   .min(2, "Name must be at least 2 characters")
@@ -13,21 +13,75 @@ export const connectionNameSchema = z
   .refine((val) => !val.includes("--"), "Name must not contain consecutive hyphens")
   .refine((val) => !val.includes("  "), "Name must not contain consecutive spaces");
 
-// AWS ARN pattern validation
+const isDevelopment = process.env.NODE_ENV === "development";
+const HTTP_ALLOWED_HOSTS = new Set(["localhost", "127.0.0.1", "::1"]);
+
+// `https://` endpoints must also pass the S3 allowlist; without that gate the
+// server-side CORS probe could fetch IMDS / RFC1918 / loopback URLs.
+const endpointUrlSchema = z
+  .string()
+  .url("Invalid endpoint URL")
+  .refine(
+    (val) => {
+      let parsed: URL;
+      try {
+        parsed = new URL(val);
+      } catch {
+        return false;
+      }
+      if (parsed.protocol === "https:") return true;
+      if (parsed.protocol !== "http:") return false;
+      return isDevelopment || HTTP_ALLOWED_HOSTS.has(parsed.hostname);
+    },
+    {
+      message: "Endpoint must use https:// (http:// only allowed for localhost, 127.0.0.1, or ::1)",
+    },
+  )
+  .refine(
+    (val) => {
+      // Allowlist gate is https-only; the dev http carve-out above bypasses it
+      // intentionally so local MinIO keeps working.
+      let parsed: URL;
+      try {
+        parsed = new URL(val);
+      } catch {
+        return false;
+      }
+      if (parsed.protocol !== "https:") return true;
+      return isAllowedS3Host(val);
+    },
+    {
+      message:
+        "Endpoint host is not in the cytario S3 allowlist. Ask the operator to add it to CYTARIO_ALLOWED_S3_HOSTS.",
+    },
+  );
+
 const arnPattern = /^arn:aws:iam::\d{12}:role\/[\w+=,.@-]+$/;
 
-// S3 URI validation - extracts bucket name and optional prefix
 const s3UriSchema = z
   .string()
   .min(1, "S3 URI is required")
   .refine(
     (val) => {
-      // Accept either "s3://bucket/path" or just "bucket/path" or "bucket"
       const cleaned = val.replace(/^s3:\/\//, "");
       const bucketName = cleaned.split("/")[0];
       return bucketName.length >= 3 && bucketName.length <= 63;
     },
     { message: "Invalid S3 URI - bucket name must be 3-63 characters" },
+  )
+  .refine(
+    (val) => {
+      // Reject IAM wildcards — a prefix like `tenant-a*` would expand the
+      // session policy's `StringLike` condition to neighbouring tenants.
+      const cleaned = val.replace(/^s3:\/\//, "");
+      const slashIdx = cleaned.indexOf("/");
+      if (slashIdx === -1) return true;
+      const prefix = cleaned.slice(slashIdx + 1);
+      return !/[*?]/.test(prefix);
+    },
+    {
+      message: "Prefix may not contain IAM wildcard characters (`*`, `?`)",
+    },
   );
 
 /** Auto-suggest a connection name from an S3 URI (e.g. "s3://my-bucket/path" → "my-bucket"). */
@@ -43,7 +97,6 @@ export function suggestName(s3Uri: string): string {
     .slice(0, 60);
 }
 
-// Helper to parse S3 URI into bucket name and prefix
 export const parseS3Uri = (uri: string): { bucketName: string; prefix: string } => {
   const cleaned = uri.replace(/^s3:\/\//, "");
   const [bucketName, ...prefixParts] = cleaned.split("/");
@@ -51,7 +104,6 @@ export const parseS3Uri = (uri: string): { bucketName: string; prefix: string }
   return { bucketName, prefix };
 };
 
-// Combined schema for final submission - AWS provider
 const awsFormSchema = z.object({
   name: connectionNameSchema,
   ownerScope: z.string().min(1, "Scope is required"),
@@ -62,7 +114,6 @@ const awsFormSchema = z.object({
   bucketEndpoint: z.string().default(""),
 });
 
-// Combined schema for final submission - MinIO provider
 const minioFormSchema = z.object({
   name: connectionNameSchema,
   ownerScope: z.string().min(1, "Scope is required"),
@@ -70,10 +121,9 @@ const minioFormSchema = z.object({
   s3Uri: s3UriSchema,
   bucketRegion: z.string().default(""),
   roleArn: z.string().default(""),
-  bucketEndpoint: z.string().url("Invalid endpoint URL"),
+  bucketEndpoint: endpointUrlSchema,
 });
 
-// Discriminated union for type-safe conditional validation
 export const connectionSchema = z.discriminatedUnion("providerType", [
   awsFormSchema,
   minioFormSchema,
@@ -81,7 +131,6 @@ export const connectionSchema = z.discriminatedUnion("providerType", [
 
 export type ConnectBucketFormData = z.input<typeof connectionSchema>;
 
-// Default values for the form
 export const defaultFormValues: ConnectBucketFormData = {
   name: "",
   ownerScope: "",

package/app/routes/connections/connections.clientLoader.ts

@@ -0,0 +1,91 @@
+import { _Object } from "@aws-sdk/client-s3";
+import { Credentials } from "@aws-sdk/client-sts";
+import { type ClientLoaderFunctionArgs } from "react-router";
+
+import type { LoaderData, loadConnections } from "./connections.loader";
+import type { ConnectionConfig } from "~/.generated/client";
+import { TreeNode } from "~/components/DirectoryView/buildDirectoryTree";
+import { isImageFile } from "~/utils/fileType";
+import { mapWithConcurrency } from "~/utils/limitConcurrency";
+import { listObjectsClient } from "~/utils/listObjectsClient";
+import { getPrefix } from "~/utils/pathUtils";
+import { CorsLikelyError } from "~/utils/signedFetch";
+
+const PREVIEW_CONCURRENCY = 4;
+
+const isImagePreview = (obj: _Object) => isImageFile(obj.Key ?? "");
+
+interface ConnectionProbeResult {
+  previewObj?: _Object;
+  status: "connected" | "error";
+  errorMessage?: string;
+}
+
+async function probeConnection(
+  config: ConnectionConfig,
+  credentials: Credentials,
+  signal?: AbortSignal,
+): Promise<ConnectionProbeResult> {
+  try {
+    const { contents } = await listObjectsClient(config, credentials, {
+      // Trailing slash required: the session policy only allows `<prefix>/`
+      // and `<prefix>/*`, so a bare `<prefix>` value 403s.
+      prefix: getPrefix(config.prefix),
+      recursive: true,
+      maxKeys: 100,
+      maxTotal: 100,
+      findFirst: isImagePreview,
+      signal,
+    });
+    return { previewObj: contents.find(isImagePreview), status: "connected" };
+  } catch (error) {
+    if (error instanceof CorsLikelyError) {
+      return {
+        status: "error",
+        errorMessage: "Browser blocked from reading the bucket — check the bucket's CORS policy.",
+      };
+    }
+    const message = error instanceof Error ? error.message : "Unknown error";
+    return { status: "error", errorMessage: message };
+  }
+}
+
+/**
+ * Per-connection preview + health probe. One bounded-concurrency
+ * `ListObjectsV2` doubles as the bucket-card preview and the connection
+ * health check; `CorsLikelyError` becomes a card-level CORS warning.
+ */
+export async function enrichConnectionsWithPreviews({
+  request,
+  serverLoader,
+}: ClientLoaderFunctionArgs): Promise<LoaderData> {
+  const server = await serverLoader<typeof loadConnections>();
+  const signal = request.signal;
+
+  const probes = await mapWithConcurrency(
+    server.connectionConfigs,
+    PREVIEW_CONCURRENCY,
+    async (config): Promise<ConnectionProbeResult> => {
+      if (signal.aborted) return { status: "connected" };
+      const creds = server.credentials[config.name];
+      if (!creds) {
+        return { status: "error", errorMessage: "No credentials available for this connection." };
+      }
+      return probeConnection(config, creds, signal);
+    },
+  );
+
+  const nodes: TreeNode[] = server.nodes.map((node, i) => {
+    const probe = probes[i];
+    return {
+      ...node,
+      ...(probe.previewObj ? { _Object: probe.previewObj } : {}),
+      connectionStatus: probe.status,
+      ...(probe.errorMessage ? { connectionErrorMessage: probe.errorMessage } : {}),
+    };
+  });
+
+  return { ...server, nodes };
+}
+
+enrichConnectionsWithPreviews.hydrate = true;

package/app/routes/connections/connections.loader.ts

@@ -1,30 +1,12 @@
-import { _Object } from "@aws-sdk/client-s3";
 import { Credentials } from "@aws-sdk/client-sts";
 import { type LoaderFunctionArgs } from "react-router";
 
 import { ConnectionConfig } from "~/.generated/client";
 import { authContext } from "~/.server/auth/authMiddleware";
-import { getS3Client } from "~/.server/auth/getS3Client";
-import { ConnectionsCredentials } from "~/.server/auth/sessionStorage";
 import { TreeNode } from "~/components/DirectoryView/buildDirectoryTree";
-import { isImageFile } from "~/utils/fileType";
-import { getObjects } from "~/utils/getObjects";
 import { getPinnedPaths } from "~/utils/pinnedPaths.server";
 import { getRecentlyViewed } from "~/utils/recentlyViewed.server";
 
-/** Find the first image file in a connection for the bucket card preview. */
-const fetchPreviewObject = async (
-  config: ConnectionConfig,
-  credentials: ConnectionsCredentials,
-  userId: string,
-): Promise<_Object | undefined> => {
-  const creds = credentials[config.name];
-  if (!creds) return undefined;
-  const s3 = await getS3Client(config, creds, userId);
-  const objects = await getObjects(config, s3, null, config.prefix || undefined, 100);
-  return objects.find((obj) => isImageFile(obj.Key ?? ""));
-};
-
 export type SerializedRecentlyViewed = {
   id: number;
   connectionName: string;
@@ -43,7 +25,7 @@ export type SerializedPinnedPath = {
   lastModified: string | null;
 };
 
-export interface LoaderData {
+export interface ServerLoaderData {
   nodes: TreeNode[];
   credentials: Record<string, Credentials>;
   connectionConfigs: ConnectionConfig[];
@@ -51,32 +33,28 @@ export interface LoaderData {
   pinnedPaths: SerializedPinnedPath[];
 }
 
+export interface LoaderData extends ServerLoaderData {
+  /** Same shape as `nodes` but with per-bucket preview enrichment from the client probe. */
+  nodes: TreeNode[];
+}
+
 export async function loadConnections({ context }: LoaderFunctionArgs) {
   const { connectionConfigs, credentials, user } = context.get(authContext);
   const userId = user.sub;
 
-  const [previews, recentlyViewedRaw, pinnedPathsRaw] = await Promise.all([
-    Promise.allSettled(
-      connectionConfigs.map((config) => fetchPreviewObject(config, credentials, userId)),
-    ),
+  const [recentlyViewedRaw, pinnedPathsRaw] = await Promise.all([
     getRecentlyViewed(userId, 20),
     getPinnedPaths(userId),
   ]);
 
-  const nodes: TreeNode[] = connectionConfigs.map((config, i) => {
-    const result = previews[i];
-    const previewObj = result.status === "fulfilled" ? result.value : undefined;
-
-    return {
-      id: `${config.name}/`,
-      connectionName: config.name,
-      name: config.name,
-      type: "bucket" as const,
-      pathName: "",
-      children: [],
-      _Object: previewObj,
-    };
-  });
+  const nodes: TreeNode[] = connectionConfigs.map((config) => ({
+    id: `${config.name}/`,
+    connectionName: config.name,
+    name: config.name,
+    type: "bucket" as const,
+    pathName: "",
+    children: [],
+  }));
 
   const recentlyViewed: SerializedRecentlyViewed[] = recentlyViewedRaw.map((item) => ({
     id: item.id,
@@ -96,11 +74,13 @@ export async function loadConnections({ context }: LoaderFunctionArgs) {
     lastModified: pin.lastModified ? pin.lastModified.toISOString() : null,
   }));
 
-  return {
+  const payload: ServerLoaderData = {
     nodes,
     credentials,
     connectionConfigs,
     recentlyViewed,
     pinnedPaths,
-  } satisfies LoaderData;
+  };
+
+  return payload;
 }

package/app/routes/connections/connections.route.tsx

@@ -31,8 +31,13 @@ export const action = async (args: ActionFunctionArgs) => {
   }
 };
 
+export { enrichConnectionsWithPreviews as clientLoader } from "./connections.clientLoader";
 export { loadConnections as loader } from "./connections.loader";
 
+// Response carries STS credentials — keep it out of every cache between origin
+// and browser.
+export const headers = () => ({ "Cache-Control": "no-store, private" });
+
 const title = "Storage Connections";
 
 export const meta: MetaFunction = () => [{ title: `${title} — Cytario` }];

package/app/routes/connections/createConnection.action.ts

@@ -5,10 +5,12 @@ import { Prisma } from "~/.generated/client";
 import { authContext } from "~/.server/auth/authMiddleware";
 import { sessionContext } from "~/.server/auth/sessionMiddleware";
 import { sessionStorage } from "~/.server/auth/sessionStorage";
+import { describeCorsFailure, describeCorsWarning, probeBucketCors } from "~/.server/corsPreflight";
 import { prisma } from "~/.server/db/prisma";
+import { cytarioConfig } from "~/config";
 import { canCreate } from "~/utils/authorization";
+import { constructS3Url } from "~/utils/resourceId";
 
-/** Create a connection config (upserts on the composite unique key). */
 export async function createConnection(
   ownerScope: string,
   createdBy: string,
@@ -84,6 +86,24 @@ export const createAction = async ({ request, context }: ActionFunctionArgs) =>
         ? `https://s3.${data.bucketRegion}.amazonaws.com`
         : data.bucketEndpoint;
 
+    // Surface CORS misconfigurations at submit time rather than at first
+    // browser-side fetch (where they read as a generic "Failed to fetch").
+    const cytarioOrigin = cytarioConfig.endpoints.webapp;
+    const bucketUrl = constructS3Url({
+      bucketName,
+      region: data.providerType === "aws" ? data.bucketRegion : null,
+      endpoint,
+    });
+    const corsResult = await probeBucketCors(bucketUrl, cytarioOrigin);
+    if (!corsResult.ok) {
+      // CORS / allowlist failures span multiple fields (and AWS has no
+      // endpoint field) — surface as a form-level banner.
+      return {
+        formError: describeCorsFailure(corsResult, cytarioOrigin),
+        status: "error" as const,
+      };
+    }
+
     const newConfig = {
       name: data.name,
       bucketName,
@@ -96,10 +116,19 @@ export const createAction = async ({ request, context }: ActionFunctionArgs) =>
 
     await createConnection(data.ownerScope, user.sub, newConfig);
 
-    session.set("notification", {
-      status: "success",
-      message: "Storage connection added successfully.",
-    });
+    if (corsResult.warnings.length > 0) {
+      session.set("notification", {
+        status: "warning",
+        message: `Connection added. ${corsResult.warnings
+          .map((w) => describeCorsWarning(w, cytarioOrigin))
+          .join(" ")}`,
+      });
+    } else {
+      session.set("notification", {
+        status: "success",
+        message: "Storage connection added successfully.",
+      });
+    }
 
     return redirect(`/connections/${encodeURIComponent(data.name)}`, {
       headers: { "Set-Cookie": await sessionStorage.commitSession(session) },
@@ -116,13 +145,10 @@ export const createAction = async ({ request, context }: ActionFunctionArgs) =>
 
     console.error("Error creating connection:", error);
 
-    session.set("notification", {
-      status: "error",
-      message: "Error adding connection.",
-    });
-
-    return redirect(`/`, {
-      headers: { "Set-Cookie": await sessionStorage.commitSession(session) },
-    });
+    // Keep the wizard mounted so the user's draft survives the error.
+    return {
+      formError: "Could not add the connection. Try again or check the server logs.",
+      status: "error" as const,
+    };
   }
 };

package/app/routes/connections/deleteConnection.action.ts

@@ -7,7 +7,6 @@ import { sessionStorage } from "~/.server/auth/sessionStorage";
 import { prisma } from "~/.server/db/prisma";
 import { canModify, canSee } from "~/utils/authorization";
 
-/** Delete a connection config by name. Checks visibility and modify authorization. */
 export async function deleteConnection(user: UserProfile, name: string) {
   const config = await prisma.connectionConfig.findUnique({
     where: { name },
@@ -49,6 +48,11 @@ export const deleteAction = async ({ request, context }: ActionFunctionArgs) =>
     throw error;
   }
 
+  // Drop cached STS credentials keyed by the removed name.
+  const credentials = session.get("credentials") ?? {};
+  delete credentials[connectionName];
+  session.set("credentials", credentials);
+
   session.set("notification", {
     status: "success",
     message: "Storage connection deleted.",

package/app/routes/connections/updateConnection.action.ts

@@ -3,14 +3,20 @@ import { type ActionFunctionArgs, redirect } from "react-router";
 import { connectionSchema, parseS3Uri } from "./connection.schema";
 import { Prisma } from "~/.generated/client";
 import { authContext } from "~/.server/auth/authMiddleware";
-import { invalidateS3ClientsForBucket } from "~/.server/auth/getS3Client";
 import type { UserProfile } from "~/.server/auth/getUserInfo";
 import { sessionContext } from "~/.server/auth/sessionMiddleware";
 import { sessionStorage } from "~/.server/auth/sessionStorage";
+import {
+  type CorsPreflightWarningReason,
+  describeCorsFailure,
+  describeCorsWarning,
+  probeBucketCors,
+} from "~/.server/corsPreflight";
 import { prisma } from "~/.server/db/prisma";
+import { cytarioConfig } from "~/config";
 import { canCreate, canModify, canSee } from "~/utils/authorization";
+import { constructS3Url } from "~/utils/resourceId";
 
-/** Update a connection config. Cascades name changes to related records. */
 export async function updateConnection(
   user: UserProfile,
   originalName: string,
@@ -46,8 +52,7 @@ export async function updateConnection(
   const previousName = config.name;
   const previousBucketName = config.bucketName;
 
-  // FKs on recentlyViewed/pinnedPath have ON UPDATE CASCADE,
-  // so Postgres automatically cascades name changes to children.
+  // FKs on recentlyViewed / pinnedPath use ON UPDATE CASCADE.
   const updated = await prisma.connectionConfig.update({
     where: { id: config.id },
     data: {
@@ -79,7 +84,6 @@ export const updateAction = async ({ request, context }: ActionFunctionArgs) =>
     };
   }
 
-  // Validate the form data with the same schema as create
   const rawData = {
     name: String(formData.get("name") ?? ""),
     ownerScope: String(formData.get("ownerScope") ?? ""),
@@ -107,6 +111,31 @@ export const updateAction = async ({ request, context }: ActionFunctionArgs) =>
       ? `https://s3.${validated.bucketRegion}.amazonaws.com`
       : validated.bucketEndpoint;
 
+  // Only re-probe CORS when the bucket URL actually changes — a transient
+  // bucket-side glitch must not block a pure name / scope / prefix edit.
+  const existingConfig = await prisma.connectionConfig.findUnique({
+    where: { name: originalName },
+  });
+  const endpointChanged = !existingConfig || existingConfig.endpoint !== endpoint;
+  const bucketNameChanged = !existingConfig || existingConfig.bucketName !== bucketName;
+  const cytarioOrigin = cytarioConfig.endpoints.webapp;
+  let corsWarnings: CorsPreflightWarningReason[] = [];
+  if (endpointChanged || bucketNameChanged) {
+    const bucketUrl = constructS3Url({
+      bucketName,
+      region: validated.providerType === "aws" ? validated.bucketRegion : null,
+      endpoint,
+    });
+    const corsResult = await probeBucketCors(bucketUrl, cytarioOrigin);
+    if (!corsResult.ok) {
+      return {
+        formError: describeCorsFailure(corsResult, cytarioOrigin),
+        status: "error" as const,
+      };
+    }
+    corsWarnings = corsResult.warnings;
+  }
+
   try {
     const updatedConfig = await updateConnection(user, originalName, {
       name: validated.name,
@@ -119,20 +148,27 @@ export const updateAction = async ({ request, context }: ActionFunctionArgs) =>
       region: validated.providerType === "aws" ? validated.bucketRegion : null,
     });
 
-    // Invalidate cached credentials (keyed by connection name) and the S3
-    // client cache (keyed by bucket) for the previous identity.
+    // Drop cached credentials so authMiddleware re-mints under the new identity.
     const credentials = session.get("credentials") ?? {};
     delete credentials[updatedConfig.previousName];
     if (updatedConfig.name !== updatedConfig.previousName) {
       delete credentials[updatedConfig.name];
     }
     session.set("credentials", credentials);
-    invalidateS3ClientsForBucket(user.sub, updatedConfig.previousBucketName);
 
-    session.set("notification", {
-      status: "success",
-      message: "Connection updated successfully.",
-    });
+    if (corsWarnings.length > 0) {
+      session.set("notification", {
+        status: "warning",
+        message: `Connection updated. ${corsWarnings
+          .map((w) => describeCorsWarning(w, cytarioOrigin))
+          .join(" ")}`,
+      });
+    } else {
+      session.set("notification", {
+        status: "success",
+        message: "Connection updated successfully.",
+      });
+    }
 
     return redirect(`/connections/${encodeURIComponent(updatedConfig.name)}`, {
       headers: { "Set-Cookie": await sessionStorage.commitSession(session) },
@@ -150,8 +186,9 @@ export const updateAction = async ({ request, context }: ActionFunctionArgs) =>
     }
 
     if (error instanceof Error) {
+      // Surface as a form-level banner — the user may have left step 1.
       return {
-        errors: { ownerScope: [error.message] },
+        formError: error.message,
         status: "error" as const,
       };
     }

package/app/routes/home/home.route.tsx

@@ -32,13 +32,17 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
   defaultShouldRevalidate,
 }) => {
   if (formAction) return defaultShouldRevalidate;
-  // Revalidate when navigating back to home from another page
   if (currentUrl.pathname !== nextUrl.pathname) return true;
   return false;
 };
 
+export { enrichConnectionsWithPreviews as clientLoader } from "~/routes/connections/connections.clientLoader";
 export { loadConnections as loader } from "~/routes/connections/connections.loader";
 
+// Response carries STS credentials — keep it out of every cache between origin
+// and browser.
+export const headers = () => ({ "Cache-Control": "no-store, private" });
+
 export default function HomeRoute() {
   const { nodes, connectionConfigs, recentlyViewed, pinnedPaths } = useLoaderData<LoaderData>();
 

package/app/routes/layouts/protected.layout.tsx

@@ -1,4 +1,9 @@
-import { Outlet, useLoaderData, type LoaderFunctionArgs } from "react-router";
+import {
+  Outlet,
+  useLoaderData,
+  type ClientLoaderFunctionArgs,
+  type LoaderFunctionArgs,
+} from "react-router";
 
 import { ModalOutlet } from "./ModalOutlet";
 import { authContext, authMiddleware } from "~/.server/auth/authMiddleware";
@@ -6,11 +11,20 @@ import { useInitConnections } from "~/hooks/useInitConnections";
 
 export const middleware = [authMiddleware];
 
+// Response carries STS credentials — keep it out of every cache between origin
+// and browser.
+export const headers = () => ({ "Cache-Control": "no-store, private" });
+
 export const loader = async ({ context }: LoaderFunctionArgs) => {
   const { connectionConfigs, credentials } = context.get(authContext);
   return { connectionConfigs, credentials };
 };
 
+// Identity clientLoader — see `app/root.tsx`; works around RR's bulk-fetch
+// short-circuit during the initial `clientLoader.hydrate` pass.
+export const clientLoader = ({ serverLoader }: ClientLoaderFunctionArgs) =>
+  serverLoader<typeof loader>();
+
 export default function ProtectedLayout() {
   const { connectionConfigs, credentials } = useLoaderData<typeof loader>();
   useInitConnections(connectionConfigs, credentials);