diff --git a/frontend/src/components/WorkflowForm.tsx b/frontend/src/components/WorkflowForm.tsx index 6904347..346f675 100644 --- a/frontend/src/components/WorkflowForm.tsx +++ b/frontend/src/components/WorkflowForm.tsx @@ -1,10 +1,58 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Card } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { Switch } from "@/components/ui/switch"; import { Button } from "@/components/ui/button"; +// Define regex patterns to detect potentially harmful patterns +const PROHIBITED_PATTERNS = [ + /exec\s*\(/i, + /eval\s*\(/i, + /\bFunction\s*\(/i, + /new\s+Function/i, + /\bimport\s+/i, + /\brequire\s*\(/i, + /process\.env/i, + /child_process/i, + /\bfs\./i, + /http\.request/i, + /\bfetch\s*\(/i, + /XMLHttpRequest/i, + /\bajax\s*\(/i, + /\bdocument\./i, + /\bwindow\./i, + /\blocation\./i, + /\binject/i, + /\bhack/i, + /\bbypass/i, + /\bexploit/i, + /\bvulnerability/i +]; + +// Function to validate prompts +const validatePrompt = (prompt: string): { isValid: boolean, message?: string } => { + // Check for suspicious patterns + for (const pattern of PROHIBITED_PATTERNS) { + if (pattern.test(prompt)) { + return { + isValid: false, + message: `Potentially unsafe pattern detected` + }; + } + } + + // Check for excessively long prompts (to prevent prompt injection) + if (prompt.length > 5000) { + return { + isValid: false, + message: "Prompt is too long. Please keep prompts under 5000 characters." + }; + } + + return { isValid: true }; +}; + interface WorkflowFormProps { userPrompt: string; setUserPrompt: (value: string) => void; @@ -34,9 +82,79 @@ const WorkflowForm = ({ onSubmit, isLoading }: WorkflowFormProps) => { + const [validationErrors, setValidationErrors] = useState<{ + generateCode?: string; + validateOutput?: string; + }>({}); + + // Handle form submission with validation + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + // Only validate in advanced mode + if (advancedMode) { + const generateCodeValidation = validatePrompt(generateCodePrompt); + const validateOutputValidation = validatePrompt(validateOutputPrompt); + + const newErrors = { + generateCode: !generateCodeValidation.isValid ? generateCodeValidation.message : undefined, + validateOutput: !validateOutputValidation.isValid ? validateOutputValidation.message : undefined + }; + + setValidationErrors(newErrors); + + // Don't submit if there are errors + if (newErrors.generateCode || newErrors.validateOutput) { + return; + } + } + + onSubmit(e); + }; + + // Validate generate code prompt on change + const handleGenerateCodePromptChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setGenerateCodePrompt(value); + + // Validate and update error state + const validation = validatePrompt(value); + if (!validation.isValid) { + setValidationErrors(prev => ({ + ...prev, + generateCode: validation.message + })); + } else { + setValidationErrors(prev => ({ + ...prev, + generateCode: undefined + })); + } + }; + + // Validate output validation prompt on change + const handleValidateOutputPromptChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setValidateOutputPrompt(value); + + // Validate and update error state + const validation = validatePrompt(value); + if (!validation.isValid) { + setValidationErrors(prev => ({ + ...prev, + validateOutput: validation.message + })); + } else { + setValidationErrors(prev => ({ + ...prev, + validateOutput: undefined + })); + } + }; + return ( -
+
+
+

+ Warning: Advanced mode allows customizing model prompts. + Use with caution as improper prompts may lead to insecure code generation. +

+
+