test: catch new CSP violations before they land

Author: serhalp

test/e2e/security-headers.spec.ts

@@ -18,4 +18,15 @@ test.describe('security headers', () => {
 
     expect(headers['content-security-policy']).toBeFalsy()
   })
+
+  // Navigate key pages and assert no CSP violations are logged.
+  // This catches new external resources that weren't added to the CSP.
+  const PAGES = ['/', '/package/nuxt', '/search?q=vue', '/compare'] as const
+
+  for (const path of PAGES) {
+    test(`no CSP violations on ${path}`, async ({ goto, cspViolations }) => {
+      await goto(path, { waitUntil: 'hydration' })
+      expect(cspViolations).toEqual([])
+    })
+  }
 })

test/e2e/test-utils.ts

@@ -74,6 +74,19 @@ function isHydrationMismatch(message: ConsoleMessage): boolean {
   return HYDRATION_MISMATCH_PATTERNS.some(pattern => text.includes(pattern))
 }
 
+/**
+ * Detect Content-Security-Policy violations logged to the console.
+ *
+ * Browsers log CSP violations as console errors with a distinctive prefix.
+ * Catching these in e2e tests ensures new external resources are added to the
+ * CSP before they land in production.
+ */
+function isCspViolation(message: ConsoleMessage): boolean {
+  if (message.type() !== 'error') return false
+  const text = message.text()
+  return text.includes('Content-Security-Policy') || text.includes('content security policy')
+}
+
 /**
  * Extended test fixture with automatic external API mocking and hydration mismatch detection.
  *
@@ -83,7 +96,11 @@ function isHydrationMismatch(message: ConsoleMessage): boolean {
  * Hydration mismatches are detected via Vue's console.error output, which is always
  * emitted in production builds when server-rendered HTML doesn't match client expectations.
  */
-export const test = base.extend<{ mockExternalApis: void; hydrationErrors: string[] }>({
+export const test = base.extend<{
+  mockExternalApis: void
+  hydrationErrors: string[]
+  cspViolations: string[]
+}>({
   mockExternalApis: [
     async ({ page }, use) => {
       await setupRouteMocking(page)
@@ -103,6 +120,18 @@ export const test = base.extend<{ mockExternalApis: void; hydrationErrors: strin
 
     await use(errors)
   },
+
+  cspViolations: async ({ page }, use) => {
+    const violations: string[] = []
+
+    page.on('console', message => {
+      if (isCspViolation(message)) {
+        violations.push(message.text())
+      }
+    })
+
+    await use(violations)
+  },
 })
 
 export { expect }