Merge pull request #403 from Baroshem/vejja-patch-1

nuxt-modules · Apr 8, 2024 · f765311 · f765311
2 parents 1281beb + fe73651
commit f765311
Show file tree

Hide file tree

Showing 4 changed files with 289 additions and 205 deletions.
diff --git a/docs/content/1.documentation/2.headers/1.csp.md b/docs/content/1.documentation/2.headers/1.csp.md
@@ -249,7 +249,7 @@ This module is meant to work with SSR apps, but you can also use this module in
 This will result in following code being added to your static app `<head>` tag:
 
 ```html
-<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
+<meta http-equiv="Content-Security-Policy" content="base-uri 'none'; font-src 'self' https: data:; form-action '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' 'sha256-{{hash}}'; upgrade-insecure-requests;">
 ```
 
 ::alert{type="info"}
@@ -319,7 +319,7 @@ _Note: Hashes only work for SSG. The `ssg` options are ignored when you build yo
 
 
 
-## Hot reloading during development
+## 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.
 
@@ -393,68 +393,46 @@ Nuxt Security resolves the `contentSecurityPolicy` options using the native Nitr
 - **Substitutive merging** with the string syntax: If you write your rules with the string syntax (e.g. `"img-src": "'self' https:"`), the new route policies will be substituted to the policies defined for higher-level routes.
   Use this strategy if you need to delete existing policies before setting your specific route policies.
 
-## Nonces for SSR
 
-For SSR apps, if you use `'strict-dynamic'` in your `script-src` policy, each of your external scripts will need to be whitelisted by nonce.
+## Including External Scripts
 
-Fortunately, Nuxt Security will include the nonce in all your relevant HTML resources by default.
+You can include any external script (Google Analytics, Stripe, Cloudflare Turnstile, etc.) in your application without compromising the Strict CSP protection offered by Nuxt Security.
 
-You can easily add your external scripts to your HTML document with the `useHead` composable:
+::alert{type="info"}
+You will need to have default values for the `'strict-dynamic'`, `nonce` and `ssg` options.
+<br>
+If you change these default values, please refer to our [Advanced Section on CSP](/documentation/advanced/strict-csp) for alternatives.
+::
 
+- Since Nuxt 3.11, the easiest and universal way to include external scripts is via `useScript`
+
 ```ts
-useHead({
-  script: [
-    { src: 'https://example.com/script.js' }
-    ] 
-  }, { 
-    mode: 'server' 
-    // Set the mode to 'server' if you want to avoid re-loading the script on the client
-    // Set the mode to 'client' if you want client-side only loading
-    // see: https://github.com/unjs/unhead/issues/136 
-  }
-)
-```
-
-If you are unwilling or unable to use `useHead`, you can also directly insert tags into the DOM via `document.createElement()`:
-
-```vue
-<script setup>
-onMounted(() => {
-  const script = document.createElement('script')
-  script.src = 'loader.js'
-  document.head.appendChild(script)
-})
-</script>
+useScript('https://example.com/script.js')
 ```
+
+Please see [useScript](https://unhead.unjs.io/usage/composables/use-script) for available options and usage.
 
-## Integrity Hashes For SSG
-
-For SSG apps, if you use `'strict-dynamic'` in your `script-src` policy, each of your external scripts will need to carry an [integrity attribute](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
-
-This is a mandatory requirement of CSP Level 3.
-
-You can easily add integrity values to your scripts with the `useHead` composable:
 
+- Before Nuxt 3.11, you can also include your external scripts via `useHead`
+
 ```ts
 useHead({
   script: [
     { 
       src: 'https://example.com/script.js',
-      crossorigin: 'anonymous',
-      integrity: 'sha384-.....' // Insert the integrity hash here
-
+    },
+    {
+      mode: 'client' // 'client' option is required in SSG mode
     }
   ] 
 })
 ```
 
-If you insert scripts manually in your app, you can also include their integrity attribute manually
-
+- In all cases, you can also include external scripts directly in the HTML source
+  
 ```html
 <script src="https://example.com/script.js" integrity="sha384-....." crossorigin="anonymous" />
 ```
 
-
-::alert{type="warning"}
-⚠ For further information about integrity hashes with SSG, please refer to our [Advanced Section on CSP](/documentation/advanced/strict-csp) for alternatives.
-::
+When inserting scripts directly in HTML, you will need to provide an integrity hash if you are using SSG mode.
+Many standard scripts (e.g. Google Analytics) do not provide an integrity hash, therefore this method is not compatible with SSG.