fix: Validate queue names (supabase#40290)

* fix: input validation for queue name

* grammar

* fix: whitespacing issue

* Reuse the validation logic for queue name.

* Reuse the query name schema in the create queue sheet.

---------

Co-authored-by: Ivan Vasilov <[email protected]>

Author: doublethink

apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet.tsx

@@ -30,6 +30,7 @@ import { Admonition } from 'ui-patterns'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { QUEUE_TYPES } from './Queues.constants'
+import { QueryNameSchema } from './Queues.utils'
 
 export interface CreateQueueSheetProps {
   isClosing: boolean
@@ -52,12 +53,7 @@ const unloggedQueueSchema = z.object({
 })
 
 const FormSchema = z.object({
-  name: z
-    .string()
-    .trim()
-    .min(1, 'Please provide a name for your queue')
-    .max(47, "The name can't be longer than 47 characters")
-    .regex(/^[a-z_-]+$/, 'Name must contain only lowercase letters, hyphens, and underscores'),
+  name: QueryNameSchema,
   enableRls: z.boolean(),
   values: z.discriminatedUnion('type', [
     normalQueueSchema,

apps/studio/components/interfaces/Integrations/Queues/Queues.utils.tsx

@@ -1,4 +1,5 @@
 import { Column } from 'react-data-grid'
+import z from 'zod'
 
 import { PostgresQueue } from 'data/database-queues/database-queues-query'
 import { cn } from 'ui'
@@ -107,3 +108,20 @@ export const prepareQueuesForDataGrid = (queues: PostgresQueue[]): QueueWithMetr
     id: queue.queue_name, // Use queue_name as unique id
   }))
 }
+
+export const QueryNameSchema = z
+  .string()
+  .trim()
+  .min(1, 'Please provide a name for your queue')
+  .max(47, "The name can't be longer than 47 characters")
+  .regex(
+    /^[a-zA-Z0-9_-]+$/,
+    'Name must contain only alphanumeric characters, underscores, and hyphens'
+  )
+
+/**
+ * Checks if the queue name is valid. Returns a boolean.
+ */
+export const isQueueNameValid = (queueName: string) => {
+  return QueryNameSchema.safeParse(queueName).success
+}

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx

@@ -146,7 +146,7 @@ export const MessageDetailsPanel = ({
                       readMessage({
                         projectRef: project!.ref,
                         connectionString: project?.connectionString,
-                        queryName: queueName!,
+                        queueName: queueName!,
                         messageId: selectedMessage.msg_id,
                         duration: 60,
                       })
@@ -173,7 +173,7 @@ export const MessageDetailsPanel = ({
                       archiveMessage({
                         projectRef: project!.ref,
                         connectionString: project?.connectionString,
-                        queryName: queueName!,
+                        queueName: queueName!,
                         messageId: selectedMessage.msg_id,
                       })
                     },

apps/studio/data/database-queues/database-queue-messages-archive-mutation.ts

@@ -1,27 +1,33 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
+import { isQueueNameValid } from 'components/interfaces/Integrations/Queues/Queues.utils'
 import { executeSql } from 'data/sql/execute-sql-query'
 import type { ResponseError, UseCustomMutationOptions } from 'types'
 import { databaseQueuesKeys } from './keys'
 
 export type DatabaseQueueMessageArchiveVariables = {
   projectRef: string
   connectionString?: string | null
-  queryName: string
+  queueName: string
   messageId: number
 }
 
 export async function archiveDatabaseQueueMessage({
   projectRef,
   connectionString,
-  queryName,
+  queueName,
   messageId,
 }: DatabaseQueueMessageArchiveVariables) {
+  if (!isQueueNameValid(queueName)) {
+    throw new Error(
+      'Invalid queue name: must contain only alphanumeric characters, underscores, and hyphens'
+    )
+  }
   const { result } = await executeSql({
     projectRef,
     connectionString,
-    sql: `SELECT * FROM pgmq.archive('${queryName}', ${messageId})`,
+    sql: `SELECT * FROM pgmq.archive('${queueName}', ${messageId})`,
     queryKey: databaseQueuesKeys.create(),
   })
 
@@ -51,9 +57,9 @@ export const useDatabaseQueueMessageArchiveMutation = ({
   >({
     mutationFn: (vars) => archiveDatabaseQueueMessage(vars),
     async onSuccess(data, variables, context) {
-      const { projectRef, queryName } = variables
+      const { projectRef, queueName } = variables
       await queryClient.invalidateQueries({
-        queryKey: databaseQueuesKeys.getMessagesInfinite(projectRef, queryName),
+        queryKey: databaseQueuesKeys.getMessagesInfinite(projectRef, queueName),
       })
       await onSuccess?.(data, variables, context)
     },

apps/studio/data/database-queues/database-queue-messages-delete-mutation.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
+import { isQueueNameValid } from 'components/interfaces/Integrations/Queues/Queues.utils'
 import { executeSql } from 'data/sql/execute-sql-query'
 import type { ResponseError, UseCustomMutationOptions } from 'types'
 import { databaseQueuesKeys } from './keys'
@@ -18,6 +19,12 @@ export async function deleteDatabaseQueueMessage({
   queueName,
   messageId,
 }: DatabaseQueueMessageDeleteVariables) {
+  if (!isQueueNameValid(queueName)) {
+    throw new Error(
+      'Invalid queue name: must contain only alphanumeric characters, underscores, and hyphens'
+    )
+  }
+
   const { result } = await executeSql({
     projectRef,
     connectionString,

apps/studio/data/database-queues/database-queue-messages-infinite-query.ts

@@ -2,6 +2,7 @@ import { useInfiniteQuery } from '@tanstack/react-query'
 import dayjs from 'dayjs'
 import { last } from 'lodash'
 
+import { isQueueNameValid } from 'components/interfaces/Integrations/Queues/Queues.utils'
 import { QUEUE_MESSAGE_TYPE } from 'components/interfaces/Integrations/Queues/SingleQueue/Queue.utils'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { DATE_FORMAT } from 'lib/constants'
@@ -34,6 +35,11 @@ export async function getDatabaseQueue({
   status,
 }: DatabaseQueueVariables & { afterTimestamp: string }) {
   if (!projectRef) throw new Error('Project ref is required')
+  if (!isQueueNameValid(queueName)) {
+    throw new Error(
+      'Invalid queue name: must contain only alphanumeric characters, underscores, and hyphens'
+    )
+  }
 
   if (status.length === 0) {
     return []

apps/studio/data/database-queues/database-queue-messages-read-mutation.ts

@@ -1,29 +1,36 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
+import { isQueueNameValid } from 'components/interfaces/Integrations/Queues/Queues.utils'
 import { executeSql } from 'data/sql/execute-sql-query'
 import type { ResponseError, UseCustomMutationOptions } from 'types'
 import { databaseQueuesKeys } from './keys'
 
 export type DatabaseQueueMessageReadVariables = {
   projectRef: string
   connectionString?: string | null
-  queryName: string
+  queueName: string
   duration: number
   messageId: number
 }
 
 export async function readDatabaseQueueMessage({
   projectRef,
   connectionString,
-  queryName,
+  queueName,
   messageId,
   duration,
 }: DatabaseQueueMessageReadVariables) {
+  if (!isQueueNameValid(queueName)) {
+    throw new Error(
+      'Invalid queue name: must contain only alphanumeric characters, underscores, and hyphens'
+    )
+  }
+
   const { result } = await executeSql({
     projectRef,
     connectionString,
-    sql: `select * from pgmq.set_vt('${queryName}', ${messageId}, ${duration})`,
+    sql: `select * from pgmq.set_vt('${queueName}', ${messageId}, ${duration})`,
     queryKey: databaseQueuesKeys.create(),
   })
 
@@ -53,9 +60,9 @@ export const useDatabaseQueueMessageReadMutation = ({
   >({
     mutationFn: (vars) => readDatabaseQueueMessage(vars),
     async onSuccess(data, variables, context) {
-      const { projectRef, queryName } = variables
+      const { projectRef, queueName } = variables
       await queryClient.invalidateQueries({
-        queryKey: databaseQueuesKeys.getMessagesInfinite(projectRef, queryName),
+        queryKey: databaseQueuesKeys.getMessagesInfinite(projectRef, queueName),
       })
       await onSuccess?.(data, variables, context)
     },

apps/studio/data/database-queues/database-queue-messages-send-mutation.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
+import { isQueueNameValid } from 'components/interfaces/Integrations/Queues/Queues.utils'
 import { executeSql } from 'data/sql/execute-sql-query'
 import type { ResponseError, UseCustomMutationOptions } from 'types'
 import { databaseQueuesKeys } from './keys'
@@ -20,6 +21,12 @@ export async function sendDatabaseQueueMessage({
   payload,
   delay,
 }: DatabaseQueueMessageSendVariables) {
+  if (!isQueueNameValid(queueName)) {
+    throw new Error(
+      'Invalid queue name: must contain only alphanumeric characters, underscores, and hyphens'
+    )
+  }
+
   const { result } = await executeSql({
     projectRef,
     connectionString,

apps/studio/data/database-queues/database-queues-delete-mutation.ts

@@ -4,6 +4,7 @@ import { toast } from 'sonner'
 import { executeSql } from 'data/sql/execute-sql-query'
 import type { ResponseError, UseCustomMutationOptions } from 'types'
 import { databaseQueuesKeys } from './keys'
+import { isQueueNameValid } from 'components/interfaces/Integrations/Queues/Queues.utils'
 
 export type DatabaseQueueDeleteVariables = {
   projectRef: string
@@ -16,6 +17,12 @@ export async function deleteDatabaseQueue({
   connectionString,
   queueName,
 }: DatabaseQueueDeleteVariables) {
+  if (!isQueueNameValid(queueName)) {
+    throw new Error(
+      'Invalid queue name: must contain only alphanumeric characters, underscores, and hyphens'
+    )
+  }
+
   const { result } = await executeSql({
     projectRef,
     connectionString,

apps/studio/data/database-queues/database-queues-metrics-query.ts

@@ -1,4 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
+
+import { isQueueNameValid } from 'components/interfaces/Integrations/Queues/Queues.utils'
 import { executeSql } from 'data/sql/execute-sql-query'
 import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { databaseQueuesKeys } from './keys'
@@ -15,15 +17,18 @@ export type PostgresQueueMetric = {
   method: 'estimated' | 'precise'
 }
 
-const preciseMetricsSqlQuery = (queueName: string) => `
+const preciseMetricsSqlQuery = (queueName: string) => {
+  return `
   set local statement_timeout = '1s';
   SELECT
     COUNT(*) AS row_count
   FROM
     "pgmq"."q_${queueName}";
 `
+}
 
-const estimateMetricsSqlQuery = (queueName: string) => `
+const estimateMetricsSqlQuery = (queueName: string) => {
+  return `
   select
   reltuples::bigint as estimated_rows
     from
@@ -32,13 +37,19 @@ const estimateMetricsSqlQuery = (queueName: string) => `
   relname = 'q_${queueName}'
   and relnamespace = 'pgmq'::regnamespace;
 `
+}
 
 export async function getDatabaseQueuesMetrics({
   projectRef,
   connectionString,
   queueName,
 }: DatabaseQueuesMetricsVariables) {
   if (!projectRef) throw new Error('Project ref is required')
+  if (!isQueueNameValid(queueName)) {
+    throw new Error(
+      'Invalid queue name: must contain only alphanumeric characters, underscores, and hyphens'
+    )
+  }
 
   try {
     const { result } = await executeSql({