Merge pull request #465 from Baroshem/chore/2.0.0-rc.4

fix(headers): add default for connect-src

Author: vejja

.stackblitz/package.json

@@ -8,7 +8,7 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "3.9.3"
+    "nuxt": "^3.11.2"
   },
   "dependencies": {
     "nuxt-security": "latest"

docs/content/1.documentation/1.getting-started/2.configuration.md

@@ -45,9 +45,9 @@ security: {
     crossOriginEmbedderPolicy: 'require-corp',
     contentSecurityPolicy: {
       'base-uri': ["'none'"],
+      'default-src': ["'self'"],
+      'connect-src': ["'self'", 'https:'],
       'font-src': ["'self'", 'https:', 'data:'],
-      'form-action': ["'self'"],
-      'frame-ancestors': ["'self'"],
       'img-src': ["'self'", 'data:'],
       'object-src': ["'none'"],
       'script-src-attr': ["'none'"],
@@ -58,21 +58,45 @@ security: {
     originAgentCluster: '?1',
     referrerPolicy: 'no-referrer',
     strictTransportSecurity: {
-      maxAge: 15552000,
+      maxAge: 31536000,
       includeSubdomains: true
     },
     xContentTypeOptions: 'nosniff',
     xDNSPrefetchControl: 'off',
     xDownloadOptions: 'noopen',
-    xFrameOptions: 'SAMEORIGIN',
+    xFrameOptions: 'DENY',
     xPermittedCrossDomainPolicies: 'none',
     xXSSProtection: '0',
     permissionsPolicy: {
-      camera: [],
-      'display-capture': [],
-      fullscreen: [],
-      geolocation: [],
-      microphone: []
+      accelerometer: [],
+      'ambient-light-sensor':[],
+      autoplay:[],
+      battery:[],
+      camera:[],
+      'display-capture':[],
+      'document-domain':[],
+      'encrypted-media':[],
+      fullscreen:[],
+      gamepad:[],
+      geolocation:[],
+      gyroscope:[],
+      'layout-animations':['self'],
+      'legacy-image-formats':['self'],
+      magnetometer:[],
+      microphone:[],
+      midi:[],
+      'oversized-images':['self'],
+      payment:[],
+      'picture-in-picture':[],
+      'publickey-credentials-get':[],
+      'speaker-selection':[],
+      'sync-xhr':['self'],
+      'unoptimized-images':['self'],
+      'unsized-media':['self'],
+      usb:[],
+      'screen-wake-lock':[],
+      'web-share':[],
+      'xr-spatial-tracking':[]
     }
   },
   requestSizeLimiter: {

docs/content/1.documentation/2.headers/1.csp.md

@@ -45,7 +45,7 @@ You can also disable this header by `contentSecurityPolicy: false`.
 By default, Nuxt Security will set following value for this header:
 
 ```http
-Content-Security-Policy: base-uri 'none'; font-src 'self' https: data:; form-action 'self'; frame-ancestors 'self'; img-src 'self' data:; object-src 'none'; script-src-attr 'none'; style-src 'self' https: 'unsafe-inline'; script-src 'self' https: 'unsafe-inline' 'strict-dynamic' 'nonce-{{nonce}}'; upgrade-insecure-requests;
+Content-Security-Policy: base-uri 'none'; default-src 'self'; connect-src 'self', https:; font-src 'self' https: data:; img-src 'self' data:; object-src 'none'; script-src-attr 'none'; style-src 'self' https: 'unsafe-inline'; script-src 'self' https: 'unsafe-inline' 'strict-dynamic' 'nonce-{{nonce}}'; upgrade-insecure-requests;
 ```
 
 ## Available values
@@ -160,13 +160,13 @@ export default defineNuxtConfig({
           "https:", // For increased security, replace by the specific hosting domain or file name of your external stylesheets
           "'unsafe-inline'" // Recommended default for most Nuxt apps
         ],
+        'base-uri': ["'none'"],
+        'default-src': ["'self'"],
+        'connect-src': ["'self'", 'https:'],
         'img-src': ["'self'", "data:"], // Add relevant https://... sources if you load images from external sources 
         'font-src': ["'self'", "https:", "data:"], //  For increased security, replace by the specific sources for fonts
-        'base-uri': ["'none'"],
         'object-src': ["'none'"],
         'script-src-attr': ["'none'"],
-        'form-action': ["'self'"],
-        'frame-ancestors': ["'self'"],
         'upgrade-insecure-requests': true
       }
     },

docs/content/1.documentation/2.headers/2.permissions-policy.md

@@ -57,7 +57,7 @@ export default defineNuxtConfig({
 By default, Nuxt Security will set following value for this header.
 
 ```http
-Permissions-Policy: camera=(), display-capture=(), fullscreen=(), geolocation=(), microphone=();
+Permissions-Policy: accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), display-capture=(), document-domain=(), encrypted-media=(), fullscreen=(), gamepad=(), geolocation=(), gyroscope=(), layout-animations=(self), legacy-image-formats=(self), magnetometer=(), microphone=(), midi=(), oversized-images=(self), payment=(), picture-in-picture=(), publickey-credentials-get=(), speaker-selection=(), sync-xhr=(self), unoptimized-images=(self), unsized-media=(self), usb=(), screen-wake-lock=(), web-share=(), xr-spatial-tracking=();
 ```
 
 ## Available values

docs/content/1.documentation/5.advanced/3.strict-csp.md

@@ -732,70 +732,6 @@ From an application design perspective, it is simpler to use a single Strict CSP
 
 In order to obtain a Strict CSP on Nuxt apps, we need to use `strict-dynamic`. This mode disallows the ability for scripts to insert inline styles, and cancels the ability to whitelist external resources by name. In conjunction with the fact that nonces and hashes disable the `'unsafe-inline'` mode, this leaves us with very few options to customize our CSP policies.
 
-On the other hand, it obliges the developers community to adopt a standardized mindset when thinking about CSP. Less configuration options means less potential loopholes that malicious actors can seek to exploit.
+On the other hand, it obliges application developers to adopt a standardized mindset when thinking about CSP. Less configuration options means less potential loopholes that malicious actors can seek to exploit.
 
-With this in mind, we recommend that you implement your Strict CSP policy by checking your configuration against the following template:
-
-```ts
-export default defineNuxtConfig({
-  security: {
-    nonce: true, // Enables HTML nonce support in SSR mode
-    ssg: {
-      meta: true, // Enables CSP as a meta tag in SSG mode
-      hashScripts: true, // Enables CSP hash support for scripts in SSG mode
-      hashStyles: false // Disables CSP hash support for styles in SSG mode (recommended)
-      nitroHeaders: true // Allow Nitro to serve security headers for pre-rendered routes 
-      exportToPresets: true // Export pre-rendered security headers to Nitro presets
-    },
-    // You can use nonce and ssg simultaneously
-    // Nuxt Security will take care of choosing the adequate parameters when you build for either SSR or SSG
-    headers: {
-      contentSecurityPolicy: {
-        'script-src': [
-          "'self'",  // Fallback value, will be ignored by browsers level 3
-          "https://domain.com/external-script.js", // Fallback value, will be ignored by browsers level 3
-          "'unsafe-inline'", // Fallback value, will be ignored by browsers level 2 & 3
-          "'strict-dynamic'", // Strict CSP via 'strict-dynamic', supported by browsers level 3
-          "'nonce-{{nonce}}'" // Enables CSP nonce support for scripts in SSR mode, supported browsers level 2 & 3
-        ],
-        'style-src': [
-          "'self'", // Enables loading of stylesheets hosted on self origin
-          "https://domain.com/file.css", // Use fully-qualified filenames rather than the https: generic
-          "https://trusted-domain.com", // Avoid using domain stubs unless you can fully trust them
-          "'unsafe-inline'" // Recommended default for most Nuxt apps, but make sure 'img-src' is properly set up
-          //"'nonce-{{nonce}}'" // Disables CSP nonce support, otherwise would cancel 'unsafe-inline'
-          // You can re-enable if your application does not modify inline styles dynamically
-        ],
-        "img-src": [
-          "'self'", // Enables loading of images hosted on self origin
-          "https://domain.com/img.png", // Use fully-qualified filenames rather than the https: generic
-          "https://trusted-domain.com", // Avoid using domain stubs unless you can fully trust them
-          "blob:" // If you use Blob to construct images dynamically from javascript
-          // Qualifying img-src properly mitigates strongly against 'unsafe-inline' in style-src
-        ],
-        'font-src': [
-          "'self'",  // Enables loading of fonts hosted on self origin
-          "https://domain.com/font.woff", // Use fully-qualified filenames rather than the https: generic
-          "https://trusted-domain.com" // Avoid using domain stubs unless you can fully trust them
-        ],
-        "worker-src": [
-          "'self'", // Enables loading service worker from self origin,
-          "blob:" // If you use PWA, it is likely that the worker will be instantiated from Blob
-        ],
-        "connect-src": [
-          "'self'", // Enables fetching from self origin
-          "https://api.domain.com/service", // Use largest prefix possible on API routes
-          "wss://api.domain.com/messages" // Add Websocket qualifiers if used
-        ],
-        "object-src": [
-          "'none'"
-        ],
-        "base-uri": [
-          "'none'"
-        ]
-        // Do not use default-src
-      }
-    }
-  }
-})
-```
+With this in mind, we recommend that you implement your Strict CSP policy by starting from our [default configuration values](/documentation/getting-started/configuration#default), and modifying only the required values.

docs/nuxt.config.ts

@@ -15,9 +15,11 @@ export default defineNuxtConfig({
   security: {
     headers: {
       contentSecurityPolicy: {
-        'img-src': ["'self'", "data:", 'https:'] // Allow https: external images
+        'img-src': ["'self'", "data:", 'https:'], // Allow https: external images
+        'connect-src': process.env.NODE_ENV === 'development' ? ["'self'", 'https:', 'ws:'] : ["'self'", 'https:'], // Allow self and image api
+        'frame-src': ['https://www.youtube-nocookie.com', 'https://stackblitz.com'], // Allow self and youtube and stackblitz iframes
       },
-      crossOriginEmbedderPolicy: 'credentialless' // Allow youtube and stackblitz iframes
+      crossOriginEmbedderPolicy: 'unsafe-none', // Allow youtube and stackblitz iframes
     }
   }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-security",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0-rc.4",
   "license": "MIT",
   "type": "module",
   "homepage": "https://nuxt-security.vercel.app",

src/defaultConfig.ts

@@ -10,9 +10,8 @@ export const defaultSecurityConfig = (serverlUrl: string): ModuleOptions => ({
     contentSecurityPolicy: {
       'base-uri': ["'none'"],
       'default-src' : ["'self'"],
+      'connect-src': ["'self'", 'https:'],
       'font-src': ["'self'", 'https:', 'data:'],
-      'form-action': ["'self'"],
-      'frame-ancestors': ["'self'"],
       'img-src': ["'self'", 'data:'],
       'object-src': ["'none'"],
       'script-src-attr': ["'none'"],

test/fixtures/ssgHashes/nuxt.config.ts

@@ -42,6 +42,11 @@ export default defineNuxtConfig({
       meta: true,
       hashScripts: true,
       hashStyles: true
+    },
+    headers: {
+      contentSecurityPolicy: {
+        'frame-ancestors': ["'self'"]
+      }
     }
   }
 })

test/fixtures/ssrNonce/nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
   routeRules: {
     '/renew': {
       security: {
+        //@ts-expect-error Purposedly deprecated configuration
         nonce: { mode: 'check' }
       }
     },

test/headers.test.ts

@@ -37,7 +37,7 @@ describe('[nuxt-security] Headers', async () => {
     expect(cspHeaderValue).toBeTruthy()
     expect(nonceValue).toBeDefined()
     expect(nonceValue).toHaveLength(24)
-    expect(cspHeaderValue).toBe(`base-uri 'none'; default-src 'self'; font-src 'self' https: data:; form-action 'self'; frame-ancestors 'self'; img-src 'self' data:; object-src 'none'; script-src-attr 'none'; style-src 'self' https: 'unsafe-inline'; script-src 'self' https: 'unsafe-inline' 'strict-dynamic' 'nonce-${nonceValue}'; upgrade-insecure-requests;`)
+    expect(cspHeaderValue).toBe(`base-uri 'none'; default-src 'self'; connect-src 'self' https:; font-src 'self' https: data:; img-src 'self' data:; object-src 'none'; script-src-attr 'none'; style-src 'self' https: 'unsafe-inline'; script-src 'self' https: 'unsafe-inline' 'strict-dynamic' 'nonce-${nonceValue}'; upgrade-insecure-requests;`)
   })
 
   it('has `cross-origin-embedder-policy` header set with correct default value', async () => {