feat: add sandbox environment checks and user confirmation dialogs

- Introduced a new endpoint to check if the application is running in a containerized environment, allowing the UI to display appropriate risk warnings.
- Added a confirmation dialog for users when running outside a sandbox, requiring acknowledgment of potential risks before proceeding.
- Implemented a rejection screen for users who deny sandbox risk confirmation, providing options to restart in a container or reload the application.
- Updated the main application logic to handle sandbox status checks and user responses effectively, enhancing security and user experience.
This commit is contained in:
Test User
2025-12-31 21:00:23 -05:00
parent 2828431cca
commit b9a6e29ee8
12 changed files with 388 additions and 3 deletions

View File

@@ -1,12 +1,13 @@
/**
* Health check routes
*
* NOTE: Only the basic health check (/) is unauthenticated.
* NOTE: Only the basic health check (/) and environment check are unauthenticated.
* The /detailed endpoint requires authentication.
*/
import { Router } from 'express';
import { createIndexHandler } from './routes/index.js';
import { createEnvironmentHandler } from './routes/environment.js';
/**
* Create unauthenticated health routes (basic check only)
@@ -18,6 +19,10 @@ export function createHealthRoutes(): Router {
// Basic health check - no sensitive info
router.get('/', createIndexHandler());
// Environment info including containerization status
// This is unauthenticated so the UI can check on startup
router.get('/environment', createEnvironmentHandler());
return router;
}

View File

@@ -0,0 +1,20 @@
/**
* GET /environment endpoint - Environment information including containerization status
*
* This endpoint is unauthenticated so the UI can check it on startup
* before login to determine if sandbox risk warnings should be shown.
*/
import type { Request, Response } from 'express';
export interface EnvironmentResponse {
isContainerized: boolean;
}
export function createEnvironmentHandler() {
return (_req: Request, res: Response): void => {
res.json({
isContainerized: process.env.IS_CONTAINERIZED === 'true',
} satisfies EnvironmentResponse);
};
}

View File

@@ -3,4 +3,6 @@ export { DeleteAllArchivedSessionsDialog } from './delete-all-archived-sessions-
export { DeleteSessionDialog } from './delete-session-dialog';
export { FileBrowserDialog } from './file-browser-dialog';
export { NewProjectModal } from './new-project-modal';
export { SandboxRejectionScreen } from './sandbox-rejection-screen';
export { SandboxRiskDialog } from './sandbox-risk-dialog';
export { WorkspacePickerModal } from './workspace-picker-modal';

View File

@@ -0,0 +1,90 @@
/**
* Sandbox Rejection Screen
*
* Shown in web mode when user denies the sandbox risk confirmation.
* Prompts them to either restart the app in a container or reload to try again.
*/
import { useState } from 'react';
import { ShieldX, RefreshCw, Container, Copy, Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
const DOCKER_COMMAND = 'npm run dev:docker';
export function SandboxRejectionScreen() {
const [copied, setCopied] = useState(false);
const handleReload = () => {
// Clear the rejection state and reload
sessionStorage.removeItem('automaker-sandbox-denied');
window.location.reload();
};
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(DOCKER_COMMAND);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy:', err);
}
};
return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="max-w-md w-full text-center space-y-6">
<div className="flex justify-center">
<div className="rounded-full bg-destructive/10 p-4">
<ShieldX className="w-12 h-12 text-destructive" />
</div>
</div>
<div className="space-y-2">
<h1 className="text-2xl font-semibold">Access Denied</h1>
<p className="text-muted-foreground">
You declined to accept the risks of running Automaker outside a sandbox environment.
</p>
</div>
<div className="bg-muted/50 border border-border rounded-lg p-4 text-left space-y-3">
<div className="flex items-start gap-3">
<Container className="w-5 h-5 mt-0.5 text-primary flex-shrink-0" />
<div className="flex-1 space-y-2">
<p className="font-medium text-sm">Run in Docker (Recommended)</p>
<p className="text-sm text-muted-foreground">
Run Automaker in a containerized sandbox environment:
</p>
<div className="flex items-center gap-2 bg-background border border-border rounded-lg p-2">
<code className="flex-1 text-sm font-mono px-2">{DOCKER_COMMAND}</code>
<Button
variant="ghost"
size="sm"
onClick={handleCopy}
className="h-8 px-2 hover:bg-muted"
>
{copied ? (
<Check className="w-4 h-4 text-green-500" />
) : (
<Copy className="w-4 h-4" />
)}
</Button>
</div>
</div>
</div>
</div>
<div className="pt-2">
<Button
variant="outline"
onClick={handleReload}
className="gap-2"
data-testid="sandbox-retry"
>
<RefreshCw className="w-4 h-4" />
Reload &amp; Try Again
</Button>
</div>
</div>
</div>
);
}

