fix: relax devtools-only CSP and frame headers in dev

Author: RYGRIT

modules/security-headers.ts

@@ -1,4 +1,4 @@
-import { defineNuxtModule } from 'nuxt/kit'
+import { defineNuxtModule, useNuxt } from 'nuxt/kit'
 import { BLUESKY_API } from '#shared/utils/constants'
 import { ALL_KNOWN_GIT_API_ORIGINS } from '#shared/utils/git-providers'
 import { TRUSTED_IMAGE_DOMAINS } from '#server/utils/image-proxy'
@@ -19,13 +19,15 @@ import { TRUSTED_IMAGE_DOMAINS } from '#server/utils/image-proxy'
  */
 export default defineNuxtModule({
   meta: { name: 'security-headers' },
-  setup(_, nuxt) {
-    const isDevtoolsRuntime =
-      nuxt.options.dev && nuxt.options.devtools !== false && !process.env.TEST
+  setup() {
+    const nuxt = useNuxt()
+    const devtools = nuxt.options.devtools
 
-    // Nuxt DevTools relies on injected client assets and an iframe-based UI in dev.
-    // Keep strict CSP/frame restrictions for non-dev environments.
-    if (isDevtoolsRuntime) return
+    const isDevtoolsRuntime =
+      nuxt.options.dev
+      && devtools !== false
+      && (devtools == null || typeof devtools !== 'object' || devtools.enabled !== false)
+      && !process.env.TEST
 
     // These assets are embedded directly on blog pages and should not affect image-proxy trust.
     const cspOnlyImgOrigins = ['https://api.star-history.com', 'https://cdn.bsky.app']
@@ -46,9 +48,21 @@ export default defineNuxtModule({
       ...ALL_KNOWN_GIT_API_ORIGINS,
       // Local CLI connector (npmx CLI communicates via localhost)
       'http://127.0.0.1:*',
+      // Devtools runtime (Vue Devtools, Nuxt Devtools, etc) — only in dev mode with devtools enabled
+      ...(isDevtoolsRuntime ? ['ws://localhost:*'] : []),
+    ].join(' ')
+
+    const frameSrc = [
+      'https://bsky.app',
+      'https://pdsmoover.com',
+      ...(isDevtoolsRuntime ? ["'self'"] : []),
     ].join(' ')
 
-    const frameSrc = ['https://bsky.app', 'https://pdsmoover.com'].join(' ')
+    const securityHeaders = {
+      'X-Content-Type-Options': 'nosniff',
+      'X-Frame-Options': 'DENY',
+      'Referrer-Policy': 'strict-origin-when-cross-origin',
+    }
 
     const csp = [
       `default-src 'none'`,
@@ -81,9 +95,21 @@ export default defineNuxtModule({
       ...wildCardRules,
       headers: {
         ...wildCardRules?.headers,
-        'X-Content-Type-Options': 'nosniff',
-        'X-Frame-Options': 'DENY',
-        'Referrer-Policy': 'strict-origin-when-cross-origin',
+        ...securityHeaders,
+      },
+    }
+
+    if (!isDevtoolsRuntime)
+      return
+
+    const devtoolsRule = nuxt.options.routeRules['/__nuxt_devtools__/**']
+    nuxt.options.routeRules['/__nuxt_devtools__/**'] = {
+      ...devtoolsRule,
+      headers: {
+        ...wildCardRules?.headers,
+        ...securityHeaders,
+        ...devtoolsRule?.headers,
+        'X-Frame-Options': 'SAMEORIGIN',
       },
     }
   },

test/unit/modules/security-headers.spec.ts

@@ -0,0 +1,115 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { useNuxt } = vi.hoisted(() => ({
+  useNuxt: vi.fn(),
+}))
+
+vi.mock('nuxt/kit', () => ({
+  defineNuxtModule: <T>(module: T) => module,
+  useNuxt,
+}))
+
+import securityHeadersModule from '../../../modules/security-headers'
+
+type RouteRule = {
+  headers?: Record<string, string>
+  redirect?: string
+}
+
+type MockNuxt = {
+  options: {
+    app: {
+      head?: {
+        meta?: Array<Record<string, string>>
+      }
+    }
+    dev: boolean
+    devtools?: boolean | { enabled?: boolean }
+    routeRules: Record<string, RouteRule>
+  }
+}
+
+function createNuxt(options: Partial<MockNuxt['options']> = {}): MockNuxt {
+  return {
+    options: {
+      app: {},
+      dev: false,
+      devtools: false,
+      routeRules: {},
+      ...options,
+    },
+  }
+}
+
+function getCsp(nuxt: MockNuxt) {
+  return nuxt.options.app.head?.meta?.find(
+    meta => meta['http-equiv'] === 'Content-Security-Policy',
+  )?.content
+}
+
+describe('security headers module', () => {
+  beforeEach(() => {
+    delete process.env.TEST
+    useNuxt.mockReset()
+  })
+
+  it('keeps security headers and only relaxes devtools-specific bits in dev', () => {
+    const nuxt = createNuxt({
+      dev: true,
+      devtools: { enabled: true },
+      routeRules: {
+        '/**': {
+          headers: {
+            'Permissions-Policy': 'camera=()',
+          },
+        },
+        '/__nuxt_devtools__/**': {
+          headers: {
+            'Cache-Control': 'no-store',
+          },
+          redirect: '/devtools',
+        },
+      },
+    })
+
+    useNuxt.mockReturnValue(nuxt)
+    securityHeadersModule.setup()
+
+    const csp = getCsp(nuxt)
+
+    expect(csp).toContain('ws://localhost:*')
+    expect(csp).toContain("frame-src https://bsky.app https://pdsmoover.com 'self'")
+    expect(nuxt.options.routeRules['/**']?.headers).toEqual(expect.objectContaining({
+      'Permissions-Policy': 'camera=()',
+      'Referrer-Policy': 'strict-origin-when-cross-origin',
+      'X-Content-Type-Options': 'nosniff',
+      'X-Frame-Options': 'DENY',
+    }))
+    expect(nuxt.options.routeRules['/__nuxt_devtools__/**']).toEqual({
+      headers: {
+        'Cache-Control': 'no-store',
+        'Permissions-Policy': 'camera=()',
+        'Referrer-Policy': 'strict-origin-when-cross-origin',
+        'X-Content-Type-Options': 'nosniff',
+        'X-Frame-Options': 'SAMEORIGIN',
+      },
+      redirect: '/devtools',
+    })
+  })
+
+  it('does not apply devtools relaxations when devtools are disabled via object config', () => {
+    const nuxt = createNuxt({
+      dev: true,
+      devtools: { enabled: false },
+    })
+
+    useNuxt.mockReturnValue(nuxt)
+    securityHeadersModule.setup()
+
+    const csp = getCsp(nuxt)
+
+    expect(csp).not.toContain('ws://localhost:*')
+    expect(csp).not.toContain("frame-src https://bsky.app https://pdsmoover.com 'self'")
+    expect(nuxt.options.routeRules['/__nuxt_devtools__/**']).toBeUndefined()
+  })
+})