@cytario/web 2.1.8 → 2.2.0

package/README.md

@@ -23,7 +23,7 @@ For the hosted product, see [cytario.com](https://www.cytario.com).
 | Styling       | Tailwind CSS, [@cytario/design](https://github.com/cytario/cytario-design) |
 | Auth          | OAuth 2.0 via Keycloak, STS for S3 credentials                             |
 | Database      | PostgreSQL (Prisma ORM), Redis/Valkey (sessions)                           |
-| Cloud         | AWS SDK v3 (S3, STS), presigned URLs                                       |
+| Cloud         | AWS SDK v3 (S3, STS)                                                       |
 | CI/CD         | GitHub Actions, semantic-release, GHCR                                     |
 
 ## Plugin model

package/app/.server/auth/README.md

@@ -8,5 +8,4 @@ OAuth 2.0 Authorization Code Flow against Keycloak. Session cookies are httpOnly
 | `authMiddleware.ts`        | Refresh tokens if needed; populate `authContext` for downstream loaders. |
 | `getSessionCredentials.ts` | Mint STS credentials per connection.                                     |
 | `verifyIdToken.ts`         | JWKS-based idToken signature/expiry verification.                        |
-| `getS3Client.ts`           | Build an SDK-v3 S3 client with the connection's signed credentials.      |
 | `keycloakAdmin/`           | Service-account-backed admin API for user/group management.              |

package/app/.server/auth/authMiddleware.ts

@@ -16,10 +16,6 @@ export interface AuthContextData extends SessionData {
 
 export const authContext = createContext<AuthContextData>();
 
-/**
- * Lightweight expiry check for refresh tokens (opaque to clients).
- * Only checks the `exp` claim — no signature verification needed.
- */
 const isRefreshTokenValid = (token?: string): boolean => {
   if (!token) return false;
 
@@ -38,11 +34,6 @@ const isComplete = (data: Partial<SessionData>): boolean => {
 
 const label = createLabel("authorize", "green");
 
-/**
- * Fetches all connection configs and credentials for the user.
- * Only fetches credentials for connections with missing or expired credentials.
- * Returns updated session data and connection configs.
- */
 const fetchAllCredentials = async (
   sessionData: SessionData,
 ): Promise<{ sessionData: SessionData; connectionConfigs: ConnectionConfig[] }> => {
@@ -59,12 +50,6 @@ const fetchAllCredentials = async (
   };
 };
 
-/**
- * Middleware that validates and refreshes authentication tokens.
- * Fetches connection configs and credentials for all visible connections.
- * Sets validated session data in authContext for downstream use.
- * Export this from protected routes that require authentication.
- */
 export const authMiddleware: MiddlewareFunction = async ({ request, context }, next) => {
   console.info(`${label} ${request.method} ${request.url}`);
 
@@ -80,7 +65,6 @@ export const authMiddleware: MiddlewareFunction = async ({ request, context }, n
     let updatedSessionData = sessionData as SessionData;
     const { authTokens } = updatedSessionData;
 
-    // Verify idToken signature via JWKS
     const idTokenPayload = await verifyIdToken(authTokens.idToken);
 
     if (idTokenPayload) {
@@ -88,7 +72,6 @@ export const authMiddleware: MiddlewareFunction = async ({ request, context }, n
         await fetchAllCredentials(updatedSessionData);
       updatedSessionData = withCredentials;
 
-      // Only commit session if credentials changed
       if (updatedSessionData.credentials !== sessionData.credentials) {
         session.set("credentials", updatedSessionData.credentials);
         await sessionStorage.commitSession(session);
@@ -98,7 +81,6 @@ export const authMiddleware: MiddlewareFunction = async ({ request, context }, n
       return next();
     }
 
-    // If idToken is invalid but refreshToken is valid, refresh tokens
     if (isRefreshTokenValid(authTokens.refreshToken)) {
       console.info(`${label} Fetch new tokens and credentials`);
 
@@ -127,21 +109,17 @@ export const authMiddleware: MiddlewareFunction = async ({ request, context }, n
     }
   }
 
-  // Neither token is valid, logout
-  await logout(request.url, session);
+  return logout(request.url, session);
 };
 
-/**
- * Logs out the user by destroying the session and redirecting to the login page.
- * @param url Current request URL for redirect after login
- * @param session Cytario session to destroy
- * @throws Redirect to login page
- */
-const logout = async (url: string, session: CytarioSession) => {
+// Return the redirect rather than throwing it: under RR's middleware single-fetch
+// path a thrown redirect Response is caught and re-encoded as a 500, which
+// surfaces as `SingleFetchNoResultError` in the root ErrorBoundary.
+const logout = async (url: string, session: CytarioSession): Promise<Response> => {
   console.info(`${label} Delete session and redirect to login`);
   const requestUrl = new URL(url);
   const relativeUrl = requestUrl.pathname + requestUrl.search;
-  throw redirect(`/login?redirect=${encodeURIComponent(relativeUrl)}`, {
+  return redirect(`/login?redirect=${encodeURIComponent(relativeUrl)}`, {
     headers: {
       "Set-Cookie": await sessionStorage.destroySession(session),
     },

package/app/.server/auth/getSessionCredentials.ts

@@ -1,5 +1,6 @@
 import { AssumeRoleWithWebIdentityCommand, Credentials, STSClient } from "@aws-sdk/client-sts";
 
+import { buildSessionPolicy } from "./sessionPolicy";
 import { type ConnectionsCredentials, type SessionData } from "./sessionStorage";
 import { ConnectionConfig } from "~/.generated/client";
 import { createLabel } from "~/.server/logging";
@@ -34,7 +35,7 @@ const fetchTemporaryCredentials = async (
   idToken: string,
   roleSessionName: string,
 ): Promise<Credentials> => {
-  const { region, endpoint, roleArn } = connectionConfig;
+  const { region, endpoint, roleArn, provider, bucketName, prefix } = connectionConfig;
 
   const actualRegion = region ?? "eu-central-1";
   const providerConfig = getS3ProviderConfig(endpoint, actualRegion);
@@ -45,11 +46,20 @@ const fetchTemporaryCredentials = async (
       region: actualRegion,
     });
 
+    // Inline session policy is an AWS-specific STS feature: STS intersects it
+    // with the role's attached policy, so the minted credential cannot exceed
+    // the configured prefix scope even if the role itself is broader.
+    // Non-AWS providers (e.g. MinIO) may ignore or reject the `Policy` field,
+    // so we omit it there — the role's intrinsic scope is the only bound.
+    const sessionPolicy =
+      provider === "aws" ? buildSessionPolicy({ bucketName, prefix }) : undefined;
+
     const command = new AssumeRoleWithWebIdentityCommand({
       RoleArn: roleArn ?? undefined,
       RoleSessionName: roleSessionName,
       WebIdentityToken: idToken,
       DurationSeconds: 60 * 60 * 1, // 1 hour
+      ...(sessionPolicy ? { Policy: sessionPolicy } : {}),
     });
 
     const { Credentials } = await stsClient.send(command);

package/app/.server/auth/sessionPolicy.ts

@@ -0,0 +1,69 @@
+/**
+ * Builds an inline IAM session policy for `AssumeRoleWithWebIdentityCommand`.
+ *
+ * STS intersects this policy with the role's attached policy, so even if the
+ * underlying role permits more, the minted credential cannot escape the
+ * configured connection prefix.
+ *
+ * AWS-specific: non-AWS providers (MinIO) may ignore or reject `Policy`;
+ * guard the attachment behind `provider === "aws"`.
+ */
+
+export interface SessionPolicyArgs {
+  bucketName: string;
+  prefix: string | null | undefined;
+}
+
+const stripSlashes = (prefix: string): string => prefix.replace(/^\/+|\/+$/g, "");
+
+/** Build an inline IAM session policy for `AssumeRoleWithWebIdentityCommand`. */
+export const buildSessionPolicy = ({ bucketName, prefix }: SessionPolicyArgs): string => {
+  const normalised = typeof prefix === "string" ? stripSlashes(prefix) : "";
+  // Defense-in-depth: refuse wildcards here so the schema is not the only gate
+  // protecting cross-tenant `StringLike` conditions.
+  if (/[*?]/.test(normalised)) {
+    throw new Error("Prefix may not contain IAM wildcard characters (`*`, `?`)");
+  }
+  const hasPrefix = normalised.length > 0;
+
+  const bucketArn = `arn:aws:s3:::${bucketName}`;
+  const objectArn = hasPrefix ? `${bucketArn}/${normalised}/*` : `${bucketArn}/*`;
+
+  // Empty-prefix listing must omit `Condition`: AWS evaluates an absent
+  // `prefix` query parameter as `""`, and `StringLike "*"` does not match it.
+  // Allowed values must anchor on `/`, otherwise IAM allows
+  // `ListBucket prefix=foo` which S3 expands to siblings like `foobar.txt`.
+  const listStatement = hasPrefix
+    ? {
+        Sid: "ListBucketScopedToPrefix",
+        Effect: "Allow",
+        Action: "s3:ListBucket",
+        Resource: bucketArn,
+        Condition: {
+          StringLike: {
+            "s3:prefix": [`${normalised}/`, `${normalised}/*`],
+          },
+        },
+      }
+    : {
+        Sid: "ListBucketWholeBucket",
+        Effect: "Allow",
+        Action: "s3:ListBucket",
+        Resource: bucketArn,
+      };
+
+  const policy = {
+    Version: "2012-10-17",
+    Statement: [
+      listStatement,
+      {
+        Sid: "GetObjectScopedToPrefix",
+        Effect: "Allow",
+        Action: "s3:GetObject",
+        Resource: objectArn,
+      },
+    ],
+  };
+
+  return JSON.stringify(policy);
+};

package/app/.server/corsPreflight.ts

@@ -0,0 +1,136 @@
+/**
+ * Server-side CORS preflight probe run at connection create / update.
+ *
+ * Cytario's data plane is browser-direct, so the bucket must advertise a CORS
+ * policy that matches the cytario origin. Probe outcomes:
+ *   - `ok: false` — the browser will hard-block reads; the form rejects.
+ *   - `ok: true, warnings: ["wildcard_origin"]` — `ACAO: *` works today (the
+ *     read path is non-credentialed) but is flagged for operator hygiene.
+ */
+
+import { isAllowedS3Host } from "~/utils/s3HostAllowlist";
+import { SIGNED_REQUEST_HEADERS } from "~/utils/signedFetch";
+
+export type CorsPreflightFailureReason =
+  | "network"
+  | "missing_origin_header"
+  | "preflight_status"
+  | "host_not_allowed";
+
+export type CorsPreflightWarningReason = "wildcard_origin";
+
+export interface CorsPreflightResult {
+  ok: boolean;
+  reason?: CorsPreflightFailureReason;
+  warnings: CorsPreflightWarningReason[];
+  detail?: string;
+}
+
+const PREFLIGHT_TIMEOUT_MS = 5_000;
+
+/**
+ * Strips IPv4 / IPv6 literals from an error `detail` so the resolved IP of an
+ * upstream endpoint never reaches the operator UI — denies the probe as a
+ * port-scan oracle.
+ */
+export function redactIpLiterals(message: string): string {
+  let result = message.replace(/\b\d{1,3}(?:\.\d{1,3}){3}(?::\d+)?\b/g, "[redacted]");
+  result = result.replace(
+    /(?:[0-9a-fA-F]{1,4}:){1,7}(?::[0-9a-fA-F]{1,4}){1,7}|(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|::1|::/g,
+    "[redacted]",
+  );
+  return result;
+}
+
+/** Issue a CORS preflight against the bucket; wildcard ACAO surfaces as a warning. */
+export async function probeBucketCors(
+  bucketUrl: string,
+  cytarioOrigin: string,
+): Promise<CorsPreflightResult> {
+  // Refuse out-of-allowlist URLs so the probe can never be an SSRF oracle
+  // against IMDS / RFC1918 / loopback, independent of upstream form validation.
+  if (!isAllowedS3Host(bucketUrl)) {
+    return {
+      ok: false,
+      reason: "host_not_allowed",
+      warnings: [],
+      detail: "Host is not in the S3 allowlist",
+    };
+  }
+
+  let response: Response;
+  try {
+    response = await globalThis.fetch(bucketUrl, {
+      method: "OPTIONS",
+      headers: {
+        Origin: cytarioOrigin,
+        "Access-Control-Request-Method": "GET",
+        "Access-Control-Request-Headers": SIGNED_REQUEST_HEADERS.join(", "),
+      },
+      // Block redirects — a 30x would leak the Origin header onward and make
+      // the probe lie about the configured bucket.
+      redirect: "error",
+      signal: AbortSignal.timeout(PREFLIGHT_TIMEOUT_MS),
+    });
+  } catch (error) {
+    return {
+      ok: false,
+      reason: "network",
+      warnings: [],
+      detail: redactIpLiterals(error instanceof Error ? error.message : String(error)),
+    };
+  }
+
+  if (response.status < 200 || response.status >= 300) {
+    return {
+      ok: false,
+      reason: "preflight_status",
+      warnings: [],
+      detail: `Preflight returned HTTP ${response.status}`,
+    };
+  }
+
+  const allowOrigin = response.headers.get("access-control-allow-origin");
+  if (!allowOrigin) {
+    return {
+      ok: false,
+      reason: "missing_origin_header",
+      warnings: [],
+      detail: "Response did not include Access-Control-Allow-Origin",
+    };
+  }
+
+  const warnings: CorsPreflightWarningReason[] = [];
+  if (allowOrigin.trim() === "*") {
+    warnings.push("wildcard_origin");
+  }
+
+  return { ok: true, warnings };
+}
+
+/** Human-readable failure message shown on the connection form. */
+export function describeCorsFailure(result: CorsPreflightResult, cytarioOrigin: string): string {
+  switch (result.reason) {
+    case "network":
+      return "Could not reach the bucket from the cytario server. Check the endpoint URL and DNS.";
+    case "missing_origin_header":
+      return `Bucket does not advertise CORS for cytario. Configure the bucket's CORS policy to allow Origin ${cytarioOrigin}.`;
+    case "preflight_status":
+      return `Bucket rejected the cytario CORS preflight (${result.detail ?? "non-2xx response"}). Configure the bucket's CORS policy to allow Origin ${cytarioOrigin}.`;
+    case "host_not_allowed":
+      return `Bucket host is not in the cytario S3 allowlist. Ask the operator to add it to CYTARIO_ALLOWED_S3_HOSTS.`;
+    default:
+      return `Bucket CORS preflight failed: ${result.detail ?? "unknown error"}.`;
+  }
+}
+
+/** Human-readable message for a non-blocking warning. */
+export function describeCorsWarning(
+  warning: CorsPreflightWarningReason,
+  cytarioOrigin: string,
+): string {
+  switch (warning) {
+    case "wildcard_origin":
+      return `Bucket allows any origin (CORS: *). Consider restricting to ${cytarioOrigin}.`;
+  }
+}

package/app/.server/csp.ts

@@ -0,0 +1,34 @@
+import { getAllowedS3Hosts } from "~/utils/s3HostAllowlist";
+
+export { getAllowedS3Hosts };
+
+/** Build the CSP header value. Callers feed the env so tests can override it. */
+export function buildContentSecurityPolicy(
+  env: Record<string, string | undefined> = process.env,
+): string {
+  const connectSrc = ["'self'", ...getAllowedS3Hosts(env)].join(" ");
+
+  const directives: Record<string, string> = {
+    "default-src": "'self'",
+    "connect-src": connectSrc,
+    // `'unsafe-inline'` is required by React Router's streamed hydration
+    // bootstrap script. `'unsafe-eval'` is required by numcodecs' emscripten
+    // dyncall trampolines (Zarr v2 blosc / lz4 / zstd). `'wasm-unsafe-eval'`
+    // covers DuckDB WASM. TODO: drop `'unsafe-eval'` once codecs go CSP-clean.
+    "script-src": "'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'",
+    "style-src": "'self' 'unsafe-inline'",
+    "img-src": "'self' data: blob:",
+    "font-src": "'self' data:",
+    // DuckDB WASM spawns its main worker from a same-origin asset and uses
+    // `blob:` URLs internally for in-worker file buffers.
+    "worker-src": "'self' blob:",
+    "base-uri": "'self'",
+    "form-action": "'self'",
+    "object-src": "'none'",
+    "frame-ancestors": "'none'",
+  };
+
+  return Object.entries(directives)
+    .map(([directive, value]) => `${directive} ${value}`)
+    .join("; ");
+}

package/app/components/.client/ImageViewer/README.md

@@ -201,8 +201,8 @@ The viewer supports **offset sidecar files** (`.offsets.json`) for faster OME-TI
 ```
 Route Loader (server)
 ├── Detects OME-TIFF via getOffsetKeyForOmeTiff()
-├── Generates presigned URL for image
-├── Generates presigned URL for .offsets.json (in parallel)
+├── Provides signedFetch for direct SigV4-signed GetObject of image
+├── Provides signedFetch for direct SigV4-signed GetObject of .offsets.json (in parallel)
 └── Returns { url, offsetsUrl } to client
 
 ImageViewer (client)

package/app/components/DirectoryView/DirectoryViewGrid.tsx

@@ -35,7 +35,6 @@ const gridClasses: Partial<Record<ViewMode, string>> = {
   grid: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6",
 };
 
-/** Create a signedFetch that lazily resolves credentials from the connections store. */
 function useSignedFetch(connectionName: string) {
   const connectionConfig = useConnectionsStore(select.connectionConfig(connectionName));
 
@@ -57,8 +56,6 @@ function BucketCardGridItem({ node, connectionName }: { node: TreeNode; connecti
   const to = buildConnectionPath(connectionName, node.pathName);
   const handlePress = useCallback(() => navigate(to), [navigate, to]);
 
-  // Bucket nodes carry the first-image key from the connections loader on
-  // `_Object.Key` (already absolute — includes any configured prefix).
   const previewKey = node._Object?.Key ?? null;
   const hasPreview = !!previewKey && isImageFile(previewKey) && !!signedFetch;
   const s3Url = hasPreview && connectionConfig ? constructS3Url(connectionConfig, previewKey) : "";
@@ -66,9 +63,8 @@ function BucketCardGridItem({ node, connectionName }: { node: TreeNode; connecti
   return (
     <StorageConnectionCard
       name={node.name}
-      // TODO(C-151): hardcoded — not reflecting real connection state.
-      // Needs real semantics (credential hydration, reachability, index status).
-      status="connected"
+      status={node.connectionStatus ?? "loading"}
+      errorMessage={node.connectionErrorMessage}
       meta={
         connectionConfig && (
           <>
@@ -106,11 +102,6 @@ function FileCardGridItem({
   const handleInfo = useNodeInfoModal(node);
 
   const { connectionConfig: config, signedFetch } = useSignedFetch(connectionName);
-  // `_Object.Key` is absolute (prefix already applied) and set for both file
-  // nodes (from listing) and directory nodes (first image inside, via
-  // buildDirectoryTree). File nodes without `_Object` — e.g. recently-viewed
-  // entries reconstructed from DB — fall back to the resolver URL for the
-  // node's own resourceId.
   const explicitKey = node._Object?.Key ?? null;
   const resolvedHttpsUrl = useConnectionsStore(selectHttpsUrl(node.id));
 

package/app/components/DirectoryView/DirectoryViewTree.tsx

@@ -5,18 +5,14 @@ import { Link, useNavigate } from "react-router";
 import { type TreeNode } from "./buildDirectoryTree";
 import type { DirectoryKind } from "./DirectoryView";
 import { DirectoryViewEmptyState } from "./DirectoryViewEmptyState";
+import { useLazyTreeNodes } from "./useLazyTreeNodes";
 import { TooltipSpan } from "../Tooltip/TooltipSpan";
 import { getFileTypeIcon } from "~/utils/fileType";
 import { buildConnectionPath } from "~/utils/resourceId";
 
-/* ------------------------------------------------------------------ */
-/*  DirectoryViewTree                                                  */
-/* ------------------------------------------------------------------ */
-
 interface DirectoryViewTreeProps {
   /** The full (unfiltered) tree of nodes. Filtering is done via searchTerm. */
   nodes: TreeNode[];
-  /** Pass-through search term for the Tree component's built-in filtering. */
   searchTerm?: string;
   kind: DirectoryKind;
 }
@@ -34,20 +30,20 @@ export function NodeLinkIcon({ node }: { node: TreeNode }) {
 }
 
 /**
- * Thin wrapper around `@cytario/design`'s `<Tree>` (react-arborist under the
- * hood) that navigates on row activation. Used by the tree view mode in
- * `DirectoryView` and `recent.route.tsx`.
+ * Thin wrapper around `@cytario/design`'s `<Tree>` that navigates on row
+ * activation.
  *
- * @deprecated Planned for removal as part of tree consolidation — see
- * [C-150](https://app.plane.so/cytario/browse/C-150/). Once the design-system
- * `<Tree>` supports auto-height + controllable open state (or is rewritten),
- * this wrapper and {@link DirectoryTree} should collapse into a single
- * component used across the app.
+ * @deprecated Planned for removal as part of tree consolidation — C-150.
  */
-export function DirectoryViewTree({ nodes, searchTerm, kind }: DirectoryViewTreeProps) {
+export function DirectoryViewTree({
+  nodes: initialNodes,
+  searchTerm,
+  kind,
+}: DirectoryViewTreeProps) {
   const navigate = useNavigate();
+  const { nodes, loadChildren } = useLazyTreeNodes(initialNodes);
 
-  if (nodes.length === 0) return <DirectoryViewEmptyState kind={kind} />;
+  if (initialNodes.length === 0) return <DirectoryViewEmptyState kind={kind} />;
 
   return (
     <div className="overflow-hidden rounded-[var(--border-radius-md)] border border-[var(--color-border-default)]">
@@ -55,21 +51,20 @@ export function DirectoryViewTree({ nodes, searchTerm, kind }: DirectoryViewTree
         aria-label="Directory tree"
         data={nodes}
         selectionMode="none"
-        openByDefault
+        openByDefault={false}
         size="comfortable"
         height={600}
         searchTerm={searchTerm}
         searchMatch={(node, term) => node.name.toLowerCase().includes(term.toLowerCase())}
+        onToggle={(node) => {
+          void loadChildren(node).catch(() => {});
+        }}
         onActivate={(node) => navigate(buildConnectionPath(node.connectionName, node.pathName))}
       />
     </div>
   );
 }
 
-/* ------------------------------------------------------------------ */
-/*  Lightweight recursive tree (used by GlobalSearch / Suggestions)    */
-/* ------------------------------------------------------------------ */
-
 interface DirectoryTreeProps {
   nodes: TreeNode[];
   action?: (node: TreeNode) => void;
@@ -119,13 +114,10 @@ function DirectoryTreeRecursive({ nodes, action, className }: DirectoryTreeProps
 }
 
 /**
- * Simple recursive tree for search suggestions and lightweight contexts
- * where the design-system `<Tree>` (with its fixed height + virtualization)
- * doesn't fit. Used by `search.route.tsx` and `GlobalSearch/Suggestions.tsx`.
+ * Recursive tree for lightweight contexts where the design-system `<Tree>`
+ * (fixed height + virtualization) doesn't fit.
  *
- * @deprecated Planned for removal as part of tree consolidation — see
- * [C-150](https://app.plane.so/cytario/browse/C-150/). One unified tree
- * component should replace both this and {@link DirectoryViewTree}.
+ * @deprecated Planned for removal as part of tree consolidation — C-150.
  */
 export function DirectoryTree(props: DirectoryTreeProps) {
   return <DirectoryTreeRecursive {...props} />;