fix(config): typo in unsafeInlineCompatibility name

packages/config/src/options.js

@@ -241,9 +241,16 @@ export function getNuxtConfig (_options) {
       allowedSources: undefined,
       policies: undefined,
       addMeta: Boolean(options._generate),
-      unsafeInlineCompatiblity: false,
+      unsafeInlineCompatibility: false,
       reportOnly: options.debug
     })
+
+    // TODO: Remove this if statement in Nuxt 3, we will stop supporting this typo (more on: https://github.com/nuxt/nuxt.js/pull/6583)
+    if (options.render.csp.unsafeInlineCompatiblity) {
+      consola.warn('Using `unsafeInlineCompatiblity` is deprecated and will be removed in Nuxt 3. Use `unsafeInlineCompatibility` instead.')
+      options.render.csp.unsafeInlineCompatibility = options.render.csp.unsafeInlineCompatiblity
+      delete options.render.csp.unsafeInlineCompatiblity
+    }
   }
 
   // cssSourceMap

packages/config/test/options.test.js

@@ -102,7 +102,21 @@ describe('config: options', () => {
     expect(csp).toEqual({
       hashAlgorithm: 'sha256',
       addMeta: false,
-      unsafeInlineCompatiblity: false,
+      unsafeInlineCompatibility: false,
+      allowedSources: true,
+      policies: undefined,
+      reportOnly: false,
+      test: true
+    })
+  })
+
+  // TODO: Remove this test in Nuxt 3, we will stop supporting this typo (more on: https://github.com/nuxt/nuxt.js/pull/6583)
+  test('should enable csp with old typo property name, avoiding breaking changes', () => {
+    const { render: { csp } } = getNuxtConfig({ render: { csp: { allowedSources: true, test: true, unsafeInlineCompatiblity: true } } })
+    expect(csp).toEqual({
+      hashAlgorithm: 'sha256',
+      addMeta: false,
+      unsafeInlineCompatibility: true,
       allowedSources: true,
       policies: undefined,
       reportOnly: false,

packages/vue-renderer/src/renderers/ssr.js

@@ -138,7 +138,7 @@ export default class SSRRenderer extends BaseRenderer {
     if (csp) {
       // Only add the hash if 'unsafe-inline' rule isn't present to avoid conflicts (#5387)
       const containsUnsafeInlineScriptSrc = csp.policies && csp.policies['script-src'] && csp.policies['script-src'].includes(`'unsafe-inline'`)
-      if (csp.unsafeInlineCompatiblity || !containsUnsafeInlineScriptSrc) {
+      if (csp.unsafeInlineCompatibility || !containsUnsafeInlineScriptSrc) {
         const hash = crypto.createHash(csp.hashAlgorithm)
         hash.update(serializedSession)
         cspScriptSrcHashes.push(`'${csp.hashAlgorithm}-${hash.digest('base64')}'`)

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

@@ -198,7 +198,34 @@ describe('basic ssr csp', () => {
     )
 
     test(
-      'Contain hash and \'unsafe-inline\' when unsafeInlineCompatiblity is enabled',
+      'Contain hash and \'unsafe-inline\' when unsafeInlineCompatibility is enabled',
+      async () => {
+        const policies = {
+          'script-src': [`'unsafe-inline'`]
+        }
+
+        nuxt = await startCspServer({
+          unsafeInlineCompatibility: true,
+          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 'sha256-.*' 'self' 'unsafe-inline'$/)
+      }
+    )
+
+    // TODO: Remove this test in Nuxt 3, we will stop supporting this typo (more on: https://github.com/nuxt/nuxt.js/pull/6583)
+    test(
+      'Contain hash and \'unsafe-inline\' when the typo property unsafeInlineCompatiblity is enabled',
       async () => {
         const policies = {
           'script-src': [`'unsafe-inline'`]
@@ -419,7 +446,34 @@ describe('basic ssr csp', () => {
     )
 
     test(
-      'Contain hash and \'unsafe-inline\' when unsafeInlineCompatiblity is enabled',
+      'Contain hash and \'unsafe-inline\' when unsafeInlineCompatibility is enabled',
+      async () => {
+        const policies = {
+          'script-src': [`'unsafe-inline'`]
+        }
+
+        nuxt = await startCspServer({
+          unsafeInlineCompatibility: true,
+          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 'sha256-.*' 'self' 'unsafe-inline'$/)
+      }
+    )
+
+    // TODO: Remove this test in Nuxt 3, we will stop supporting this typo (more on: https://github.com/nuxt/nuxt.js/pull/6583)
+    test(
+      'Contain hash and \'unsafe-inline\' when the typo property unsafeInlineCompatiblity is enabled',
       async () => {
         const policies = {
           'script-src': [`'unsafe-inline'`]