From e38aa6b57d300d70ee6c2ad05cb12b419cfa690d Mon Sep 17 00:00:00 2001
From: Thomas Rijpstra <thomas@fourlights.nl>
Date: Mon, 17 Jul 2023 10:55:24 +0200
Subject: [PATCH] chore: update `nonce` documentation

- show usage of new composable
- add comment about workaround unhead bug on ssr
---
 docs/content/2.security/1.headers.md | 30 ++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/docs/content/2.security/1.headers.md b/docs/content/2.security/1.headers.md
index 1bbdbc7f..f6ae638e 100644
--- a/docs/content/2.security/1.headers.md
+++ b/docs/content/2.security/1.headers.md
@@ -3,7 +3,7 @@ title: Headers
 description: ''
 ---
 
-A set of **global** Nuxt `routeRules` that will add appriopriate security headers to your response that will make your application more secure by default. All headers can be overriden by using the module configuration. Check out all the available types [here](https://github.com/Baroshem/nuxt-security/blob/main/src/types.ts).
+A set of **global** Nuxt `routeRules` that will add appropriate security headers to your response that will make your application more secure by default. All headers can be overriden by using the module configuration. Check out all the available types [here](https://github.com/Baroshem/nuxt-security/blob/main/src/types.ts).
 
 It will help you solve [this](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#use-appropriate-security-headers) security problem.
 
@@ -72,10 +72,19 @@ export default defineNuxtConfig({
     nonce: true,
     headers: {
       contentSecurityPolicy: {
+        'style-src': [
+          "'self'",  // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
+          "'nonce-{{nonce}}'",
+        ], 
         'script-src': [
           "'self'",  // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
           "'nonce-{{nonce}}'",
           "'strict-dynamic'"
+        ],
+        'script-src-attr': [
+          "'self'",  // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
+          "'nonce-{{nonce}}'",
+          "'strict-dynamic'"
         ]
       }
     }
@@ -83,7 +92,7 @@ export default defineNuxtConfig({
 })
 ```
 
-This will add a `nonce` attribute to all `<script>` and `<link>` tags in your application. 
+This will add a `nonce` attribute to all `<script>`, `<link>` and `<style>` tags in your application. 
 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
@@ -101,10 +110,23 @@ export default defineNuxtConfig({
 
 #### Using `nonce` in your application code
 
-If you are dynamically adding script or link tags in your application, for example using the `useHead` composable, you can get the current valid nonce value using:
+##### With the `useHead` composable
+If you are dynamically adding script or link tags in your application using the `useHead` composable, all nonce values will be automatically added.
+However, take note that due to [a current bug in unjs/unhead](https://github.com/unjs/unhead/issues/136), you'll need to add a workaround **when using ssr** to prevent double loading and executing of your scripts when using nonce.
+
+```ts
+// workaround unjs/unhead bug for double injection when using nonce
+// by setting the mode to 'server'
+// see: https://github.com/unjs/unhead/issues/136 
+useHead({ script: [{ src: 'https://example.com/script.js' }] }, { mode: 'server' })
+```
+
+##### Directly inserting tags into DOM
+
+If you are unable or unwilling to use `useHead` and are inserting directly into the DOM (e.g. `document.createElement`), you can get the current valid nonce value using the `useNonce` composable:
 
 ```ts
-const nonce = useCookie('nonce')
+const nonce = useNonce()
 ```
 
 ## Cross-Origin-Embedder-Policy