From caf8ef8542d1d8d24202c028858f410106683c5b Mon Sep 17 00:00:00 2001
From: Evgeny Shurakov <eshurakov@users.noreply.github.com>
Date: Wed, 4 Feb 2026 10:40:10 +0100
Subject: [PATCH 1/3] App Builder - Add preview URL tracking with navigation
 controls

Migrated from Kilo-Org/kilocode-backend#4705
---
 .../src/handlers/preview.ts                   | 141 +++++++++++++-
 .../app-builder/AppBuilderPreview.tsx         | 172 +++++++++++++++---
 src/components/app-builder/ProjectManager.ts  |  10 +
 .../__tests__/messages.test.ts                |   1 +
 .../__tests__/preview-polling.test.ts         |   1 +
 .../project-manager/__tests__/store.test.ts   |   1 +
 .../__tests__/streaming.test.ts               |   1 +
 .../app-builder/project-manager/store.ts      |   1 +
 .../app-builder/project-manager/types.ts      |   2 +
 9 files changed, 300 insertions(+), 30 deletions(-)

diff --git a/cloudflare-app-builder/src/handlers/preview.ts b/cloudflare-app-builder/src/handlers/preview.ts
index 97b962442a..3b39b3e934 100644
--- a/cloudflare-app-builder/src/handlers/preview.ts
+++ b/cloudflare-app-builder/src/handlers/preview.ts
@@ -5,6 +5,93 @@ import type { PreviewDO } from '../preview-do';
 import { getSandbox } from '@cloudflare/sandbox';
 import { switchPort } from '@cloudflare/containers';
 
