Merge pull request #390 from cloudflare/nightly

Nightly -> Main

Author: karishnu

src/lib/utils.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest';
+import { getRegistrableDomain } from './utils';
+
+// Note: `isCrossSitePreview` and `isAppleWebKitBrowser` depend on `window`/
+// `navigator` and are exercised in the browser, not this workers-pool harness.
+// The registrable-domain heuristic they build on is pure and covered here.
+describe('getRegistrableDomain', () => {
+	it('returns the eTLD+1 for simple hosts', () => {
+		expect(getRegistrableDomain('app.example.com')).toBe('example.com');
+		expect(getRegistrableDomain('preview.example.com')).toBe('example.com');
+		expect(getRegistrableDomain('example.com')).toBe('example.com');
+	});
+
+	it('treats different registrable domains as distinct', () => {
+		expect(getRegistrableDomain('myapp.com')).not.toBe(
+			getRegistrableDomain('mypreview.dev'),
+		);
+	});
+
+	it('handles common multi-part public suffixes', () => {
+		expect(getRegistrableDomain('app.example.co.uk')).toBe('example.co.uk');
+		expect(getRegistrableDomain('preview.example.com.au')).toBe('example.com.au');
+	});
+
+	it('strips the port and trailing dot, and lowercases', () => {
+		expect(getRegistrableDomain('App.Example.com:8080')).toBe('example.com');
+		expect(getRegistrableDomain('example.com.')).toBe('example.com');
+	});
+
+	it('handles single-label and empty hosts', () => {
+		expect(getRegistrableDomain('localhost')).toBe('localhost');
+		expect(getRegistrableDomain('')).toBe('');
+	});
+});

src/lib/utils.ts

@@ -15,4 +15,80 @@ export function capitalizeFirstLetter(str: string) {
     return str; // Handle non-string input or empty string
   }
   return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Detect Apple/WebKit browsers subject to Intelligent Tracking Prevention
+ * (ITP), which blocks third-party cookies for an origin embedded in a
+ * cross-site iframe. This covers desktop Safari and every iOS/iPadOS browser
+ * (all use WebKit). Best-effort UA sniffing; used only to decide whether to
+ * show an advisory banner.
+ */
+export function isAppleWebKitBrowser(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent;
+  const isIOS = /iPhone|iPad|iPod/.test(ua);
+  // iPadOS 13+ reports as "Macintosh" but exposes touch points.
+  const isIPadOS =
+    /Macintosh/.test(ua) &&
+    typeof navigator.maxTouchPoints === 'number' &&
+    navigator.maxTouchPoints > 1;
+  if (isIOS || isIPadOS) return true;
+  const isDesktopSafari =
+    /Safari/.test(ua) && !/Chrome|Chromium|CriOS|FxiOS|Edg|Android|OPR/.test(ua);
+  return isDesktopSafari;
+}
+
+const MULTI_PART_SUFFIXES = [
+  'co.uk',
+  'org.uk',
+  'gov.uk',
+  'ac.uk',
+  'com.au',
+  'net.au',
+  'org.au',
+  'co.in',
+  'co.jp',
+  'co.nz',
+  'co.za',
+  'com.br',
+];
+
+/**
+ * Best-effort registrable domain (eTLD+1) for a host. Strips the port and
+ * returns the last two labels, accounting for a small set of common
+ * multi-part public suffixes. Heuristic only (no full Public Suffix List);
+ * used to decide whether a preview iframe is cross-site for an advisory
+ * banner, never for a security decision.
+ */
+export function getRegistrableDomain(host: string): string {
+  if (!host) return '';
+  const bare = host.split(':')[0].toLowerCase().replace(/\.$/, '');
+  const labels = bare.split('.').filter(Boolean);
+  if (labels.length <= 2) return labels.join('.');
+  const lastTwo = labels.slice(-2).join('.');
+  if (MULTI_PART_SUFFIXES.includes(lastTwo)) {
+    return labels.slice(-3).join('.');
+  }
+  return lastTwo;
+}
+
+/**
+ * True when the preview URL is served from a different registrable domain than
+ * the current dashboard page (the case where Safari blocks the cross-site
+ * preview cookie). Returns false for same-origin, same-base-domain subdomains,
+ * or unparseable input.
+ */
+export function isCrossSitePreview(previewUrl: string): boolean {
+  if (!previewUrl || typeof window === 'undefined') return false;
+  try {
+    const previewHost = new URL(previewUrl).host;
+    const appHost = window.location.host;
+    const previewDomain = getRegistrableDomain(previewHost);
+    const appDomain = getRegistrableDomain(appHost);
+    if (!previewDomain || !appDomain) return false;
+    return previewDomain !== appDomain;
+  } catch {
+    return false;
+  }
 }

