Skip to content

Commit 819fedc

Browse files
committed
docs: add headers
1 parent 724186f commit 819fedc

18 files changed

+1084
-200
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ security: {
4444
}
4545
```
4646

47-
You can find more about configuring `nuxt-security` [here](/getting-started/configuration).
47+
You can find more about configuring `nuxt-security` [here](/documentation/getting-started/configuration).
4848

4949
## Using with Nuxt DevTools
5050

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

+17-3
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,13 @@ export default defineNuxtConfig({
5656
})
5757
```
5858

59+
::alert{type="warning"}
60+
When using `routeRules`, make sure to:
61+
62+
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).
63+
2. add middleware inside of `security` in certain route rule. This is a custom NuxtSecurity addition that does not exists in core Nuxt.
64+
::
65+
5966
You can also use route roules in pages like following:
6067

6168
```vue
@@ -79,12 +86,19 @@ defineRouteRules({
7986
```
8087

8188
::alert{type="warning"}
82-
When using `routeRules`, make sure to:
89+
To enable this macro, add following configuration to your `nuxt.config.ts` file:
90+
91+
```ts
92+
experimental: {
93+
inlineRouteRules: true
94+
},
95+
```
8396

84-
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).
85-
2. add middleware inside of `security` in certain route rule. This is a custom NuxtSecurity addition that does not exists in core Nuxt.
8697
::
8798

99+
100+
101+
88102
## Disabling functionality
89103

90104
To disable certain middleware or headers, follow this pattern:

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