View File

@@ -0,0 +1,112 @@
/**
* Sandbox Risk Confirmation Dialog
*
* Shows when the app is running outside a containerized environment.
* Users must acknowledge the risks before proceeding.
*/
import { useState } from 'react';
import { ShieldAlert, Copy, Check } from 'lucide-react';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
interface SandboxRiskDialogProps {
open: boolean;
onConfirm: () => void;
onDeny: () => void;
}
const DOCKER_COMMAND = 'npm run dev:docker';
export function SandboxRiskDialog({ open, onConfirm, onDeny }: SandboxRiskDialogProps) {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(DOCKER_COMMAND);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy:', err);
}
};
return (
<Dialog open={open} onOpenChange={() => {}}>
<DialogContent
className="bg-popover border-border max-w-lg"
onPointerDownOutside={(e) => e.preventDefault()}
onEscapeKeyDown={(e) => e.preventDefault()}
showCloseButton={false}
>
<DialogHeader>
<DialogTitle className="flex items-center gap-2 text-destructive">
<ShieldAlert className="w-6 h-6" />
Sandbox Environment Not Detected
</DialogTitle>
<DialogDescription asChild>
<div className="space-y-4 pt-2">
<p className="text-muted-foreground">
<strong>Warning:</strong> This application is running outside of a containerized
sandbox environment. AI agents will have direct access to your filesystem and can
execute commands on your system.
</p>
<div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4 space-y-2">
<p className="text-sm font-medium text-destructive">Potential Risks:</p>
<ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
<li>Agents can read, modify, or delete files on your system</li>
<li>Agents can execute arbitrary commands and install software</li>
<li>Agents can access environment variables and credentials</li>
<li>Unintended side effects from agent actions may affect your system</li>
</ul>
</div>
<div className="space-y-2">
<p className="text-sm text-muted-foreground">
For safer operation, consider running Automaker in Docker:
</p>
<div className="flex items-center gap-2 bg-muted/50 border border-border rounded-lg p-2">
<code className="flex-1 text-sm font-mono px-2">{DOCKER_COMMAND}</code>
<Button
variant="ghost"
size="sm"
onClick={handleCopy}
className="h-8 px-2 hover:bg-muted"
>
{copied ? (
<Check className="w-4 h-4 text-green-500" />
) : (
<Copy className="w-4 h-4" />
)}
</Button>
</div>
</div>
</div>
</DialogDescription>
</DialogHeader>
<DialogFooter className="gap-2 sm:gap-2 pt-4">
<Button variant="outline" onClick={onDeny} className="px-4" data-testid="sandbox-deny">
Deny &amp; Exit
</Button>
<Button
variant="destructive"
onClick={onConfirm}
className="px-4"
data-testid="sandbox-confirm"
>
<ShieldAlert className="w-4 h-4 mr-2" />I Accept the Risks
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

View File

@@ -432,6 +432,7 @@ export interface SaveImageResult {
export interface ElectronAPI {
ping: () => Promise<string>;
getApiKey?: () => Promise<string | null>;
quit?: () => Promise<void>;
openExternalLink: (url: string) => Promise<{ success: boolean; error?: string }>;
openDirectory: () => Promise<DialogResult>;
openFile: (options?: object) => Promise<DialogResult>;

View File

@@ -294,6 +294,32 @@ export const verifySession = async (): Promise<boolean> => {
}
};
/**
* Check if the server is running in a containerized (sandbox) environment.
* This endpoint is unauthenticated so it can be checked before login.
*/
export const checkSandboxEnvironment = async (): Promise<{
isContainerized: boolean;
error?: string;
}> => {
try {
const response = await fetch(`${getServerUrl()}/api/health/environment`, {
method: 'GET',
});
if (!response.ok) {
console.warn('[HTTP Client] Failed to check sandbox environment');
return { isContainerized: false, error: 'Failed to check environment' };
}
const data = await response.json();
return { isContainerized: data.isContainerized ?? false };
} catch (error) {
console.error('[HTTP Client] Sandbox environment check failed:', error);
return { isContainerized: false, error: 'Network error' };
}
};
type EventType =
| 'agent:stream'
| 'auto-mode:event'

View File

@@ -838,3 +838,9 @@ ipcMain.handle('window:updateMinWidth', (_, _sidebarExpanded: boolean) => {
// Always use the smaller minimum width - horizontal scrolling handles any overflow
mainWindow.setMinimumSize(MIN_WIDTH_COLLAPSED, MIN_HEIGHT);
});
// Quit the application (used when user denies sandbox risk confirmation)
ipcMain.handle('app:quit', () => {
console.log('[Electron] Quitting application via IPC request');
app.quit();
});

View File

@@ -50,6 +50,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
// Window management
updateMinWidth: (sidebarExpanded: boolean): Promise<void> =>
ipcRenderer.invoke('window:updateMinWidth', sidebarExpanded),
// App control
quit: (): Promise<void> => ipcRenderer.invoke('app:quit'),
});
console.log('[Preload] Electron API exposed (TypeScript)');