src/routes/chat/chat.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 	type FormEvent,
 } from 'react';
-import { useParams, useSearchParams, useNavigate } from 'react-router';
+import { useParams, useSearchParams, useNavigate, useLocation } from 'react-router';
 import { AnimatePresence, motion } from 'framer-motion';
 import { LoaderCircle, MoreHorizontal, RotateCcw } from 'lucide-react';
 import clsx from 'clsx';
@@ -63,10 +63,19 @@ export default function Chat() {
 	const { chatId: urlChatId } = useParams();
 
 	const [searchParams] = useSearchParams();
+	const location = useLocation();
 	const userQuery = searchParams.get('query');
 	const urlProjectType = searchParams.get('projectType') || 'app';
 	const urlBehaviorType = searchParams.get('behaviorType') as BehaviorType | null;
 
+	// Only auto-start a brand-new session when it originated from in-app
+	// navigation (e.g. the home prompt box sets `fromPrompt`). Sessions opened
+	// from a pasted/external link require explicit confirmation, since the
+	// query is interpolated into the agent's system prompt.
+	const startedFromInApp =
+		(location.state as { fromPrompt?: boolean } | null)?.fromPrompt === true;
+	const autoStart = urlChatId !== 'new' || startedFromInApp;
+
 	// Extract images from URL params if present
 	const userImages = useMemo(() => {
 		const imagesParam = searchParams.get('images');
@@ -171,12 +180,16 @@ export default function Chat() {
 		// Backend error dialog state
 		backendErrorDialog,
 		setBackendErrorDialog,
+		// Externally-sourced session start gate
+		awaitingStartConfirmation,
+		confirmStart,
 	} = useChat({
 		chatId: urlChatId,
 		query: userQuery,
 		images: userImages,
 		projectType: urlProjectType as ProjectType,
 		behaviorType: urlBehaviorType ?? undefined,
+		autoStart,
 		onDebugMessage: addDebugMessage,
 		onVaultUnlockRequired: handleVaultUnlockRequired,
 	});
@@ -693,6 +706,31 @@ export default function Chat() {
 		});
 	}
 
+	if (awaitingStartConfirmation) {
+		return (
+			<div className="size-full flex items-center justify-center p-6 text-text-primary">
+				<div className="max-w-lg w-full flex flex-col gap-4 rounded-xl border border-border-primary bg-bg-2 p-6">
+					<h1 className="text-lg font-medium">Start building this app?</h1>
+					<p className="text-sm text-text-secondary">
+						This link wants to start a new project with the prompt below.
+						Review it before continuing.
+					</p>
+					<div className="rounded-lg border border-border-primary bg-bg-3 p-4 max-h-64 overflow-y-auto">
+						<p className="text-sm text-text-primary whitespace-pre-wrap break-words">
+							{displayQuery}
+						</p>
+					</div>
+					<div className="flex items-center justify-end gap-2">
+						<Button variant="outline" onClick={() => navigate('/')}>
+							Cancel
+						</Button>
+						<Button onClick={confirmStart}>Start building</Button>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div className="size-full flex flex-col min-h-0 text-text-primary">
 			<div className="flex-1 flex min-h-0 overflow-hidden justify-center">

src/routes/chat/components/main-content-panel.tsx

@@ -6,6 +6,7 @@ import { RefreshCw } from 'lucide-react';
 import { Blueprint } from './blueprint';
 import { FileExplorer } from './file-explorer';
 import { PreviewIframe } from './preview-iframe';
+import { PreviewCompatBanner } from './preview-compat-banner';
 import { MarkdownDocsPreview } from './markdown-docs-preview';
 import { ViewContainer } from './view-container';
 import { ViewHeader } from './view-header';
@@ -282,7 +283,10 @@ export function MainContentPanel(props: MainContentPanelProps) {
 					</button>
 				)}
 			</div>,
-			previewContent,
+			<div className="flex flex-1 min-h-0 flex-col">
+				<PreviewCompatBanner previewUrl={previewUrl} />
+				<div className="relative flex flex-1 min-h-0 flex-col">{previewContent}</div>
+			</div>,
 			headerActions
 		);
 	};

src/routes/chat/components/markdown-components.ts

