fix(vue-renderer): add the csp hash if unsafe-inline hasn't been specified (#5387)

packages/vue-renderer/src/renderer.js

@@ -408,7 +408,11 @@ export default class VueRenderer {
 
     // Calculate CSP hashes
     const cspScriptSrcHashes = []
-    if (this.context.options.render.csp) {
+    const csp = this.context.options.render.csp
+    const containsUnsafeInlineScriptSrc = csp && csp.policies && csp.policies['script-src'] && csp.policies['script-src'].includes(`'unsafe-inline'`)
+
+    // Only add the hash if 'unsafe-inline' rule isn't present to avoid conflicts (#5387)
+    if (csp && !containsUnsafeInlineScriptSrc) {
       const { hashAlgorithm } = this.context.options.render.csp
       const hash = crypto.createHash(hashAlgorithm)
       hash.update(serializedSession)

test/unit/basic.ssr.csp.test.js

@@ -171,6 +171,31 @@ describe('basic ssr csp', () => {
         expect(uniqueHashes.length).toBe(hashes.length)
       }
     )
+
+    test(
+      'Not contain hash when \'unsafe-inline\' option is present in script-src policy',
+      async () => {
+        const policies = {
+          'script-src': [`'unsafe-inline'`]
+        }
+
+        nuxt = await startCspServer({
+          policies
+        })
+
+        for (let i = 0; i < 5; i++) {
+          await rp(url('/stateless'), {
+            resolveWithFullResponse: true
+          })
+        }
+
+        const { headers } = await rp(url('/stateful'), {
+          resolveWithFullResponse: true
+        })
+
+        expect(headers[cspHeader]).toMatch(/script-src 'self' 'unsafe-inline'$/)
+      }
+    )
   })
   describe('debug mode', () => {
     test(
@@ -314,6 +339,7 @@ describe('basic ssr csp', () => {
         expect(uniqueHashes.length).toBe(hashes.length)
       }
     )
+
     test(
       'Not contain old hashes when loading new page',
       async () => {
@@ -339,5 +365,30 @@ describe('basic ssr csp', () => {
         expect(intersection.size).toBe(0)
       }
     )
+
+    test(
+      'Not contain hash when \'unsafe-inline\' option is present in script-src policy',
+      async () => {
+        const policies = {
+          'script-src': [`'unsafe-inline'`]
+        }
+
+        nuxt = await startCspDevServer({
+          policies
+        })
+
+        for (let i = 0; i < 5; i++) {
+          await rp(url('/stateless'), {
+            resolveWithFullResponse: true
+          })
+        }
+
+        const { headers } = await rp(url('/stateful'), {
+          resolveWithFullResponse: true
+        })
+
+        expect(headers[reportOnlyHeader]).toMatch(/script-src 'self' 'unsafe-inline'$/)
+      }
+    )
   })
 })