feat(studio): enhance security and stability across core services

- Implement cryptographically secure random string generation using `crypto.getRandomValues` for filenames and session IDs.
- Add `Suspense` boundary to `StudioRedirectPage` to handle client-side navigation requirements.
- Improve server-side security by validating and sanitizing Firebase Storage URLs and Printerz template IDs.
- Refactor `AudioPlayer` playback logic for better guard clauses and error handling.
- Update `persistence-service` to use `globalThis.indexedDB` for improved environment compatibility.
- Optimize data processing in `firebase-utils` using `codePointAt` for safer character handling.

Author: aramb-dev

src/app/studio/page.tsx

@@ -2,9 +2,10 @@
 
 import { FileAudio } from "lucide-react"
 import { useRouter, useSearchParams } from "next/navigation"
+import { Suspense } from "react"
 import { Button } from "@/components/ui/button"
 
-export default function StudioRedirectPage() {
+function StudioRedirectContent() {
   const router = useRouter()
   const searchParams = useSearchParams()
 
@@ -35,3 +36,11 @@ export default function StudioRedirectPage() {
     </div>
   )
 }
+
+export default function StudioRedirectPage() {
+  return (
+    <Suspense>
+      <StudioRedirectContent />
+    </Suspense>
+  )
+}

src/components/studio/AudioPlayer.tsx

@@ -237,19 +237,18 @@ export const AudioPlayer: React.FC<AudioPlayerProps> = ({
   }, [currentTime, isLooping, loopStart, loopEnd, audioRef])
 
   const togglePlay = () => {
-    if (audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause()
-        setIsPlaying(false)
-      } else {
-        audioRef.current
-          .play()
-          .then(() => setIsPlaying(true))
-          .catch((error) => {
-            console.error("Audio playback failed:", error)
-            toast.error("Failed to play audio")
-          })
-      }
+    if (!audioRef.current) return
+    if (isPlaying) {
+      audioRef.current.pause()
+      setIsPlaying(false)
+    } else {
+      audioRef.current
+        .play()
+        .then(() => setIsPlaying(true))
+        .catch((error) => {
+          console.error("Audio playback failed:", error)
+          toast.error("Failed to play audio")
+        })
     }
   }
 

src/lib/firebase-utils.ts

@@ -3,7 +3,11 @@ import { getStorage } from "@/lib/firebase"
 
 const generateUniqueFilename = (originalName: string): string => {
   const timestamp = Date.now()
-  const randomString = Math.random().toString(36).substring(2, 8)
+  const randomBytes = new Uint8Array(4)
+  crypto.getRandomValues(randomBytes)
+  const randomString = Array.from(randomBytes)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("")
   const fileExtension = originalName?.split(".").pop() || "audio"
   return `audio_${timestamp}_${randomString}.${fileExtension}`
 }
@@ -26,7 +30,7 @@ export async function uploadBase64ToFirebase(
     const byteCharacters = atob(base64WithoutPrefix)
     const byteNumbers = new Array(byteCharacters.length)
     for (let i = 0; i < byteCharacters.length; i++) {
-      byteNumbers[i] = byteCharacters.charCodeAt(i)
+      byteNumbers[i] = byteCharacters.codePointAt(i) ?? 0
     }
     const byteArray = new Uint8Array(byteNumbers)
 

src/lib/persistence-service.ts

@@ -4,12 +4,9 @@
  */
 
 import { TranscriptionStatus } from "@/services/transcription"
-import type {
-  TranscriptionIntelligence,
-  TranscriptionSegment,
-} from "@/types/transcription"
+import type { TranscriptionIntelligence } from "@/types/transcription"
 
-export type { TranscriptionSegment }
+export type { TranscriptionSegment } from "@/types/transcription"
 
 export interface TranscriptionSession {
   id: string // Unique session ID
@@ -55,13 +52,13 @@ const DEFAULT_SESSION_EXPIRY_HOURS = 24
 const initDb = (): Promise<IDBDatabase> => {
   return new Promise((resolve, reject) => {
     // Check for IndexedDB support
-    if (!window.indexedDB) {
+    if (!globalThis.indexedDB) {
       console.error("Your browser doesn't support IndexedDB")
       reject(new Error("IndexedDB not supported"))
       return
     }
 
-    const request = window.indexedDB.open(DB_NAME, DB_VERSION)
+    const request = globalThis.indexedDB.open(DB_NAME, DB_VERSION)
 
     request.onerror = (event) => {
       console.error("Database error:", event)
@@ -94,7 +91,11 @@ const initDb = (): Promise<IDBDatabase> => {
  */
 export const createSessionId = (): string => {
   const timestamp = Date.now()
-  const randomString = Math.random().toString(36).substring(2, 10)
+  const randomBytes = new Uint8Array(5)
+  crypto.getRandomValues(randomBytes)
+  const randomString = Array.from(randomBytes)
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("")
   const sessionId = `${timestamp}-${randomString}`
 
   // Set session cookie

src/lib/storage-service.ts

@@ -57,7 +57,7 @@ export const deleteFile = async (path: string): Promise<void> => {
     if (path.startsWith("http")) {
       // Try to convert URL to storage path - this is tricky and implementation depends on URL format
       // For simplicity, if path contains 'temp_audio/', extract that part and everything after
-      const match = path.match(/temp_audio\/.+/)
+      const match = /temp_audio\/.+/.exec(path)
       if (match) {
         filePath = match[0]
       } else {

src/server/index.ts

@@ -152,14 +152,11 @@ app.post("/api/printerz/render", (async (req: Request, res: Response) => {
       return res.status(500).json({ error: "Printerz API key not configured" })
     }
 
-    console.log(`Proxying request to Printerz template: ${templateId}`)
-    console.log(
-      "With data:",
-      JSON.stringify(printerzData).substring(0, 200) + "...",
-    )
+    console.log("Proxying request to Printerz")
 
+    const safeTemplateId = encodeURIComponent(String(templateId))
     const response = await fetch(
-      `https://api.printerz.dev/templates/${templateId}/render`,
+      `https://api.printerz.dev/templates/${safeTemplateId}/render`,
       {
         method: "POST",
         headers: {
@@ -213,15 +210,28 @@ app.post("/api/firebase-proxy", (async (req: Request, res: Response) => {
   try {
     const { url } = req.body
 
-    if (!url || !url.includes("firebasestorage.googleapis.com")) {
+    if (!url || typeof url !== "string") {
+      return res
+        .status(400)
+        .json({ error: "Invalid or missing Firebase Storage URL" })
+    }
+
+    let parsedUrl: URL
+    try {
+      parsedUrl = new URL(url)
+    } catch {
+      return res.status(400).json({ error: "Malformed Firebase Storage URL" })
+    }
+
+    if (parsedUrl.hostname !== "firebasestorage.googleapis.com") {
       return res
         .status(400)
         .json({ error: "Invalid or missing Firebase Storage URL" })
     }
 
-    console.log(`Proxying request to Firebase Storage: ${url}`)
+    console.log("Proxying request to Firebase Storage")
 
-    const response = await fetch(url)
+    const response = await fetch(parsedUrl.toString())
 
     if (!response.ok) {
       return res.status(response.status).json({