@@ -0,0 +1,12 @@
+import { type Components } from 'react-markdown';
+
+/**
+ * ReactMarkdown component overrides that disable image rendering. Model and
+ * user-authored markdown can contain `![](url)` which renders an outbound
+ * `<img>` request; this is an invisible data-exfiltration channel for prompt
+ * injection. Rendering images as null breaks that channel while preserving all
+ * other markdown.
+ */
+export const NO_IMAGE_MARKDOWN_COMPONENTS: Components = {
+	img: () => null,
+};

src/routes/chat/components/markdown-docs-preview.tsx

@@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeExternalLinks from 'rehype-external-links';
 import { DocsSidebar } from './docs-sidebar';
+import { NO_IMAGE_MARKDOWN_COMPONENTS } from './markdown-components';
 import { ExportButton } from './export-button';
 import { exportMarkdownAsFile } from '@/utils/markdown-export';
 import type { FileType } from '@/api-types';
@@ -154,6 +155,7 @@ export function MarkdownDocsPreview({
 									remarkPlugins={[remarkGfm]}
 									rehypePlugins={[[rehypeExternalLinks, { target: '_blank' }]]}
 									components={{
+										...NO_IMAGE_MARKDOWN_COMPONENTS,
 										h1: ({ node, ...props }) => (
 											<h1 id={createId(props.children)} {...props} />
 										),

src/routes/chat/components/messages.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeExternalLinks from 'rehype-external-links';
+import { NO_IMAGE_MARKDOWN_COMPONENTS } from './markdown-components';
 import { LoaderCircle, Check, AlertTriangle, ChevronDown, ChevronRight, MessageSquare } from 'lucide-react';
 import type { ToolEvent } from '../utils/message-helpers';
 import type { ConversationMessage } from '@/api-types';
@@ -506,6 +507,7 @@ export function Markdown({ children, className, ...props }: MarkdownProps) {
 			<ReactMarkdown
 				remarkPlugins={[remarkGfm]}
 				rehypePlugins={[[rehypeExternalLinks, { target: '_blank' }]]}
+				components={NO_IMAGE_MARKDOWN_COMPONENTS}
 			>
 				{children}
 			</ReactMarkdown>

src/routes/chat/components/preview-compat-banner.tsx

@@ -0,0 +1,76 @@
+import { useMemo, useState } from 'react';
+import { ExternalLink, TriangleAlert, X } from 'lucide-react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { isAppleWebKitBrowser, isCrossSitePreview } from '@/lib/utils';
+
+const DISMISS_KEY = 'preview-compat-dismissed';
+
+function readDismissed(): boolean {
+	try {
+		return sessionStorage.getItem(DISMISS_KEY) === '1';
+	} catch {
+		return false;
+	}
+}
+
+interface PreviewCompatBannerProps {
+	previewUrl: string;
+}
+
+/**
+ * Advisory banner shown above the preview when the viewer is on an Apple/WebKit
+ * browser AND the preview runs on a different registrable domain than the
+ * dashboard. In that case Safari blocks the cross-site preview cookie, so the
+ * embedded iframe's dynamic requests can fail. Opening the preview in a new tab
+ * loads it first-party, where it works fully.
+ */
+export function PreviewCompatBanner({ previewUrl }: PreviewCompatBannerProps) {
+	const [dismissed, setDismissed] = useState(readDismissed);
+
+	const show = useMemo(
+		() => isAppleWebKitBrowser() && isCrossSitePreview(previewUrl),
+		[previewUrl],
+	);
+
+	if (!show || dismissed) {
+		return null;
+	}
+
+	const dismiss = () => {
+		try {
+			sessionStorage.setItem(DISMISS_KEY, '1');
+		} catch {
+			// Ignore storage failures; banner just won't persist its dismissal.
+		}
+		setDismissed(true);
+	};
+
+	return (
+		<Alert className="rounded-none border-x-0 border-t-0 flex items-center gap-3">
+			<TriangleAlert className="text-amber-500" />
+			<AlertDescription className="flex-1">
+				Preview may not fully load in Safari due to preview being served from a
+				different domain.
+			</AlertDescription>
+			<Button
+				variant="outline"
+				size="sm"
+				onClick={() =>
+					window.open(previewUrl, '_blank', 'noopener,noreferrer')
+				}
+			>
+				<ExternalLink />
+				Open in new tab
+			</Button>
+			<button
+				type="button"
+				aria-label="Dismiss"
+				onClick={dismiss}
+				className="p-1 rounded hover:bg-bg-2 transition-colors"
+			>
+				<X className="size-4 text-text-primary/60" />
+			</button>
+		</Alert>
+	);
+}