improvement(variables): changed object validation to support JavaScript object notation in addition to strict JSON

Author: emir-karabeg

apps/sim/app/w/[id]/components/panel/components/variables/variables.tsx

@@ -179,22 +179,26 @@ export function Variables({ panelWidth }: VariablesProps) {
       case 'object':
         try {
           // Handle both JavaScript and JSON syntax
-          let valueToValidate = String(variable.value).trim()
-
-          // If it's clearly JS syntax, convert it to valid JSON
-          if (valueToValidate.includes("'") || /\b\w+\s*:/.test(valueToValidate)) {
-            // Replace JS single quotes with double quotes, but handle escaped quotes correctly
-            valueToValidate = valueToValidate
-              .replace(/(\w+)\s*:/g, '"$1":') // Convert unquoted property names to quoted
-              .replace(/'/g, '"') // Replace single quotes with double quotes
+          let valueToEvaluate = String(variable.value).trim()
+
+          // Basic security check to prevent arbitrary code execution
+          if (!valueToEvaluate.startsWith('{') || !valueToEvaluate.endsWith('}')) {
+            return 'Not a valid object format'
+          }
+
+          // Use Function constructor to safely evaluate the object expression
+          // This is safer than eval() and handles all JS object literal syntax
+          const parsed = new Function(`return ${valueToEvaluate}`)()
+
+          // Verify it's actually an object (not array or null)
+          if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+            return 'Not a valid object'
           }
 
-          const parsed = JSON.parse(valueToValidate)
-          return !parsed || typeof parsed !== 'object' || Array.isArray(parsed)
-            ? 'Not a valid JSON object'
-            : undefined
-        } catch {
-          return 'Invalid JSON object syntax'
+          return undefined // Valid object
+        } catch (e) {
+          console.log('Object parsing error:', e)
+          return 'Invalid object syntax'
         }
       case 'array':
         try {

apps/sim/stores/panel/variables/store.ts

@@ -53,12 +53,27 @@ function validateVariable(variable: Variable): string | undefined {
       case 'object':
         // Check if it's a valid JSON object
         try {
-          const parsed = JSON.parse(String(variable.value))
+          // Handle both JavaScript and JSON syntax
+          let valueToEvaluate = String(variable.value).trim()
+
+          // Basic security check to prevent arbitrary code execution
+          if (!valueToEvaluate.startsWith('{') || !valueToEvaluate.endsWith('}')) {
+            return 'Not a valid object format'
+          }
+
+          // Use Function constructor to safely evaluate the object expression
+          // This handles both JSON and JS object literal syntax
+          const parsed = new Function(`return ${valueToEvaluate}`)()
+
+          // Verify it's actually an object (not array or null)
           if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
-            return 'Not a valid JSON object'
+            return 'Not a valid object'
           }
-        } catch {
-          return 'Invalid JSON object syntax'
+
+          return undefined // Valid object
+        } catch (e) {
+          console.log('Object parsing error:', e)
+          return 'Invalid object syntax'
         }
         break
       case 'array':