fix(pdf): PDF previews by adding the missing preview endpoint and allowing same-origin blob URLs in iframe CSP

Author: icecrasher321

apps/sim/app/api/workspaces/[id]/pdf/preview/route.test.ts

@@ -0,0 +1,81 @@
+/**
+ * @vitest-environment node
+ */
+import { NextRequest } from 'next/server'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockGetSession, mockVerifyWorkspaceMembership, mockGeneratePdfFromCode } = vi.hoisted(
+  () => ({
+    mockGetSession: vi.fn(),
+    mockVerifyWorkspaceMembership: vi.fn(),
+    mockGeneratePdfFromCode: vi.fn(),
+  })
+)
+
+vi.mock('@/lib/auth', () => ({
+  getSession: mockGetSession,
+}))
+
+vi.mock('@/app/api/workflows/utils', () => ({
+  verifyWorkspaceMembership: mockVerifyWorkspaceMembership,
+}))
+
+vi.mock('@/lib/execution/doc-vm', () => ({
+  generatePdfFromCode: mockGeneratePdfFromCode,
+}))
+
+import { POST } from '@/app/api/workspaces/[id]/pdf/preview/route'
+
+describe('PDF preview API route', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetSession.mockResolvedValue({ user: { id: 'user-1' } })
+    mockVerifyWorkspaceMembership.mockResolvedValue(true)
+    mockGeneratePdfFromCode.mockResolvedValue(Buffer.from('%PDF-test'))
+  })
+
+  it('returns a generated PDF for authorized workspace members', async () => {
+    const request = new NextRequest(
+      'http://localhost:3000/api/workspaces/workspace-1/pdf/preview',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ code: 'return 1' }),
+      }
+    )
+
+    const response = await POST(request, {
+      params: Promise.resolve({ id: 'workspace-1' }),
+    })
+
+    expect(response.status).toBe(200)
+    expect(response.headers.get('Content-Type')).toBe('application/pdf')
+    expect(response.headers.get('Cache-Control')).toBe('private, no-store')
+    expect(mockVerifyWorkspaceMembership).toHaveBeenCalledWith('user-1', 'workspace-1')
+    expect(mockGeneratePdfFromCode).toHaveBeenCalledWith('return 1', 'workspace-1', request.signal)
+    expect(Buffer.from(await response.arrayBuffer()).toString()).toBe('%PDF-test')
+  })
+
+  it('rejects requests without code', async () => {
+    const request = new NextRequest(
+      'http://localhost:3000/api/workspaces/workspace-1/pdf/preview',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({}),
+      }
+    )
+
+    const response = await POST(request, {
+      params: Promise.resolve({ id: 'workspace-1' }),
+    })
+
+    expect(response.status).toBe(400)
+    await expect(response.json()).resolves.toEqual({ error: 'code is required' })
+    expect(mockGeneratePdfFromCode).not.toHaveBeenCalled()
+  })
+})

apps/sim/app/api/workspaces/[id]/pdf/preview/route.ts

@@ -0,0 +1,62 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { getSession } from '@/lib/auth'
+import { generatePdfFromCode } from '@/lib/execution/doc-vm'
+import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
+
+export const dynamic = 'force-dynamic'
+export const runtime = 'nodejs'
+
+const logger = createLogger('PdfPreviewAPI')
+
+/**
+ * POST /api/workspaces/[id]/pdf/preview
+ * Compile PDF-Lib source code and return the binary PDF for streaming preview.
+ */
+export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id: workspaceId } = await params
+
+  try {
+    const session = await getSession()
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const membership = await verifyWorkspaceMembership(session.user.id, workspaceId)
+    if (!membership) {
+      return NextResponse.json({ error: 'Insufficient permissions' }, { status: 403 })
+    }
+
+    let body: unknown
+    try {
+      body = await req.json()
+    } catch {
+      return NextResponse.json({ error: 'Invalid or missing JSON body' }, { status: 400 })
+    }
+    const { code } = body as { code?: string }
+
+    if (typeof code !== 'string' || code.trim().length === 0) {
+      return NextResponse.json({ error: 'code is required' }, { status: 400 })
+    }
+
+    const MAX_CODE_BYTES = 512 * 1024
+    if (Buffer.byteLength(code, 'utf-8') > MAX_CODE_BYTES) {
+      return NextResponse.json({ error: 'code exceeds maximum size' }, { status: 413 })
+    }
+
+    const buffer = await generatePdfFromCode(code, workspaceId, req.signal)
+
+    return new NextResponse(new Uint8Array(buffer), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/pdf',
+        'Content-Length': String(buffer.length),
+        'Cache-Control': 'private, no-store',
+      },
+    })
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'PDF generation failed'
+    logger.error('PDF preview generation failed', { error: message, workspaceId })
+    return NextResponse.json({ error: message }, { status: 500 })
+  }
+}

apps/sim/lib/core/security/csp.test.ts

@@ -175,6 +175,16 @@ describe('generateRuntimeCSP', () => {
     expect(csp).not.toMatch(/\s{3,}/)
     expect(csp.trim()).toBe(csp)
   })
+
+  it('should allow blob URLs for iframe-based PDF previews', () => {
+    const csp = generateRuntimeCSP()
+    const frameSrcDirective = csp
+      .split('; ')
+      .find((directive) => directive.startsWith('frame-src '))
+
+    expect(frameSrcDirective).toBeDefined()
+    expect(frameSrcDirective).toContain('blob:')
+  })
 })
 
 describe('addCSPSource', () => {

apps/sim/lib/core/security/csp.ts

@@ -111,6 +111,7 @@ const STATIC_CONNECT_SRC = [
 
 const STATIC_FRAME_SRC = [
   "'self'",
+  'blob:',
   'https://challenges.cloudflare.com',
   'https://drive.google.com',
   'https://docs.google.com',