Merge pull request #475 from dargmuesli/feat/csp/vite

feat(csp): support style nonce in development

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

@@ -215,15 +215,6 @@ export default defineNuxtConfig({
 - `"'nonce-{{nonce}}'"` placeholder: Include this value in any individual policy that you want to be governed by nonce. 
 
 
-::alert{type="warning"}
-Our default recommendation is to avoid using the `"'nonce-{{nonce}}'"` placeholder on `style-src` policy.
-<br>
-⚠ This is because Nuxt's mechanism for Client-Side hydration of styles could be blocked by CSP in that case.
-<br>
-For further discussion and alternatives, please refer to our [Advanced Section on Strict CSP](/documentation/advanced/strict-csp).
-::
-
-
 _Note: Nonce only works for SSR. The `nonce` option and the `"'nonce-{{nonce}}'"` placeholders are ignored when you build your app for SSG via `nuxi generate`._
 
 
@@ -304,28 +295,6 @@ Please see below our section on [Integrity Hashes For SSG](#integrity-hashes-for
 _Note: Hashes only work for SSG. The `ssg` options are ignored when you build your app for SSR via `nuxi build`._
 
 
-
-## Hot reload during development
-
-If you have enabled `nonce-{{nonce}}` on `style-src`, you will need to disable it in order to allow hot reloading during development.
-
-```ts
-export default defineNuxtConfig({
-  security: {
-    nonce: true,
-    headers: {
-      contentSecurityPolicy: {
-        'style-src': process.env.NODE_ENV === 'development' ? 
-        ["'self'", "'unsafe-inline'"] :
-        ["'self'", "'unsafe-inline'", "nonce-{{nonce}}"]
-      }
-    }
-  }
-})
-```
-
-Note that this is not necessary if you use our default configuration settings.
-
 ## Per-route configuration
 
 All Content Security Policy options can be defined on a per-route level.

src/runtime/nitro/plugins/40-cspSsrNonce.ts

@@ -53,5 +53,12 @@ export default defineNitroPlugin((nitroApp) => {
         return element
       })
     }
+
+    // Add meta header for Vite in development
+    if (import.meta.dev) {
+      html.head.push(
+        `<meta property="csp-nonce" nonce="${nonce}">`,
+      )
+    }
   })
 })