fix: apply consistent input validation for env names

Author: rohan-chaturvedi

backend/backend/graphene/mutations/environment.py

@@ -1,3 +1,4 @@
+import re
 from django.utils import timezone
 from django.db.models import Max
 from api.utils.rest import get_resolver_request_meta
@@ -10,7 +11,6 @@
 )
 from api.utils.audit_logging import log_secret_event
 from api.utils.secrets import create_environment_folder_structure, normalize_path_string
-
 from backend.quotas import can_add_environment, can_use_custom_envs
 import graphene
 from graphql import GraphQLError
@@ -115,6 +115,11 @@ def mutate(
                 "You don't have permission to create environments in this organisation"
             )
 
+        if not re.match(r"^[a-zA-Z0-9\-_]+$", environment_data.name):
+            raise GraphQLError(
+                "Environment name is invalid! Environment names can only includes letters, numbers, hyphens and underscores."
+            )
+
         if Environment.objects.filter(
             app=app, name__iexact=environment_data.name
         ).exists():
@@ -209,6 +214,11 @@ def mutate(cls, root, info, environment_id, name):
                 "Your Organisation doesn't have access to Custom Environments"
             )
 
+        if not re.match(r"^[a-zA-Z0-9\-_]+$", name):
+            raise GraphQLError(
+                "Environment name is invalid! Environment names can only includes letters, numbers, hyphens and underscores."
+            )
+
         if (
             Environment.objects.filter(app=environment.app, name__iexact=name)
             .exclude(id=environment_id)

frontend/components/environments/CreateEnvironmentDialog.tsx

@@ -14,6 +14,7 @@ import { toast } from 'react-toastify'
 import Spinner from '../common/Spinner'
 import { Alert } from '../common/Alert'
 import { UpsellDialog } from '../settings/organisation/UpsellDialog'
+import { sanitizeInput } from '@/utils/environment'
 
 export const CreateEnvironmentDialog = (props: { appId: string }) => {
   const { activeOrganisation: organisation } = useContext(organisationContext)
@@ -66,7 +67,7 @@ export const CreateEnvironmentDialog = (props: { appId: string }) => {
       appData.sseEnabled ? appData.serverPublicKey : null
     )
 
-    await createEnvironment({
+    const { data } = await createEnvironment({
       variables: {
         envInput: newEnvData.createEnvPayload,
         adminKeys: newEnvData.adminKeysPayload,
@@ -76,15 +77,17 @@ export const CreateEnvironmentDialog = (props: { appId: string }) => {
       refetchQueries: [{ query: GetAppEnvironments, variables: { appId: props.appId } }],
     })
 
+    if (!data) {
+      return
+    }
+
     setName('')
 
     toast.success('Environment created!')
 
     closeModal()
   }
 
-  const sanitizeInput = (value: string) => value.replace(/[^a-zA-Z0-9]/g, '')
-
   const closeModal = () => {
     if (dialogRef.current) {
       dialogRef.current.closeModal()

frontend/components/environments/ManageEnvironmentDialog.tsx

@@ -22,6 +22,7 @@ import { isCloudHosted } from '@/utils/appConfig'
 import { UpgradeRequestForm } from '../forms/UpgradeRequestForm'
 import { UpsellDialog } from '../settings/organisation/UpsellDialog'
 import { userHasPermission } from '@/utils/access/permissions'
+import { sanitizeInput } from '@/utils/environment'
 
 const RenameEnvironment = (props: { environment: EnvironmentType }) => {
   const { activeOrganisation: organisation } = useContext(organisationContext)
@@ -65,7 +66,7 @@ const RenameEnvironment = (props: { environment: EnvironmentType }) => {
             : "You don't have the permissions required to rename this Environment"}
       </Alert>
       <Input
-        value={name}
+        value={sanitizeInput(name)}
         setValue={setName}
         label="Environment name"
         required

frontend/utils/environment.ts

@@ -0,0 +1 @@
+export const sanitizeInput = (value: string) => value.replace(/[^a-zA-Z0-9\-_]/g, '')