+106-11
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,116 @@ Content Security Policy (CSP) helps prevent unwanted content from being injected
1212
ℹ Read more about this header [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
1313
::
1414

15-
Default value:
15+
## Usage
16+
17+
This header is enabled by default but you can change its behavior like following.
18+
19+
```ts
20+
export default defineNuxtConfig({
21+
// Global
22+
security: {
23+
headers: {
24+
contentSecurityPolicy: <OPTIONS>,
25+
},
26+
},
27+
28+
// Per route
29+
routeRules: {
30+
'/custom-route': {
31+
headers: {
32+
'Content-Security-Policy': <OPTIONS>
33+
},
34+
}
35+
}
36+
})
37+
```
38+
39+
You can also disable this header by `contentSecurityPolicy: false`.
40+
41+
## Default value
42+
43+
By default, Nuxt Security will set following value for this header.
44+
45+
```http
46+
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
47+
```
48+
49+
## Available values
50+
51+
The `contentSecurityPolicy` header can be configured with following values.
1652

1753
```ts
1854
contentSecurityPolicy: {
19-
'base-uri': ["'self'"],
20-
'font-src': ["'self'", 'https:', 'data:'],
21-
'form-action': ["'self'"],
22-
'frame-ancestors': ["'self'"],
23-
'img-src': ["'self'", 'data:'],
24-
'object-src': ["'none'"],
25-
'script-src-attr': ["'none'"],
26-
'style-src': ["'self'", 'https:', "'unsafe-inline'"],
27-
'upgrade-insecure-requests': true
28-
}
55+
'child-src'?: CSPSourceValue[];
56+
'connect-src'?: CSPSourceValue[];
57+
'default-src'?: CSPSourceValue[];
58+
'font-src'?: CSPSourceValue[];
59+
'frame-src'?: CSPSourceValue[];
60+
'img-src'?: CSPSourceValue[];
61+
'manifest-src'?: CSPSourceValue[];
62+
'media-src'?: CSPSourceValue[];
63+
'object-src'?: CSPSourceValue[];
64+
'prefetch-src'?: CSPSourceValue[];
65+
'script-src'?: CSPSourceValue[];
66+
'script-src-elem'?: CSPSourceValue[];
67+
'script-src-attr'?: CSPSourceValue[];
68+
'style-src'?: CSPSourceValue[];
69+
'style-src-elem'?: CSPSourceValue[];
70+
'style-src-attr'?: CSPSourceValue[];
71+
'worker-src'?: CSPSourceValue[];
72+
'base-uri'?: CSPSourceValue[];
73+
'sandbox'?: CSPSandboxValue[];
74+
'form-action'?: CSPSourceValue[];
75+
'frame-ancestors'?: ("'self'" | "'none'" | string)[];
76+
'navigate-to'?: ("'self'" | "'none'" | "'unsafe-allow-redirects'" | string)[];
77+
'report-uri'?: string[];
78+
'report-to'?: string[];
79+
'upgrade-insecure-requests'?: boolean;
80+
} | false
81+
```
82+
83+
::callout
84+
#summary
85+
CSPSourceValue type
86+
#content
87+
```ts
88+
type CSPSourceValue =
89+
| "'self'"
90+
| "'unsafe-eval'"
91+
| "'wasm-unsafe-eval'"
92+
| "'unsafe-hashes'"
93+
| "'unsafe-inline'"
94+
| "'none'"
95+
| "'strict-dynamic'"
96+
| "'report-sample'"
97+
| "'nonce=<base64-value>'"
98+
| string;
2999
```
100+
::
101+
102+
::callout
103+
#summary
104+
CSPSandboxValue type
105+
#content
106+
```ts
107+
type CSPSandboxValue =
108+
| 'allow-downloads'
109+
| 'allow-downloads-without-user-activation'
110+
| 'allow-forms'
111+
| 'allow-modals'
112+
| 'allow-orientation-lock'
113+
| 'allow-pointer-lock'
114+
| 'allow-popups'
115+
| 'allow-popups-to-escape-sandbox'
116+
| 'allow-presentation'
117+
| 'allow-same-origin'
118+
| 'allow-scripts'
119+
| 'allow-storage-access-by-user-activation'
120+
| 'allow-top-navigation'
121+
| 'allow-top-navigation-by-user-activation'
122+
| 'allow-top-navigation-to-custom-protocols';
123+
```
124+
::
30125

31126
## Static site generation (SSG)
32127

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# X-DNS-Prefetch-Control
2+
3+
:badge[Enabled]{type="success"} Smaller but still important security response headers.
4+
5+
---
6+
7+
:ellipsis{right=0px width=75% blur=150px}
8+
9+
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.
10+
11+
::alert{type="info"}
12+
ℹ Read more about this header [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control).
13+
::
14+
15+
## Usage
16+
17+
This header is enabled by default but you can change its behavior like following.
18+
19+
```ts
20+
export default defineNuxtConfig({
21+
// Global
22+
security: {
23+
headers: {
24+
xDNSPrefetchControl: <OPTIONS>,
25+
},
26+
},
27+
28+
// Per route
29+
routeRules: {
30+
'/custom-route': {
31+
headers: {
32+
'X-DNS-Prefetch-Control': <OPTIONS>
33+
},
34+
}
35+
}
36+
})
37+
```
38+
39+
You can also disable this header by `xDNSPrefetchControl: false`.
40+
41+
## Default value
42+
43+
By default, Nuxt Security will set following value for this header.
44+
45+
```http
46+
X-DNS-Prefetch-Control: off
47+
```
48+
49+
## Available values
50+
51+
The `xDNSPrefetchControl` header can be configured with following values.
52+
53+
```ts
54+
xDNSPrefetchControl: 'on' | 'off' | false;
55+
```
56+
57+
### `on`
58+
59+
Enables DNS prefetching. This is what browsers do, if they support the feature, when this header is not present
60+
61+
### `off`
62+
63+
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.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# X-Download-Options
2+
3+
:badge[Enabled]{type="success"} Instruct Internet Explorer to not open a downloaded file directly.
4+
5+
---
6+
7+
:ellipsis{right=0px width=75% blur=150px}
8+
9+
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.
10+
11+
::alert{type="info"}
12+
ℹ Read more about this header [here](https://webtechsurvey.com/response-header/x-download-options).
13+
::
14+
15+
## Usage
16+
17+
This header is enabled by default but you can change its behavior like following.
18+
19+
```ts
20+
export default defineNuxtConfig({
21+
// Global
22+
security: {
23+
headers: {
24+
xDownloadOptions: <OPTIONS>,
25+
},
26+
},
27+
28+
// Per route
29+
routeRules: {
30+
'/custom-route': {
31+
headers: {
32+
'X-Download-Options': <OPTIONS>
33+
},
34+
}
35+
}
36+
})
37+
```
38+
39+
You can also disable this header by `xDownloadOptions: false`.
40+
41+
## Default value
42+
43+
By default, Nuxt Security will set following value for this header.
44+
45+
```http
46+
X-Download-Options: noopen
47+
```
48+
49+
## Available values
50+
51+
The `xDownloadOptions` header can be configured with following values.
52+
53+
```ts
54+
xDownloadOptions: 'noopen' | false;
55+
```
56+
57+
### `noopen`
58+
59+
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.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# X-Frame-Options
2+
3+
:badge[Enabled]{type="success"} Smaller but still important security response headers.
4+
5+
---
6+
7+
:ellipsis{right=0px width=75% blur=150px}
8+
9+
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.
10+
11+
::alert{type="info"}
12+
ℹ Read more about this header [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).
13+
::
14+
15+
## Usage
16+
17+
This header is enabled by default but you can change its behavior like following.
18+
19+
```ts
20+
export default defineNuxtConfig({
21+
// Global
22+
security: {
23+
headers: {
24+
xFrameOptions: <OPTIONS>,
25+
},
26+
},
27+
28+
// Per route
29+
routeRules: {
30+
'/custom-route': {
31+
headers: {
32+
'X-Frame-Options': <OPTIONS>
33+
},
34+
}
35+
}
36+
})
37+
```
38+
39+
You can also disable this header by `xFrameOptions: false`.
40+
41+
## Default value
42+
43+
By default, Nuxt Security will set following value for this header.
44+
45+
```http
46+
X-Frame-Options: SAMEORIGIN
47+
```
48+
49+
## Available values
50+
51+
The `xFrameOptions` header can be configured with following values.
52+
53+
```ts
54+
xFrameOptions: 'DENY' | 'SAMEORIGIN' | false;
55+
```
56+
57+
### `DENY`
58+
59+
The page cannot be displayed in a frame, regardless of the site attempting to do so.
60+
61+
### `SAMEORIGIN`
62+
63+
The page can only be displayed if all ancestor frames are same origin to the page itself.

0 commit comments

Comments
 (0)