fix(web): allow integration logos through CSP (#117)

## Summary

- allow the exact Composio logo origin in the browser `img-src` policy
so skill cards render their brand marks
- remove the redundant Next.js `remotePatterns` entry because these SVGs
use `unoptimized` and bypass the optimizer
- route browser takeover through Cheatcode's authenticated preview proxy
instead of adding Daytona vendor hosts to `frame-src`

## Architecture

The web app remains deny-by-default at the browser boundary. Integration
logo URLs and the CSP origin share one constant. All sandbox iframes,
including noVNC browser takeover, now stay behind the existing
`*.trycheatcode.com` preview-proxy boundary.

## Decisions Made

| Decision | Choice | Alternative | Reasoning |
|---|---|---|---|
| Logo permission | exact `https://logos.composio.dev` `img-src` origin
| wildcard image hosts | smallest permission that serves the catalog |
| Next image config | remove `remotePatterns` | maintain two allowlists
| `unoptimized` returns the raw source and does not use the optimizer
allowlist |
| Browser takeover | owned preview proxy | allow Daytona preview apexes
in `frame-src` | avoids vendor-domain CSP expansion and matches the
documented preview architecture |

## Edge Cases Handled

| Scenario | Handling |
|---|---|
| malformed or unusual integration slug | URL path segment is encoded
before rendering |
| logo endpoint fails | existing initials fallback remains in place |
| noVNC WebSocket traffic | existing preview proxy WebSocket relay
remains the transport |
| local preview routing | existing local preview handoff supports the
generated proxy URL |

## How to Review

1. Review `apps/web/next.config.ts` and
`apps/web/src/lib/integration-logo.ts` for the CSP boundary.
2. Review `integration-brand-logo.tsx` for the shared URL builder.
3. Review `project-sandbox-content.ts` for the browser-takeover proxy
alignment.

## Verification

- [x] `pnpm lint`
- [x] `pnpm typecheck`
- [x] `pnpm turbo build --force`
- [x] `pnpm turbo skills:build`
- [x] `pnpm deadcode`
- [x] `pnpm architecture:check`
- [x] optimized local server returned the production CSP with the
Composio origin
- [x] Chrome loaded `https://logos.composio.dev/api/gmail` under that
CSP at 128×128

Author: iamjr15

apps/agent-worker/src/durable-objects/project-sandbox-content.ts

@@ -378,11 +378,16 @@ async function browserTakeoverResult(
   password: string,
 ): Promise<ProjectBrowserTakeoverResult> {
   const id = await runtime.ensureSandbox();
-  const signed = await runtime.client().getSignedPreviewUrl(id, port, input.expiresInSeconds);
+  const preview = await buildPreviewUrl({
+    hostname: runtime.previewHostname(),
+    port,
+    sandboxId: id,
+    secret: await runtime.previewSecret(),
+  });
   return {
     expiresAt: new Date(Date.now() + input.expiresInSeconds * 1_000).toISOString(),
     takeoverId: input.takeoverId,
-    url: noVncSessionUrl(signed.url, password),
+    url: noVncSessionUrl(preview.url, password),
   };
 }
 

apps/web/next.config.ts

@@ -2,6 +2,7 @@ import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
 import { parseWebBuildEnvironment, WEB_APPLICATION_ENV_KEYS } from "@cheatcode/env/web-config";
 import type { NextConfig } from "next";
+import { INTEGRATION_LOGO_ORIGIN } from "./src/lib/integration-logo";
 
 const REPOSITORY_ROOT = fileURLToPath(new URL("../..", import.meta.url));
 const { loadEnvConfig } = createRequire(import.meta.url)("@next/env") as typeof import("@next/env");
@@ -50,7 +51,7 @@ const CONTENT_SECURITY_POLICY = [
   "frame-ancestors 'none'",
   `script-src 'self' 'unsafe-inline' ${CLERK_FRONTEND_ORIGIN} https://challenges.cloudflare.com`,
   "style-src 'self' 'unsafe-inline'",
-  "img-src 'self' data: blob: https://img.clerk.com",
+  `img-src 'self' data: blob: https://img.clerk.com ${INTEGRATION_LOGO_ORIGIN}`,
   "font-src 'self' data:",
   "media-src 'self' data: blob:",
   `connect-src 'self' ${GATEWAY_ORIGIN} ${PREVIEW_HTTPS_ORIGIN} ${PREVIEW_WSS_ORIGIN} ${CLERK_FRONTEND_ORIGIN} ${CLERK_WEBSOCKET_ORIGIN}`,
@@ -87,7 +88,6 @@ const nextConfig = {
   images: {
     qualities: [75],
     minimumCacheTTL: 14_400,
-    remotePatterns: [{ hostname: "logos.composio.dev", protocol: "https" }],
   },
 } satisfies NextConfig;
 

apps/web/src/components/skills/integration-brand-logo.tsx

@@ -2,6 +2,7 @@
 
 import Image from "next/image";
 import { useState } from "react";
+import { integrationLogoUrl } from "@/lib/integration-logo";
 import { cn } from "@/lib/ui/cn";
 
 const DARK_INVERT_LOGOS = new Set(["dub", "github", "notion"]);
@@ -36,7 +37,7 @@ export function IntegrationBrandLogo({
           height={size === "menu" ? 16 : 20}
           loading="eager"
           onError={() => setHasFailed(true)}
-          src={`https://logos.composio.dev/api/${slug}`}
+          src={integrationLogoUrl(slug)}
           unoptimized
           width={size === "menu" ? 16 : 20}
         />

apps/web/src/lib/integration-logo.ts

@@ -0,0 +1,5 @@
+export const INTEGRATION_LOGO_ORIGIN = "https://logos.composio.dev";
+
+export function integrationLogoUrl(slug: string): string {
+  return `${INTEGRATION_LOGO_ORIGIN}/api/${encodeURIComponent(slug)}`;
+}