fix(browser): allow iframe to load even if there is a custom CSP head…

…er (#5841)

packages/browser/src/node/index.ts

@@ -74,7 +74,13 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
             __VITEST_TYPE__: url.pathname === base ? '"orchestrator"' : '"tester"',
           })
 
+          // remove custom iframe related headers to allow the iframe to load
+          res.removeHeader('X-Frame-Options')
+
           if (url.pathname === base) {
+            // disable CSP for the orchestrator as we are the ones controlling it
+            res.removeHeader('Content-Security-Policy')
+
             if (!indexScripts)
               indexScripts = await formatScripts(project.config.browser.indexScripts, server)
 
@@ -105,6 +111,13 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
             return
           }
 
+          const csp = res.getHeader('Content-Security-Policy')
+          if (typeof csp === 'string') {
+            // add frame-ancestors to allow the iframe to be loaded by Vitest,
+            // but keep the rest of the CSP
+            res.setHeader('Content-Security-Policy', csp.replace(/frame-ancestors [^;]+/, 'frame-ancestors *'))
+          }
+
           const decodedTestFile = decodeURIComponent(url.pathname.slice(testerPrefix.length))
           const testFiles = await project.globTestFiles()
           // if decoded test file is "__vitest_all__" or not in the list of known files, run all tests

test/browser/vitest.config.mts

@@ -18,6 +18,9 @@ export default defineConfig({
   server: {
     headers: {
       'x-custom': 'hello',
+      // Vitest iframe should still be loaded
+      'X-Frame-Options': 'DENY',
+      'content-security-policy': 'frame-src https://example.com; frame-ancestors https://example.com',
     },
   },
   optimizeDeps: {