docs: add headers

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

@@ -44,7 +44,7 @@ security: {
 }
 ```
 
-You can find more about configuring `nuxt-security` [here](/getting-started/configuration).
+You can find more about configuring `nuxt-security` [here](/documentation/getting-started/configuration).
 
 ## Using with Nuxt DevTools
 

docs/content/1.documentation/1.getting-started/3.usage.md

@@ -56,6 +56,13 @@ export default defineNuxtConfig({
 })
 ```
 
+::alert{type="warning"}
+When using `routeRules`, make sure to:
+
+1. use the proper HTTP Header names like `Cross-Origin-Embedder-Policy` instead of `crossOriginEmbedderPolicy` and to not set the headers inside `security`. These headers are handled by Nuxt and you can check more [here](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering).
+2. add middleware inside of `security` in certain route rule. This is a custom NuxtSecurity addition that does not exists in core Nuxt.
+::
+
 You can also use route roules in pages like following:
 
 ```vue
@@ -79,12 +86,19 @@ defineRouteRules({
 ```
 
 ::alert{type="warning"}
-When using `routeRules`, make sure to:
+To enable this macro, add following configuration to your `nuxt.config.ts` file:
+
+```ts
+experimental: {
+  inlineRouteRules: true
+},
+```
 
-1. use the proper HTTP Header names like `Cross-Origin-Embedder-Policy` instead of `crossOriginEmbedderPolicy` and to not set the headers inside `security`. These headers are handled by Nuxt and you can check more [here](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering).
-2. add middleware inside of `security` in certain route rule. This is a custom NuxtSecurity addition that does not exists in core Nuxt.
 ::
 
+
+
+
 ## Disabling functionality
 
 To disable certain middleware or headers, follow this pattern:

docs/content/1.documentation/2.headers/1.csp.md

