[Security] Harden client ID generation in ExtensionServerClient

packages/ui-extensions-server-kit/src/ExtensionServerClient/ExtensionServerClient.ts

@@ -8,7 +8,7 @@ import {
   getFlattenedLocalization,
   isFlattenedTranslations,
 } from '../i18n'
-import {isUIExtension, isValidSurface} from '../utilities'
+import {isUIExtension, isValidSurface, generateRandomId} from '../utilities'
 import {DeepPartial, ExtensionPayload, ExtensionPoint} from '../types'
 
 export class ExtensionServerClient implements ExtensionServer.Client {
@@ -32,7 +32,7 @@ export class ExtensionServerClient implements ExtensionServer.Client {
   private uiExtensionsByUuid: Record<string, ExtensionServer.UIExtension> = {}
 
   constructor(options: DeepPartial<ExtensionServer.Options> = {}) {
-    this.id = (Math.random() + 1).toString(36).substring(7)
+    this.id = generateRandomId()
     this.options = getValidatedOptions({
       ...options,
       connection: {

packages/ui-extensions-server-kit/src/utilities/index.ts

@@ -4,3 +4,4 @@ export * from './set'
 export * from './assetToString'
 export * from './isValidSurface'
 export * from './isUIExtension'
+export * from './randomId'

packages/ui-extensions-server-kit/src/utilities/randomId.test.ts

@@ -0,0 +1,64 @@
+import {generateRandomId} from './randomId'
+import {describe, test, expect, vi, afterEach} from 'vitest'
+
+describe('generateRandomId', () => {
+  const originalCrypto = globalThis.crypto
+
+  afterEach(() => {
+    // Restore global crypto
+    Object.defineProperty(globalThis, 'crypto', {
+      value: originalCrypto,
+      writable: true,
+      configurable: true,
+    })
+    // eslint-disable-next-line @shopify/cli/no-vi-manual-mock-clear
+    vi.restoreAllMocks()
+  })
+
+  test('uses globalThis.crypto.randomUUID when available', () => {
+    const mockUUID = '12345678-1234-1234-1234-123456789abc'
+    const mockRandomUUID = vi.fn().mockReturnValue(mockUUID)
+
+    Object.defineProperty(globalThis, 'crypto', {
+      value: {
+        randomUUID: mockRandomUUID,
+      },
+      writable: true,
+      configurable: true,
+    })
+
+    const id = generateRandomId()
+    expect(id).toBe(mockUUID)
+    expect(mockRandomUUID).toHaveBeenCalledTimes(1)
+  })
+
+  test('falls back to Math.random when crypto is unavailable', () => {
+    Object.defineProperty(globalThis, 'crypto', {
+      value: undefined,
+      writable: true,
+      configurable: true,
+    })
+
+    const mockRandom = vi.spyOn(Math, 'random').mockReturnValue(0.123456)
+
+    const id = generateRandomId()
+    expect(id).toBeDefined()
+    expect(typeof id).toBe('string')
+    expect(mockRandom).toHaveBeenCalled()
+  })
+
+  test('falls back to Math.random when randomUUID is not a function', () => {
+    Object.defineProperty(globalThis, 'crypto', {
+      value: {},
+      writable: true,
+      configurable: true,
+    })
+
+    const mockRandom = vi.spyOn(Math, 'random').mockReturnValue(0.123456)
+
+    const id = generateRandomId()
+    expect(id).toBeDefined()
+    expect(typeof id).toBe('string')
+    expect(mockRandom).toHaveBeenCalled()
+  })
+})

packages/ui-extensions-server-kit/src/utilities/randomId.ts

@@ -0,0 +1,11 @@
+/**
+ * Generates a random identifier.
+ * Uses `globalThis.crypto.randomUUID` to provide a cryptographically secure pseudo-random number generator (CSPRNG)
+ * and prevent predictable IDs/token vulnerability, with a fallback to `Math.random()` for non-secure contexts.
+ */
+export function generateRandomId(): string {
+  if (typeof globalThis !== 'undefined' && globalThis.crypto && typeof globalThis.crypto.randomUUID === 'function') {
+    return globalThis.crypto.randomUUID()
+  }
+  return (Math.random() + 1).toString(36).substring(7)
+}