From ff0ecfe7405c1fa405f9feaa291fa46b2697ccdc Mon Sep 17 00:00:00 2001
From: Jonas Thelemann <e-mail@jonas-thelemann.de>
Date: Wed, 12 Jun 2024 11:54:38 +0200
Subject: [PATCH] feat(csp): support style nonce in development

---
 .../1.documentation/2.headers/1.csp.md        | 31 -------------------
 src/runtime/nitro/plugins/40-cspSsrNonce.ts   |  7 +++++
 2 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/docs/content/1.documentation/2.headers/1.csp.md b/docs/content/1.documentation/2.headers/1.csp.md
index 8a5a90c..a16d238 100644
--- a/docs/content/1.documentation/2.headers/1.csp.md
+++ b/docs/content/1.documentation/2.headers/1.csp.md
@@ -217,15 +217,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`._
 
 
@@ -306,28 +297,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.
diff --git a/src/runtime/nitro/plugins/40-cspSsrNonce.ts b/src/runtime/nitro/plugins/40-cspSsrNonce.ts
index ba97c30..e5b636e 100644
--- a/src/runtime/nitro/plugins/40-cspSsrNonce.ts
+++ b/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}">`,
+      )
+    }
   })
 })