@@ -12,21 +12,116 @@ Content Security Policy (CSP) helps prevent unwanted content from being injected
 ℹ Read more about this header [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
 ::
 
-Default value:
+## Usage
+
+This header is enabled by default but you can change its behavior like following.
+
+```ts
+export default defineNuxtConfig({
+  // Global
+  security: {
+    headers: {
+      contentSecurityPolicy: <OPTIONS>,
+    },
+  },
+
+  // Per route
+  routeRules: {
+    '/custom-route': {
+      headers: {
+        'Content-Security-Policy': <OPTIONS>
+      },
+    }
+  }
+})
+```
+
+You can also disable this header by `contentSecurityPolicy: false`.
+
+## Default value
+
+By default, Nuxt Security will set following value for this header.
+
+```http
+Content-Security-Policy: base-uri 'self'; font-src 'self' https: data:; form-action 'self'; frame-ancestors 'self'; img-src 'self' data:; object-src 'none'; script-src-attr 'none'; style-src 'self' https: 'unsafe-inline'; upgrade-insecure-requests
+```
+
+## Available values
+
+The `contentSecurityPolicy` header can be configured with following values.
 
 ```ts
 contentSecurityPolicy: {
-  'base-uri': ["'self'"],
-  'font-src': ["'self'", 'https:', 'data:'],
-  'form-action': ["'self'"],
-  'frame-ancestors': ["'self'"],
-  'img-src': ["'self'", 'data:'],
-  'object-src': ["'none'"],
-  'script-src-attr': ["'none'"],
-  'style-src': ["'self'", 'https:', "'unsafe-inline'"],
-  'upgrade-insecure-requests': true
-}
+  'child-src'?: CSPSourceValue[];
+  'connect-src'?: CSPSourceValue[];
+  'default-src'?: CSPSourceValue[];
+  'font-src'?: CSPSourceValue[];
+  'frame-src'?: CSPSourceValue[];
+  'img-src'?: CSPSourceValue[];
+  'manifest-src'?: CSPSourceValue[];
+  'media-src'?: CSPSourceValue[];
+  'object-src'?: CSPSourceValue[];
+  'prefetch-src'?: CSPSourceValue[];
+  'script-src'?: CSPSourceValue[];
+  'script-src-elem'?: CSPSourceValue[];
+  'script-src-attr'?: CSPSourceValue[];
+  'style-src'?: CSPSourceValue[];
+  'style-src-elem'?: CSPSourceValue[];
+  'style-src-attr'?: CSPSourceValue[];
+  'worker-src'?: CSPSourceValue[];
+  'base-uri'?: CSPSourceValue[];
+  'sandbox'?: CSPSandboxValue[];
+  'form-action'?: CSPSourceValue[];
+  'frame-ancestors'?: ("'self'" | "'none'" | string)[];
+  'navigate-to'?: ("'self'" | "'none'" | "'unsafe-allow-redirects'" | string)[];
+  'report-uri'?: string[];
+  'report-to'?: string[];
+  'upgrade-insecure-requests'?: boolean;
+} | false
+```
+
+::callout
+#summary
+CSPSourceValue type
+#content
+```ts
+type CSPSourceValue =
+  | "'self'"
+  | "'unsafe-eval'"
+  | "'wasm-unsafe-eval'"
+  | "'unsafe-hashes'"
+  | "'unsafe-inline'"
+  | "'none'"
+  | "'strict-dynamic'"
+  | "'report-sample'"
+  | "'nonce=<base64-value>'"
+  | string;
 ```
+::
+
+::callout
+#summary
+CSPSandboxValue type
+#content
+```ts
+type CSPSandboxValue =
+| 'allow-downloads'
+| 'allow-downloads-without-user-activation'
+| 'allow-forms'
+| 'allow-modals'
+| 'allow-orientation-lock'
+| 'allow-pointer-lock'
+| 'allow-popups'
+| 'allow-popups-to-escape-sandbox'
+| 'allow-presentation'
+| 'allow-same-origin'
+| 'allow-scripts'
+| 'allow-storage-access-by-user-activation'
+| 'allow-top-navigation'
+| 'allow-top-navigation-by-user-activation'
+| 'allow-top-navigation-to-custom-protocols';
+```
+::
 
 ## Static site generation (SSG)
 

docs/content/1.documentation/2.headers/10.xDNSPrefetchControl.md

@@ -0,0 +1,63 @@
+# X-DNS-Prefetch-Control
+
+:badge[Enabled]{type="success"} Smaller but still important security response headers.
+
+---
+
+:ellipsis{right=0px width=75% blur=150px}
+
+The X-DNS-Prefetch-Control HTTP response header controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth. This prefetching is performed in the background, so that the DNS is likely to have been resolved by the time the referenced items are needed. This reduces latency when the user clicks a link.
+
+::alert{type="info"}
+ℹ Read more about this header [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control).
+::
+
+## Usage
+
+This header is enabled by default but you can change its behavior like following.
+
+```ts
+export default defineNuxtConfig({
+  // Global
+  security: {
+    headers: {
+      xDNSPrefetchControl: <OPTIONS>,
+    },
+  },
+
+  // Per route
+  routeRules: {
+    '/custom-route': {
+      headers: {
+        'X-DNS-Prefetch-Control': <OPTIONS>
+      },
+    }
+  }
+})
+```
+
+You can also disable this header by `xDNSPrefetchControl: false`.
+
+## Default value
+
+By default, Nuxt Security will set following value for this header.
+
+```http
+X-DNS-Prefetch-Control: off
+```
+
+## Available values
+
+The `xDNSPrefetchControl` header can be configured with following values.
+
+```ts
+xDNSPrefetchControl: 'on' | 'off' | false;
+```
+
+### `on`
+
+Enables DNS prefetching. This is what browsers do, if they support the feature, when this header is not present
+
+### `off`
+
+Disables DNS prefetching. This is useful if you don't control the link on the pages, or know that you don't want to leak information to these domains.

docs/content/1.documentation/2.headers/11.xDownloadOptions.md

@@ -0,0 +1,59 @@
+# X-Download-Options
+
+:badge[Enabled]{type="success"} Instruct Internet Explorer to not open a downloaded file directly.
+
+---
+
+:ellipsis{right=0px width=75% blur=150px}
+
+The X-Download-Options HTTP header has only one option: X-Download-Options: noopen. This is for Internet Explorer from version 8 on to instruct the browser not to open a download directly in the browser but instead to provide only the Save option. The user has to first save it and then open it in an application.
+
+::alert{type="info"}
+ℹ Read more about this header [here](https://webtechsurvey.com/response-header/x-download-options).
+::
+
+## Usage
+
+This header is enabled by default but you can change its behavior like following.
+
+```ts
+export default defineNuxtConfig({
+  // Global
+  security: {
+    headers: {
+      xDownloadOptions: <OPTIONS>,
+    },
+  },
+
+  // Per route
+  routeRules: {
+    '/custom-route': {
+      headers: {
+        'X-Download-Options': <OPTIONS>
+      },
+    }
+  }
+})
+```
+
+You can also disable this header by `xDownloadOptions: false`.
+
+## Default value
+
+By default, Nuxt Security will set following value for this header.
+
+```http
+X-Download-Options: noopen
+```
+
+## Available values
+
+The `xDownloadOptions` header can be configured with following values.
+
+```ts
+xDownloadOptions: 'noopen' | false;
+```
+
+### `noopen`
+
+When this directive is used, the user can still save and open the file, but this way the malicious code will be prevented from running on our website. Though it will run on the user’s file system.

docs/content/1.documentation/2.headers/12.xFrameOptions.md

@@ -0,0 +1,63 @@
+# X-Frame-Options
+
+:badge[Enabled]{type="success"} Smaller but still important security response headers.
+
+---
+
+:ellipsis{right=0px width=75% blur=150px}
+
+The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a `<frame>`, `<iframe>`, `<embed>` or `<object>`. Sites can use this to avoid click-jacking attacks, by ensuring that their content is not embedded into other sites.
+
+::alert{type="info"}
+ℹ Read more about this header [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).
+::
+
+## Usage
+
+This header is enabled by default but you can change its behavior like following.
+
+```ts
+export default defineNuxtConfig({
+  // Global
+  security: {
+    headers: {
+      xFrameOptions: <OPTIONS>,
+    },
+  },
+
+  // Per route
+  routeRules: {
+    '/custom-route': {
+      headers: {
+        'X-Frame-Options': <OPTIONS>
+      },
+    }
+  }
+})
+```
+
+You can also disable this header by `xFrameOptions: false`.
+
+## Default value
+
+By default, Nuxt Security will set following value for this header.
+
+```http
+X-Frame-Options: SAMEORIGIN
+```
+
+## Available values
+
+The `xFrameOptions` header can be configured with following values.
+
+```ts
+xFrameOptions: 'DENY' | 'SAMEORIGIN' | false;
+```
+
+### `DENY`
+
+The page cannot be displayed in a frame, regardless of the site attempting to do so.
+
+### `SAMEORIGIN`
+
+The page can only be displayed if all ancestor frames are same origin to the page itself.