Merge pull request #492 from Baroshem/chore/2.0.0

Chore/2.0.0

Author: Baroshem

docs/content/1.documentation/1.getting-started/1.setup.md

@@ -24,18 +24,3 @@ security: {
 ```
 
 You can find more about configuring `nuxt-security` [here](/documentation/getting-started/configuration).
-
-## Using with Nuxt DevTools
-
-In order to make this module work with Nuxt DevTools add following configuration to your projects:
-
-```js{}[nuxt.config.ts]
-export default defineNuxtConfig({
-  modules: ['nuxt-security', '@nuxt/devtools'],
-  security: {
-    headers: {
-      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp',
-    },
-  },
-});
-```

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.

docs/content/1.documentation/3.middleware/4.cors-handler.md

@@ -48,8 +48,9 @@ You can also disable the middleware globally or per route by setting `corsHandle
 CORS handler accepts following configuration options:
 
 ```ts
-interface H3CorsOptions {
-  origin?: '*' | 'null' | (string | RegExp)[] | ((origin: string) => boolean);
+interface CorsOptions = {
+  origin?: '*' | string | string[];
+  useRegExp?: boolean;
   methods?: '*' | HTTPMethod[];
   allowHeaders?: '*' | string[];
   exposeHeaders?: '*' | string[];
@@ -65,7 +66,16 @@ interface H3CorsOptions {
 
 - Default: `${serverUrl}`
 
-The Access-Control-Allow-Origin response header indicates whether the response can be shared with requesting code from the given origin.
+The Access-Control-Allow-Origin response header indicates whether the response can be shared with requesting code from the given origin. Use `'*'` to allow all origins. You can pass a single origin, or a list of origins.
+
+### `useRegExp`
+
+Set to `true` to parse all origin values into a regular expression using `new RegExp(origin, 'i')`.
+You cannot use RegExp instances directly as origin values, because the nuxt config needs to be serializable.
+When using regular expressions, make sure to escape dots in origins correctly. Otherwise a dot will match every character.
+
+The following matches `https://1.foo.example.com`, `https://a.b.c.foo.example.com`, but not `https://foo.example.com`.
+`'(.*)\\.foo.example\\.com'`
 
 ### `methods`
 

docs/content/1.documentation/5.advanced/2.faq.md

@@ -245,43 +245,14 @@ Next, you need to configure your img tag to include the `crossorigin` attribute:
 ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/138#issuecomment-1497883915).
 ::
 
-## Using nonce with CSP for Nuxt Image
+## Nuxt Image
 
-Having securely configured images is crucial for modern web applications. Check out how to do it below:
-
-```ts
-// nuxt.config.ts
-
-security: {
-  nonce: true,
-  headers: {
-    contentSecurityPolicy: {
-      'img-src': ["'self'", 'data:', 'https:'],
-      'script-src': [
-        "'self'", // backwards compatibility for older browsers that don't support strict-dynamic
-        "'nonce-{{nonce}}'",
-        "'strict-dynamic'"
-      ],
-      'script-src-attr': ["'self'"]
-    }
-  }
-}
-```
-
-And then configure `NuxtImg` like following:
-
-```vue
-<template>
-  <NuxtImg src="https://localhost:8000/api/image/xyz" :nonce="nonce" />
-</template>
-
-<script lang="ts" setup>
-const nonce = useNonce()
-</script>
-```
+When using `<NuxtImg>` or `<NuxtPicture>`, an inline script will be used for error handling during SSR.
+This will lead to CSP issues if `unsafe-inline` is not allowed and the image fails to load.
+Using nonces for inline event handlers is not supported, so currently there is no workaround.
 
 ::alert{type="info"}
-ℹ Read more about it [here](https://github.com/Baroshem/nuxt-security/issues/218#issuecomment-1736940913).
+ℹ Read more about it [here](https://github.com/nuxt/image/issues/1011#issuecomment-2242761992).
 ::
 
 ## Issue on Firefox when using IFrame

docs/content/1.documentation/5.advanced/3.strict-csp.md

@@ -312,7 +312,7 @@ export defaultNuxtConfig({
 
 ### The `useScript` composable
 
-Starting from Nuxt 3.11, it is possible to insert any external script in one single line with the new `useScript` composable.
+The Nuxt Scripts module allows you to insert any external script in one single line with its `useScript` composable.
 
 ```ts
 useScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js')
@@ -324,24 +324,24 @@ The `useScript` method has several key features:
 - It does not insert inline event handlers, therefore CSP will never block the script from executing after load
 - It is designed to load and execute asynchronously, which means you don't have to write code to check whether the script has finished loading before using it
 
-For all of these reasons, we strongly recommend `useScript` as the best way to load your external scripts in a CSP-compatible way.
+In addition, Nuxt Scripts provide easy integration of `useScript` into any Nuxt application:
+- A number of standard scripts are already pre-packaged
+- You can load your scripts globally in `nuxt.config.ts`
+- `useScript` is auto-imported
 
-The `unjs/unhead` repo has a [detailed section here](https://unhead.unjs.io/usage/composables/use-script) on how to use `useScript`.
+For all of these reasons, we strongly recommend using the Nuxt Scripts module as the best way to load your external scripts in a CSP-compatible way.
 
-Check out their examples and find out how easy it is to include Google Analytics in your application:
+Check out their examples on [@nuxt/scripts](https://scripts.nuxt.com) and find out how easy it is to include Google Analytics in your application:
 
 ```ts
-import { useScript } from 'unhead'
-
-const { gtag } = useScript({
-  src: 'https://www.google-analytics.com/analytics.js',
-}, {
+const { gtag } = useScript('https://www.google-analytics.com/analytics.js', {
   use: () => ({ gtag: window.gtag })
 })
 // Now use any feature of Google's gtag() function as you wish
 // Instead of writing complex code to find and check window.gtag
 ```
 
+If you don't want to install the Nuxt Scripts module, you can still use the uderlying native `useScript` method. You will need to `import { useScript } from '@unhead/vue'` in order to use it.
 
 ### The `useHead` composable
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-security",
-  "version": "2.0.0-rc.9",
+  "version": "2.0.0",
   "license": "MIT",
   "type": "module",
   "homepage": "https://nuxt-security.vercel.app",
@@ -56,19 +56,19 @@
     "defu": "^6.1.1",
     "nuxt-csurf": "^1.5.1",
     "pathe": "^1.0.0",
-    "unplugin-remove": "^1.0.2",
+    "unplugin-remove": "^1.0.3",
     "xss": "^1.0.14"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.3.10",
-    "@nuxt/module-builder": "^0.6.0",
+    "@nuxt/module-builder": "^0.8.3",
     "@nuxt/schema": "^3.11.2",
     "@nuxt/test-utils": "^3.12.0",
     "@types/node": "^18.18.1",
     "eslint": "^8.50.0",
     "nuxt": "^3.11.2",
-    "vitest": "^1.3.1",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vitest": "^1.3.1"
   },
   "stackblitz": {
     "installDependencies": false,

playground/components/ServerComponent.server.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <h1>Server-only Nuxt-Island component</h1>
+    <p>Nonce: <span id="server-nonce">{{ nonce }}</span></p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const nonce = useNonce()
+</script>

playground/nuxt.config.ts

@@ -48,7 +48,6 @@ export default defineNuxtConfig({
   // Global configuration
   security: {
     headers: {
-      crossOriginEmbedderPolicy: false,
       xXSSProtection: '0'
     },
     rateLimiter: {

playground/pages/island.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    Island Page
+    <ServerComponent />
+  </div>
+</template>

src/defaultConfig.ts

@@ -9,7 +9,7 @@ export const defaultSecurityConfig = (serverlUrl: string, strict: boolean) => {
     headers: {
       crossOriginResourcePolicy: 'same-origin',
       crossOriginOpenerPolicy: 'same-origin',
-      crossOriginEmbedderPolicy: 'credentialless',
+      crossOriginEmbedderPolicy: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'credentialless',
       contentSecurityPolicy: {
         'base-uri': ["'none'"],
         'font-src': ["'self'", 'https:', 'data:'],