View File

@@ -8,10 +8,21 @@ import {
} from '@/contexts/file-browser-context';
import { useAppStore } from '@/store/app-store';
import { useSetupStore } from '@/store/setup-store';
import { getElectronAPI } from '@/lib/electron';
import { initApiKey, isElectronMode, verifySession } from '@/lib/http-api-client';
import { getElectronAPI, isElectron } from '@/lib/electron';
import {
initApiKey,
isElectronMode,
verifySession,
checkSandboxEnvironment,
} from '@/lib/http-api-client';
import { Toaster } from 'sonner';
import { ThemeOption, themeOptions } from '@/config/theme-options';
import { SandboxRiskDialog } from '@/components/dialogs/sandbox-risk-dialog';
import { SandboxRejectionScreen } from '@/components/dialogs/sandbox-rejection-screen';
// Session storage key for sandbox risk acknowledgment
const SANDBOX_RISK_ACKNOWLEDGED_KEY = 'automaker-sandbox-risk-acknowledged';
const SANDBOX_DENIED_KEY = 'automaker-sandbox-denied';
function RootLayoutContent() {
const location = useLocation();
@@ -27,6 +38,20 @@ function RootLayoutContent() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const { openFileBrowser } = useFileBrowser();
// Sandbox environment check state
type SandboxStatus = 'pending' | 'containerized' | 'needs-confirmation' | 'denied' | 'confirmed';
const [sandboxStatus, setSandboxStatus] = useState<SandboxStatus>(() => {
// Check if user previously denied in this session
if (sessionStorage.getItem(SANDBOX_DENIED_KEY)) {
return 'denied';
}
// Check if user previously acknowledged in this session
if (sessionStorage.getItem(SANDBOX_RISK_ACKNOWLEDGED_KEY)) {
return 'confirmed';
}
return 'pending';
});
// Hidden streamer panel - opens with "\" key
const handleStreamerPanelShortcut = useCallback((event: KeyboardEvent) => {
const activeElement = document.activeElement;
@@ -73,6 +98,63 @@ function RootLayoutContent() {
setIsMounted(true);
}, []);
// Check sandbox environment on mount
useEffect(() => {
// Skip if already decided
if (sandboxStatus !== 'pending') {
return;
}
const checkSandbox = async () => {
try {
const result = await checkSandboxEnvironment();
if (result.isContainerized) {
// Running in a container, no warning needed
setSandboxStatus('containerized');
} else {
// Not containerized, show warning dialog
setSandboxStatus('needs-confirmation');
}
} catch (error) {
console.error('[Sandbox] Failed to check environment:', error);
// On error, assume not containerized and show warning
setSandboxStatus('needs-confirmation');
}
};
checkSandbox();
}, [sandboxStatus]);
// Handle sandbox risk confirmation
const handleSandboxConfirm = useCallback(() => {
sessionStorage.setItem(SANDBOX_RISK_ACKNOWLEDGED_KEY, 'true');
setSandboxStatus('confirmed');
}, []);
// Handle sandbox risk denial
const handleSandboxDeny = useCallback(async () => {
sessionStorage.setItem(SANDBOX_DENIED_KEY, 'true');
if (isElectron()) {
// In Electron mode, quit the application
// Use window.electronAPI directly since getElectronAPI() returns the HTTP client
try {
const electronAPI = window.electronAPI;
if (electronAPI?.quit) {
await electronAPI.quit();
} else {
console.error('[Sandbox] quit() not available on electronAPI');
}
} catch (error) {
console.error('[Sandbox] Failed to quit app:', error);
}
} else {
// In web mode, show rejection screen
setSandboxStatus('denied');
}
}, []);
// Initialize authentication
// - Electron mode: Uses API key from IPC (header-based auth)
// - Web mode: Uses HTTP-only session cookie
@@ -201,11 +283,31 @@ function RootLayoutContent() {
const isSetupRoute = location.pathname === '/setup';
const isLoginRoute = location.pathname === '/login';
// Show rejection screen if user denied sandbox risk (web mode only)
if (sandboxStatus === 'denied' && !isElectron()) {
return <SandboxRejectionScreen />;
}
// Show loading while checking sandbox environment
if (sandboxStatus === 'pending') {
return (
<main className="flex h-screen items-center justify-center" data-testid="app-container">
<div className="text-muted-foreground">Checking environment...</div>
</main>
);
}
// Show login page (full screen, no sidebar)
if (isLoginRoute) {
return (
<main className="h-screen overflow-hidden" data-testid="app-container">
<Outlet />
{/* Show sandbox dialog on top of login page if needed */}
<SandboxRiskDialog
open={sandboxStatus === 'needs-confirmation'}
onConfirm={handleSandboxConfirm}
onDeny={handleSandboxDeny}
/>
</main>
);
}
@@ -228,6 +330,12 @@ function RootLayoutContent() {
return (
<main className="h-screen overflow-hidden" data-testid="app-container">
<Outlet />
{/* Show sandbox dialog on top of setup page if needed */}
<SandboxRiskDialog
open={sandboxStatus === 'needs-confirmation'}
onConfirm={handleSandboxConfirm}
onDeny={handleSandboxDeny}
/>
</main>
);
}
@@ -249,6 +357,13 @@ function RootLayoutContent() {
}`}
/>
<Toaster richColors position="bottom-right" />
{/* Show sandbox dialog if needed */}
<SandboxRiskDialog
open={sandboxStatus === 'needs-confirmation'}
onConfirm={handleSandboxConfirm}
onDeny={handleSandboxDeny}
/>
</main>
);
}

View File

@@ -465,6 +465,7 @@ export interface AutoModeAPI {
export interface ElectronAPI {
ping: () => Promise<string>;
getApiKey?: () => Promise<string | null>;
quit?: () => Promise<void>;
openExternalLink: (url: string) => Promise<{ success: boolean; error?: string }>;
// Dialog APIs

View File

@@ -50,6 +50,10 @@ services:
# Optional - CORS origin (default allows all)
- CORS_ORIGIN=${CORS_ORIGIN:-http://localhost:3007}
# Internal - indicates the API is running in a containerized sandbox environment
# This is used by the UI to determine if sandbox risk warnings should be shown
- IS_CONTAINERIZED=true
volumes:
# ONLY named volumes - these are isolated from your host filesystem
# This volume persists data between restarts but is container-managed