Repository: nuxt/nuxt.js
Pull request #6583 (2019-10-17 10:54:34)

fix(config): typo in `unsafeInlineCompatibility` name
Replacing all occurrences of `unsafeInlineCompatiblity` to `unsafeInlineCompatibility` (notice the missing "i" in "Compatibility".

## Types of changes
- [ ] Bug fix (a non-breaking change which fixes an issue)
- [ ] New feature (a non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
**Edit:** Removed the [x] from "Breaking change", as it is now a non-breaking typo fix.

## Description
Just fixing a minor typo that can create confusion when typing this property (correctly) from memory. This can lead to wasted time in debugging a wrong property name.

Replacing all occurrences of `unsafeInlineCompatiblity` to `unsafeInlineCompatibility`.

**Note:** This can cause all apps using the old property name to stop working!

## Checklist:
- [X] My change requires a change to the documentation.
- [X] I have updated the documentation accordingly. (PR: https://github.com/nuxt/docs/pull/1650)
- [X] I have added tests to cover my changes (if not applicable, please state why)
- [X] All new and existing tests are passing.



manniL: @PedroD Example how you could do that: https://github.com/nuxt/nuxt.js/pull/4674/files
PedroD: Ok, allow me some time, I'll try to implement this.
PedroD: Please take a look if the changes I made are ok.

So Nuxt should allow the usage of both old and new property names. When the developer uses the old name, an alert message appears.

I created tests to make sure both names are supported, thus making this PR non-breaking.
PedroD: @clarkdo I think the doc was already updated accordingly, please take a look here: https://github.com/nuxt/docs/pull/1650
clarkdo: Great， thanks
PedroD: Hmmm, there seems to be a linter error on file `examples/with-sockets/io/index.js`

![image](https://user-images.githubusercontent.com/3803097/67108210-f010e080-f1c5-11e9-9cac-da96053611c2.png)

This file comes from the merge result (wasn't modified on this PR). Is it an error caused by a previous unrelated commit?
PedroD: I found that the problematic file comes from this PR (https://github.com/nuxt/nuxt.js/pull/6586).

The linter also failed in there: https://circleci.com/gh/nuxt/nuxt.js/56629?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link

I can try and fix the issue still on the scope of this PR (if I still have permissions after the merge attempt), or this should be done in the original PR? Or in a new PR at all?
clarkdo: Fixed

Patch:
diff --git a/packages/config/src/options.js b/packages/config/src/options.js
index 243f673eb..e05c41292 100644
--- a/packages/config/src/options.js
+++ b/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
diff --git a/packages/vue-renderer/src/renderers/ssr.js b/packages/vue-renderer/src/renderers/ssr.js
index 410a9c3a3..954fc71cc 100644
--- a/packages/vue-renderer/src/renderers/ssr.js
+++ b/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 patch:
diff --git a/packages/config/test/options.test.js b/packages/config/test/options.test.js
index 87166c45c..717680a6b 100644
--- a/packages/config/test/options.test.js
+++ b/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,
diff --git a/test/unit/basic.ssr.csp.test.js b/test/unit/basic.ssr.csp.test.js
index b5fa67685..94716cc57 100644
--- a/test/unit/basic.ssr.csp.test.js
+++ b/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'`]