+/**
+ * Adds a nonce to the script-src directive of a CSP header.
+ * If script-src doesn't exist, creates it based on default-src.
+ * Returns the modified CSP string.
+ */
+function addNonceToCSP(csp: string, nonce: string): string {
+  const nonceValue = `'nonce-${nonce}'`;
+  const directives = csp
+    .split(';')
+    .map(d => d.trim())
+    .filter(Boolean);
+
+  const directiveMap = new Map<string, string>();
+  for (const directive of directives) {
+    const spaceIndex = directive.indexOf(' ');
+    if (spaceIndex === -1) {
+      directiveMap.set(directive.toLowerCase(), '');
+    } else {
+      const name = directive.slice(0, spaceIndex).toLowerCase();
+      const value = directive.slice(spaceIndex + 1);
+      directiveMap.set(name, value);
+    }
+  }
+
+  if (directiveMap.has('script-src')) {
+    const current = directiveMap.get('script-src') ?? '';
+    directiveMap.set('script-src', `${current} ${nonceValue}`);
+  } else if (directiveMap.has('default-src')) {
+    // Create script-src from default-src and add nonce
+    const defaultSrc = directiveMap.get('default-src') ?? '';
+    directiveMap.set('script-src', `${defaultSrc} ${nonceValue}`);
+  } else {
+    // No script-src or default-src, add script-src with nonce
+    directiveMap.set('script-src', nonceValue);
+  }
+
+  // Reconstruct CSP string
+  const result: string[] = [];
+  for (const [name, value] of directiveMap) {
+    result.push(value ? `${name} ${value}` : name);
+  }
+  return result.join('; ');
+}
+
+/**
+ * Bridge script injected into HTML responses to enable URL tracking.
+ * Sends navigation events to the parent window via postMessage.
+ * Validates message origins before navigating to prevent unauthorized control.
+ * Note: The nonce attribute is added dynamically at injection time.
+ */
+const PREVIEW_BRIDGE_SCRIPT = `<script data-kilo-preview-bridge>
+(function() {
+  var send = function() {
+    window.parent.postMessage({
+      type: 'kilo-preview-navigation',
+      url: window.location.href,
+      pathname: window.location.pathname
+    }, '*');
+  };
+  send();
+  var wrap = function(fn) {
+    return function() {
+      var result = fn.apply(this, arguments);
+      send();
+      return result;
+    };
+  };
+  history.pushState = wrap(history.pushState);
+  history.replaceState = wrap(history.replaceState);
+  window.addEventListener('popstate', send);
+  window.addEventListener('message', function(e) {
+    // Validate origin: only accept navigation commands from the parent window
+    // and only navigate to URLs on the same origin as the current page
+    if (e.data && e.data.type === 'kilo-preview-navigate' && e.source === window.parent) {
+      try {
+        var targetUrl = new URL(e.data.url);
+        if (targetUrl.origin === window.location.origin) {
+          window.location.href = e.data.url;
+        }
+      } catch (err) {
+        // Invalid URL, ignore
+      }
+    }
+  });
+})();
+</script>`;
+
 function getPreviewDO(appId: string, env: Env): DurableObjectStub<PreviewDO> {
   const id = env.PREVIEW.idFromName(appId);
   return env.PREVIEW.get(id);
@@ -28,7 +115,13 @@ export async function handleGetPreviewStatus(
     const previewStub = getPreviewDO(appId, env);
     const { state, error } = await previewStub.getStatus();
 
-    const previewUrl = state === 'running' ? `https://${appId}.${env.BUILDER_HOSTNAME}` : null;
+    // In dev mode, return URL without subdomain (worker routes based on last accessed project)
+    const previewUrl =
+      state === 'running'
+        ? env.DEV_MODE
+          ? `https://${env.BUILDER_HOSTNAME}`
+          : `https://${appId}.${env.BUILDER_HOSTNAME}`
+        : null;
 
     return new Response(
       JSON.stringify({
@@ -205,6 +298,52 @@ export async function handlePreviewProxy(
 
     try {
       const response = await sandbox.containerFetch(proxyRequest, port);
+
+      // Inject preview bridge script into HTML responses for URL tracking
+      const contentType = response.headers.get('content-type');
+      if (contentType?.includes('text/html')) {
+        const html = await response.text();
+
+        // Generate a nonce for CSP-safe script injection
+        const nonce = crypto.randomUUID();
+        const scriptWithNonce = PREVIEW_BRIDGE_SCRIPT.replace(
+          '<script data-kilo-preview-bridge>',
+          `<script nonce="${nonce}" data-kilo-preview-bridge>`
+        );
+
+        let modifiedHtml: string;
+        if (html.includes('</head>')) {
+          modifiedHtml = html.replace('</head>', `${scriptWithNonce}</head>`);
+        } else if (html.includes('<body')) {
+          modifiedHtml = html.replace(/<body([^>]*)>/, `<body$1>${scriptWithNonce}`);
+        } else {
+          modifiedHtml = scriptWithNonce + html;
+        }
+
+        const newHeaders = new Headers(response.headers);
+        newHeaders.delete('content-length');
+        newHeaders.delete('content-encoding');
+
+        // Modify CSP headers to allow our nonced script
+        const csp = response.headers.get('content-security-policy');
+        if (csp) {
+          newHeaders.set('content-security-policy', addNonceToCSP(csp, nonce));
+        }
+        const cspReportOnly = response.headers.get('content-security-policy-report-only');
+        if (cspReportOnly) {
+          newHeaders.set(
+            'content-security-policy-report-only',
+            addNonceToCSP(cspReportOnly, nonce)
+          );
+        }
+
+        return new Response(modifiedHtml, {
+          status: response.status,
+          statusText: response.statusText,
+          headers: newHeaders,
+        });
+      }
+
       return response;
     } catch (error) {
       logger.error('Container proxy error', formatError(error));
diff --git a/src/components/app-builder/AppBuilderPreview.tsx b/src/components/app-builder/AppBuilderPreview.tsx
index 4025d2500c..bc38bcdf25 100644
--- a/src/components/app-builder/AppBuilderPreview.tsx
+++ b/src/components/app-builder/AppBuilderPreview.tsx
@@ -8,7 +8,7 @@
 
 'use client';
 
-import { useState, useCallback, useEffect, memo } from 'react';
+import { useState, useCallback, useEffect, useRef, memo } from 'react';
 import Link from 'next/link';
 import {
   Loader2,
@@ -18,6 +18,9 @@ import {
   ExternalLink,
   AlertCircle,
   Rocket,
+  Home,
+  Copy,
+  Check,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -111,8 +114,13 @@ function IframeLoadingOverlay() {
 
 type PreviewFrameProps = {
   url: string;
+  currentPath: string;
+  isAtRoot: boolean;
   isFullscreen: boolean;
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
   onRefresh: () => void;
+  onGoHome: () => void;
+  onCopyUrl: () => void;
   onToggleFullscreen: () => void;
   onOpenExternal: () => void;
 };
@@ -121,18 +129,35 @@ type PreviewFrameProps = {
  * Preview frame controls bar
  */
 function PreviewControls({
-  url,
+  currentPath,
+  isAtRoot,
   isFullscreen,
   onRefresh,
+  onGoHome,
+  onCopyUrl,
   onToggleFullscreen,
   onOpenExternal,
-}: PreviewFrameProps) {
+}: Omit<PreviewFrameProps, 'url' | 'iframeRef'>) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    onCopyUrl();
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [onCopyUrl]);
+
   return (
     <div className="flex items-center justify-between gap-4 border-b px-4 py-2">
       <div className="flex min-w-0 flex-1 items-center gap-2">
-        <span className="text-muted-foreground min-w-0 flex-1 truncate text-xs">{url}</span>
+        <Button variant="ghost" size="sm" onClick={onGoHome} disabled={isAtRoot} title="Go to home">
+          <Home className="h-4 w-4" />
+        </Button>
+        <span className="text-muted-foreground min-w-0 flex-1 truncate text-xs">{currentPath}</span>
       </div>
       <div className="flex items-center gap-1">
+        <Button variant="ghost" size="sm" onClick={handleCopy} title="Copy URL">
+          {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+        </Button>
         <Button variant="ghost" size="sm" onClick={onRefresh} title="Refresh preview">
           <RefreshCw className="h-4 w-4" />
         </Button>
@@ -152,29 +177,22 @@ function PreviewControls({
   );
 }
 
-const isDev = process.env.NODE_ENV === 'development';
-
-/** In dev, remove subdomain: "https://app-id.builder.kiloapps.io/path" -> "https://builder.kiloapps.io/" */
-function getPreviewUrl(url: string): string {
-  if (!isDev) return url;
-  try {
-    const parsed = new URL(url);
-    const parts = parsed.hostname.split('.');
-    if (parts.length > 2) {
-      parsed.hostname = parts.slice(1).join('.');
-    }
-    parsed.pathname = '/';
-    return parsed.toString();
-  } catch {
-    return url;
-  }
-}
-
 /**
  * Preview iframe with controls - renders dev or production iframe based on environment
  */
 function PreviewFrame(props: PreviewFrameProps) {
-  const { url, isFullscreen } = props;
+  const {
+    url,
+    currentPath,
+    isAtRoot,
+    isFullscreen,
+    iframeRef,
+    onRefresh,
+    onGoHome,
+    onCopyUrl,
+    onToggleFullscreen,
+    onOpenExternal,
+  } = props;
   const [isIframeLoading, setIsIframeLoading] = useState(true);
 
   // Reset loading state when URL changes
@@ -188,11 +206,21 @@ function PreviewFrame(props: PreviewFrameProps) {
 
   return (
     <div className={cn('flex h-full flex-col', isFullscreen && 'bg-background fixed inset-0 z-50')}>
-      <PreviewControls {...props} />
+      <PreviewControls
+        currentPath={currentPath}
+        isAtRoot={isAtRoot}
+        isFullscreen={isFullscreen}
+        onRefresh={onRefresh}
+        onGoHome={onGoHome}
+        onCopyUrl={onCopyUrl}
+        onToggleFullscreen={onToggleFullscreen}
+        onOpenExternal={onOpenExternal}
+      />
       <div className="relative flex-1">
         {isIframeLoading && <IframeLoadingOverlay />}
         <iframe
-          src={getPreviewUrl(url)}
+          ref={iframeRef}
+          src={url}
           className="h-full w-full border-0"
           sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
           title="App Preview"
@@ -311,6 +339,15 @@ function DeploymentControls({ state, onDeploy }: { state: DeploymentState; onDep
   }
 }
 
+/** Extract pathname from URL, stripping query params */
+function getPathFromUrl(url: string): string {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return '/';
+  }
+}
+
 /**
  * Main preview component
  */
@@ -319,12 +356,59 @@ export const AppBuilderPreview = memo(function AppBuilderPreview({
 }: AppBuilderPreviewProps) {
   // Get state and manager from ProjectSession context
   const { manager, state } = useProject();
-  const { previewUrl, previewStatus, deploymentId } = state;
+  const { previewUrl, previewStatus, deploymentId, currentIframeUrl } = state;
   const projectId = manager.projectId;
 
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [iframeKey, setIframeKey] = useState(0);
   const [isCreatingDeployment, setIsCreatingDeployment] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Derive current path from tracked URL or fall back to previewUrl
+  const currentPath = currentIframeUrl
+    ? getPathFromUrl(currentIframeUrl)
+    : previewUrl
+      ? getPathFromUrl(previewUrl)
+      : '/';
+  const isAtRoot = currentPath === '/';
+
+  // Listen for postMessage navigation events from the preview iframe
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      // Validate origin: only accept messages from the preview iframe's origin
+      // and verify the message comes from the iframe's content window
+      if (!previewUrl) return;
+      let previewOrigin: string;
+      try {
+        previewOrigin = new URL(previewUrl).origin;
+      } catch {
+        return;
+      }
+      if (event.origin !== previewOrigin) return;
+      if (event.source !== iframeRef.current?.contentWindow) return;
+
+      if (event.data?.type === 'kilo-preview-navigation') {
+        // Validate that the reported URL's origin matches the preview origin
+        // to prevent a compromised app from injecting arbitrary external URLs
+        try {
+          const reportedUrl = event.data.url;
+          if (typeof reportedUrl === 'string' && new URL(reportedUrl).origin === previewOrigin) {
+            manager.setCurrentIframeUrl(reportedUrl);
+          }
+        } catch {
+          // Invalid URL, ignore
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [manager, previewUrl]);
+
+  // Reset currentIframeUrl when previewUrl changes
+  useEffect(() => {
+    manager.setCurrentIframeUrl(null);
+  }, [previewUrl, manager]);
 
   // Get tRPC for queries
   const trpc = useTRPC();
@@ -385,19 +469,44 @@ export const AppBuilderPreview = memo(function AppBuilderPreview({
   }, [previewUrl, previewStatus]);
 
   const handleRefresh = useCallback(() => {
+    manager.setCurrentIframeUrl(null);
     setIframeKey(prev => prev + 1);
-  }, []);
+  }, [manager]);
 
   const handleToggleFullscreen = useCallback(() => {
     setIsFullscreen(prev => !prev);
   }, []);
 
   const handleOpenExternal = useCallback(() => {
-    if (previewUrl) {
-      window.open(previewUrl, '_blank');
+    const urlToOpen = currentIframeUrl || previewUrl;
+    if (urlToOpen) {
+      window.open(urlToOpen, '_blank');
+    }
+  }, [currentIframeUrl, previewUrl]);
+
+  const handleGoHome = useCallback(() => {
+    if (previewUrl && iframeRef.current?.contentWindow) {
+      const baseUrl = new URL(previewUrl);
+      baseUrl.pathname = '/';
+      baseUrl.search = '';
+      iframeRef.current.contentWindow.postMessage(
+        { type: 'kilo-preview-navigate', url: baseUrl.toString() },
+        baseUrl.origin
+      );
     }
   }, [previewUrl]);
 
+  const handleCopyUrl = useCallback(async () => {
+    const urlToCopy = currentIframeUrl || previewUrl;
+    if (urlToCopy) {
+      try {
+        await navigator.clipboard.writeText(urlToCopy);
+      } catch {
+        toast.error('Failed to copy URL to clipboard');
+      }
+    }
+  }, [currentIframeUrl, previewUrl]);
+
   // Handle deploy using ProjectManager
   const handleDeploy = useCallback(async () => {
     setIsCreatingDeployment(true);
@@ -445,8 +554,13 @@ export const AppBuilderPreview = memo(function AppBuilderPreview({
           <PreviewFrame
             key={iframeKey}
             url={previewUrl}
+            currentPath={currentPath}
+            isAtRoot={isAtRoot}
             isFullscreen={isFullscreen}
+            iframeRef={iframeRef}
             onRefresh={handleRefresh}
+            onGoHome={handleGoHome}
+            onCopyUrl={handleCopyUrl}
             onToggleFullscreen={handleToggleFullscreen}
             onOpenExternal={handleOpenExternal}
           />
diff --git a/src/components/app-builder/ProjectManager.ts b/src/components/app-builder/ProjectManager.ts
index 03e7e9801d..2e5d057b5d 100644
--- a/src/components/app-builder/ProjectManager.ts
+++ b/src/components/app-builder/ProjectManager.ts
@@ -41,6 +41,8 @@ export type ProjectState = {
   previewStatus: PreviewStatus;
   deploymentId: string | null;
   model: string;
+  /** Current URL the user is viewing in the preview iframe (tracked via postMessage) */
+  currentIframeUrl: string | null;
 };
 
 export type ProjectManagerConfig = {
@@ -175,6 +177,14 @@ export class ProjectManager {
     this.streamingCoordinator.sendMessage(message, images, model);
   }
 
+  /**
+   * Update the current iframe URL (called from preview component via postMessage listener).
+   * @param url - The current URL in the preview iframe, or null to clear
+   */
+  setCurrentIframeUrl(url: string | null): void {
+    this.store.setState({ currentIframeUrl: url });
+  }
+
   /** Interrupt the current streaming response. */
   interrupt(): void {
     this.streamingCoordinator.interrupt();
diff --git a/src/components/app-builder/project-manager/__tests__/messages.test.ts b/src/components/app-builder/project-manager/__tests__/messages.test.ts
index eac128e8fd..adc54b1ee3 100644
--- a/src/components/app-builder/project-manager/__tests__/messages.test.ts
+++ b/src/components/app-builder/project-manager/__tests__/messages.test.ts
@@ -22,6 +22,7 @@ function createMockStore(initialMessages: CloudMessage[] = []): ProjectStore {
       previewStatus: 'idle' as const,
       deploymentId: null,
       model: 'anthropic/claude-sonnet-4',
+      currentIframeUrl: null,
     }),
     setState: jest.fn(partial => {
       if (partial.messages) {
diff --git a/src/components/app-builder/project-manager/__tests__/preview-polling.test.ts b/src/components/app-builder/project-manager/__tests__/preview-polling.test.ts
index 90f7db65a6..d543dc44b5 100644
--- a/src/components/app-builder/project-manager/__tests__/preview-polling.test.ts
+++ b/src/components/app-builder/project-manager/__tests__/preview-polling.test.ts
@@ -18,6 +18,7 @@ function createMockStore(): ProjectStore & { stateUpdates: Array<Record<string,
     previewStatus: 'idle',
     deploymentId: null,
     model: 'anthropic/claude-sonnet-4',
+    currentIframeUrl: null,
   };
 
   return {
diff --git a/src/components/app-builder/project-manager/__tests__/store.test.ts b/src/components/app-builder/project-manager/__tests__/store.test.ts
index 8ea06bc6d3..ee91735aa5 100644
--- a/src/components/app-builder/project-manager/__tests__/store.test.ts
+++ b/src/components/app-builder/project-manager/__tests__/store.test.ts
@@ -53,6 +53,7 @@ describe('createProjectStore', () => {
     previewStatus: 'idle',
     deploymentId: null,
     model: 'anthropic/claude-sonnet-4',
+    currentIframeUrl: null,
   };
 
   describe('getState', () => {
diff --git a/src/components/app-builder/project-manager/__tests__/streaming.test.ts b/src/components/app-builder/project-manager/__tests__/streaming.test.ts
index 0313db64a5..08185c02a2 100644
--- a/src/components/app-builder/project-manager/__tests__/streaming.test.ts
+++ b/src/components/app-builder/project-manager/__tests__/streaming.test.ts
@@ -35,6 +35,7 @@ function createMockStore(): ProjectStore & { stateUpdates: Array<Record<string,
     previewStatus: 'idle',
     deploymentId: null,
     model: 'anthropic/claude-sonnet-4',
+    currentIframeUrl: null,
   };
 
   return {
diff --git a/src/components/app-builder/project-manager/store.ts b/src/components/app-builder/project-manager/store.ts
index eec9e47e4e..8fe44f6e77 100644
--- a/src/components/app-builder/project-manager/store.ts
+++ b/src/components/app-builder/project-manager/store.ts
@@ -28,6 +28,7 @@ export function createInitialState(
     previewStatus: 'idle',
     deploymentId,
     model: modelId ?? 'anthropic/claude-sonnet-4',
+    currentIframeUrl: null,
   };
 }
 
diff --git a/src/components/app-builder/project-manager/types.ts b/src/components/app-builder/project-manager/types.ts
index 5f718e6297..c9ff088cdd 100644
--- a/src/components/app-builder/project-manager/types.ts
+++ b/src/components/app-builder/project-manager/types.ts
@@ -29,6 +29,8 @@ export type ProjectState = {
   previewStatus: PreviewStatus;
   deploymentId: string | null;
   model: string;
+  /** Current URL the user is viewing in the preview iframe (tracked via postMessage) */
+  currentIframeUrl: string | null;
 };
 
 // =============================================================================

From 7a63992ffb0988b383bdd0afed6cfdfd468d706f Mon Sep 17 00:00:00 2001
From: Evgeny Shurakov <eshurakov@users.noreply.github.com>
Date: Wed, 4 Feb 2026 10:56:33 +0100
Subject: [PATCH 2/3] Improve CSP nonce handling and copy URL feedback

- Use base64-encoded nonce instead of UUID for better CSP compatibility
- Handle 'none' directive by replacing rather than appending
- Also update script-src-elem when present (takes precedence for script tags)
- Fix copy URL to show success only when clipboard write succeeds
- Add cleanup for timeout on unmount to prevent setState warnings
- Add noopener,noreferrer to window.open for security
- Add try-catch for URL parsing in handleGoHome
---
 .../src/handlers/preview.ts                   | 58 ++++++++++++++-----
 .../app-builder/AppBuilderPreview.tsx         | 50 +++++++++++-----
 2 files changed, 79 insertions(+), 29 deletions(-)

diff --git a/cloudflare-app-builder/src/handlers/preview.ts b/cloudflare-app-builder/src/handlers/preview.ts
index 3b39b3e934..76f0011299 100644
--- a/cloudflare-app-builder/src/handlers/preview.ts
+++ b/cloudflare-app-builder/src/handlers/preview.ts
@@ -5,9 +5,33 @@ import type { PreviewDO } from '../preview-do';
 import { getSandbox } from '@cloudflare/sandbox';
 import { switchPort } from '@cloudflare/containers';
 
+/**
+ * Generates a cryptographically secure base64-encoded nonce for CSP.
+ * Uses 16 random bytes (128 bits) encoded as base64.
+ */
+function generateCSPNonce(): string {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  return btoa(String.fromCharCode(...bytes));
+}
+
+/**
+ * Adds a nonce to a CSP directive value.
+ * Handles the special case where 'none' is present (must be replaced, not appended).
+ */
+function addNonceToDirective(value: string, nonceValue: string): string {
+  // If directive contains 'none', replace it with the nonce (since 'none' must be alone)
+  if (value.includes("'none'")) {
+    return value.replace("'none'", nonceValue);
+  }
+  return `${value} ${nonceValue}`;
+}
+
 /**
  * Adds a nonce to the script-src directive of a CSP header.
+ * Also updates script-src-elem if present (since it takes precedence for <script> tags).
  * If script-src doesn't exist, creates it based on default-src.
+ * Handles 'none' by replacing it (since 'none' cannot be combined with other sources).
  * Returns the modified CSP string.
  */
 function addNonceToCSP(csp: string, nonce: string): string {
@@ -31,16 +55,22 @@ function addNonceToCSP(csp: string, nonce: string): string {
 
   if (directiveMap.has('script-src')) {
     const current = directiveMap.get('script-src') ?? '';
-    directiveMap.set('script-src', `${current} ${nonceValue}`);
+    directiveMap.set('script-src', addNonceToDirective(current, nonceValue));
   } else if (directiveMap.has('default-src')) {
     // Create script-src from default-src and add nonce
     const defaultSrc = directiveMap.get('default-src') ?? '';
-    directiveMap.set('script-src', `${defaultSrc} ${nonceValue}`);
+    directiveMap.set('script-src', addNonceToDirective(defaultSrc, nonceValue));
   } else {
     // No script-src or default-src, add script-src with nonce
     directiveMap.set('script-src', nonceValue);
   }
 
+  // Also update script-src-elem if present (takes precedence over script-src for <script> tags)
+  if (directiveMap.has('script-src-elem')) {
+    const current = directiveMap.get('script-src-elem') ?? '';
+    directiveMap.set('script-src-elem', addNonceToDirective(current, nonceValue));
+  }
+
   // Reconstruct CSP string
   const result: string[] = [];
   for (const [name, value] of directiveMap) {
@@ -50,12 +80,12 @@ function addNonceToCSP(csp: string, nonce: string): string {
 }
 
 /**
- * Bridge script injected into HTML responses to enable URL tracking.
- * Sends navigation events to the parent window via postMessage.
+ * Generates the bridge script tag with the given nonce for CSP compliance.
+ * The script enables URL tracking by sending navigation events to the parent window.
  * Validates message origins before navigating to prevent unauthorized control.
- * Note: The nonce attribute is added dynamically at injection time.
  */
-const PREVIEW_BRIDGE_SCRIPT = `<script data-kilo-preview-bridge>
+function getPreviewBridgeScript(nonce: string): string {
+  return `<script nonce="${nonce}" data-kilo-preview-bridge>
 (function() {
   var send = function() {
     window.parent.postMessage({
@@ -91,6 +121,7 @@ const PREVIEW_BRIDGE_SCRIPT = `<script data-kilo-preview-bridge>
   });
 })();
 </script>`;
+}
 
 function getPreviewDO(appId: string, env: Env): DurableObjectStub<PreviewDO> {
   const id = env.PREVIEW.idFromName(appId);
@@ -304,20 +335,17 @@ export async function handlePreviewProxy(
       if (contentType?.includes('text/html')) {
         const html = await response.text();
 
-        // Generate a nonce for CSP-safe script injection
-        const nonce = crypto.randomUUID();
-        const scriptWithNonce = PREVIEW_BRIDGE_SCRIPT.replace(
-          '<script data-kilo-preview-bridge>',
-          `<script nonce="${nonce}" data-kilo-preview-bridge>`
-        );
+        // Generate a base64 nonce for CSP-safe script injection
+        const nonce = generateCSPNonce();
+        const bridgeScript = getPreviewBridgeScript(nonce);
 
         let modifiedHtml: string;
         if (html.includes('</head>')) {
-          modifiedHtml = html.replace('</head>', `${scriptWithNonce}</head>`);
+          modifiedHtml = html.replace('</head>', `${bridgeScript}</head>`);
         } else if (html.includes('<body')) {
-          modifiedHtml = html.replace(/<body([^>]*)>/, `<body$1>${scriptWithNonce}`);
+          modifiedHtml = html.replace(/<body([^>]*)>/, `<body$1>${bridgeScript}`);
         } else {
-          modifiedHtml = scriptWithNonce + html;
+          modifiedHtml = bridgeScript + html;
         }
 
         const newHeaders = new Headers(response.headers);
diff --git a/src/components/app-builder/AppBuilderPreview.tsx b/src/components/app-builder/AppBuilderPreview.tsx
index bc38bcdf25..520481e0b0 100644
--- a/src/components/app-builder/AppBuilderPreview.tsx
+++ b/src/components/app-builder/AppBuilderPreview.tsx
@@ -120,7 +120,7 @@ type PreviewFrameProps = {
   iframeRef: React.RefObject<HTMLIFrameElement | null>;
   onRefresh: () => void;
   onGoHome: () => void;
-  onCopyUrl: () => void;
+  onCopyUrl: () => Promise<boolean>;
   onToggleFullscreen: () => void;
   onOpenExternal: () => void;
 };
@@ -139,11 +139,26 @@ function PreviewControls({
   onOpenExternal,
 }: Omit<PreviewFrameProps, 'url' | 'iframeRef'>) {
   const [copied, setCopied] = useState(false);
+  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const handleCopy = useCallback(() => {
-    onCopyUrl();
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
+  // Clear timeout on unmount to prevent setState on unmounted component
+  useEffect(() => {
+    return () => {
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    const success = await onCopyUrl();
+    if (success) {
+      setCopied(true);
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = setTimeout(() => setCopied(false), 1500);
+    }
   }, [onCopyUrl]);
 
   return (
@@ -480,31 +495,38 @@ export const AppBuilderPreview = memo(function AppBuilderPreview({
   const handleOpenExternal = useCallback(() => {
     const urlToOpen = currentIframeUrl || previewUrl;
     if (urlToOpen) {
-      window.open(urlToOpen, '_blank');
+      window.open(urlToOpen, '_blank', 'noopener,noreferrer');
     }
   }, [currentIframeUrl, previewUrl]);
 
   const handleGoHome = useCallback(() => {
     if (previewUrl && iframeRef.current?.contentWindow) {
-      const baseUrl = new URL(previewUrl);
-      baseUrl.pathname = '/';
-      baseUrl.search = '';
-      iframeRef.current.contentWindow.postMessage(
-        { type: 'kilo-preview-navigate', url: baseUrl.toString() },
-        baseUrl.origin
-      );
+      try {
+        const baseUrl = new URL(previewUrl);
+        baseUrl.pathname = '/';
+        baseUrl.search = '';
+        iframeRef.current.contentWindow.postMessage(
+          { type: 'kilo-preview-navigate', url: baseUrl.toString() },
+          baseUrl.origin
+        );
+      } catch {
+        // Invalid previewUrl, ignore
+      }
     }
   }, [previewUrl]);
 
-  const handleCopyUrl = useCallback(async () => {
+  const handleCopyUrl = useCallback(async (): Promise<boolean> => {
     const urlToCopy = currentIframeUrl || previewUrl;
     if (urlToCopy) {
       try {
         await navigator.clipboard.writeText(urlToCopy);
+        return true;
       } catch {
         toast.error('Failed to copy URL to clipboard');
+        return false;
       }
     }
+    return false;
   }, [currentIframeUrl, previewUrl]);
 
   // Handle deploy using ProjectManager

From 3dc981f0c33effef8a790b673c43a00b1134a2e8 Mon Sep 17 00:00:00 2001
From: Evgeny Shurakov <eshurakov@users.noreply.github.com>
Date: Wed, 4 Feb 2026 11:02:24 +0100
Subject: [PATCH 3/3] Use HTMLRewriter for streaming bridge script injection

---
 .../src/handlers/preview.ts                   | 46 ++++++++++++++-----
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/cloudflare-app-builder/src/handlers/preview.ts b/cloudflare-app-builder/src/handlers/preview.ts
index 76f0011299..189b7981eb 100644
--- a/cloudflare-app-builder/src/handlers/preview.ts
+++ b/cloudflare-app-builder/src/handlers/preview.ts
@@ -331,23 +331,13 @@ export async function handlePreviewProxy(
       const response = await sandbox.containerFetch(proxyRequest, port);
 
       // Inject preview bridge script into HTML responses for URL tracking
+      // Uses HTMLRewriter for streaming transformation (avoids buffering entire response)
       const contentType = response.headers.get('content-type');
       if (contentType?.includes('text/html')) {
-        const html = await response.text();
-
         // Generate a base64 nonce for CSP-safe script injection
         const nonce = generateCSPNonce();
         const bridgeScript = getPreviewBridgeScript(nonce);
 
-        let modifiedHtml: string;
-        if (html.includes('</head>')) {
-          modifiedHtml = html.replace('</head>', `${bridgeScript}</head>`);
-        } else if (html.includes('<body')) {
-          modifiedHtml = html.replace(/<body([^>]*)>/, `<body$1>${bridgeScript}`);
-        } else {
-          modifiedHtml = bridgeScript + html;
-        }
-
         const newHeaders = new Headers(response.headers);
         newHeaders.delete('content-length');
         newHeaders.delete('content-encoding');
@@ -365,7 +355,39 @@ export async function handlePreviewProxy(
           );
         }
 
-        return new Response(modifiedHtml, {
+        // Track whether we've injected the script (only inject once)
+        let injected = false;
+
+        const rewriter = new HTMLRewriter()
+          // Prefer injecting at end of <head> (best practice for scripts)
+          .on('head', {
+            element(element) {
+              if (!injected) {
+                element.append(bridgeScript, { html: true });
+                injected = true;
+              }
+            },
+          })
+          // Fallback: inject at start of <body> if no <head>
+          .on('body', {
+            element(element) {
+              if (!injected) {
+                element.prepend(bridgeScript, { html: true });
+                injected = true;
+              }
+            },
+          })
+          // Final fallback: append to document end if no <head> or <body>
+          .onDocument({
+            end(end) {
+              if (!injected) {
+                end.append(bridgeScript, { html: true });
+              }
+            },
+          });
+
+        const transformedResponse = rewriter.transform(response);
+        return new Response(transformedResponse.body, {
           status: response.status,
           statusText: response.statusText,
           headers: newHeaders,