From d907adc42018debe6480ddd65ecd610844bf3eb5 Mon Sep 17 00:00:00 2001
From: Thomas Rijpstra <thomas@fourlights.nl>
Date: Thu, 12 Oct 2023 16:22:03 +0200
Subject: [PATCH] chore: update `nonce` documentation about `unsafe-inline`
 during development

---
 docs/content/1.documentation/2.headers/1.csp.md | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/docs/content/1.documentation/2.headers/1.csp.md b/docs/content/1.documentation/2.headers/1.csp.md
index d4d04dcc..7a460d31 100644
--- a/docs/content/1.documentation/2.headers/1.csp.md
+++ b/docs/content/1.documentation/2.headers/1.csp.md
@@ -160,10 +160,15 @@ export default defineNuxtConfig({
     nonce: true,
     headers: {
       contentSecurityPolicy: {
-        'style-src': [
-          "'self'",  // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
-          "'nonce-{{nonce}}'",
-        ], 
+        'style-src':
+          process.env.NODE_ENV === 'production'
+            ? [
+              "'self'", // backwards compatibility for older browsers that don't support strict-dynamic
+              "'nonce-{{nonce}}'",
+              "'strict-dynamic'",
+            ]
+            : // In dev mode, we allow unsafe-inline so that hot reloading keeps working
+            ["'self'", "'unsafe-inline'"],
         'script-src': [
           "'self'",  // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
           "'nonce-{{nonce}}'",
@@ -181,6 +186,8 @@ export default defineNuxtConfig({
 ```
 
 This will add a `nonce` attribute to all `<script>`, `<link>` and `<style>` tags in your application. 
+Note that to allow hot reloading during development, we conditionally add `'unsafe-inline'` to the `style-src` value.
+
 The `nonce` value is generated per request and is added to the CSP header. This behaviour can be tweaked on a route level by using the `routeRules` option:
 
 ```ts