-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add docs on adding HTTP security headers. #25833
Merged
Merged
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
b36c0f5
Add docs on adding HTTP security headers.
leerob 967d909
Add to manifest.
leerob 8ec5975
Merge branch 'canary' into security-headers
leerob ea8cdd5
Slight typo.
leerob ccab4a0
Merge branch 'security-headers' of https://github.com/leerob/next.js …
leerob 6bcaca5
Update docs/advanced-features/security-headers.md
leerob 35367dc
Update docs/advanced-features/security-headers.md
leerob 75a151c
Merge branch 'canary' into security-headers
leerob 73d14d9
Update docs/advanced-features/security-headers.md
leerob e3804bd
Merge branch 'canary' into security-headers
leerob 2557d3d
Apply suggestions from code review
leerob File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,136 @@ | ||
--- | ||
description: Improve the security of your Next.js application by adding HTTP response headers. | ||
--- | ||
|
||
# Security Headers | ||
|
||
To improve the security of your application, you can use [`headers`](/docs/api-reference/next.config.js/headers.md) in `next.config.js` to apply HTTP response headers to all routes in your application. | ||
|
||
```jsx | ||
// next.config.js | ||
|
||
// You can choose which headers to add to the list | ||
// after learning more below. | ||
const securityHeaders = []; | ||
|
||
async headers() { | ||
return [ | ||
{ | ||
// Apply these headers to all routes in your application. | ||
source: '/(.*)', | ||
headers: securityHeaders | ||
} | ||
} | ||
``` | ||
|
||
## Options | ||
|
||
### [X-DNS-Prefetch-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control) | ||
|
||
This header controls DNS prefetching, allowing browsers to proactively perform domain name resolution on external links, images, CSS, JavaScript, and more. This prefetching is performed in the background, so the [DNS](https://developer.mozilla.org/en-US/docs/Glossary/DNS) is more likely to be resolved by the time the referenced items are needed. This reduces latency when the user clicks a link. | ||
|
||
```jsx | ||
{ | ||
key: 'X-DNS-Prefetch-Control', | ||
value: 'on' | ||
} | ||
``` | ||
|
||
### [Strict-Transport-Security](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security) | ||
|
||
This header informs browsers it should only be accessed using HTTPS, instead of using HTTP. Using the configuration below, all present and future subdomains will use HTTPS for a `max-age` of 2 years. This blocks access to pages or subdomains that can only be served over HTTP. | ||
leerob marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
If you're deploying to [Vercel](https://vercel.com/docs/edge-network/headers#strict-transport-security), this header is not necessary as it's automatically added to all deployments. | ||
|
||
```jsx | ||
{ | ||
key: 'Strict-Transport-Security', | ||
value: 'max-age=31536000; includeSubDomains; preload' | ||
} | ||
``` | ||
|
||
### [X-XSS-Protection](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection) | ||
|
||
This header stops pages from loading when they detect reflected cross-site scripting (XSS) attacks. Although this protection is not necessary when sites implement a strong [`Content-Security-Policy`](#content-security-policy) disabling the use of inline JavaScript (`'unsafe-inline'`), it can still provide protection for older web browsers that don't support CSP. | ||
|
||
```jsx | ||
{ | ||
key: 'X-XSS-Protection', | ||
value: '1; mode=block' | ||
} | ||
``` | ||
|
||
### [X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options) | ||
|
||
This header indicates whether the site should be allowed to be displayed within an `iframe`. This can prevent against clickjacking attacks. This header has been superseded by CSP's `frame-ancestors` option, which has better support in modern browsers. | ||
|
||
```jsx | ||
{ | ||
key: 'X-Frame-Options', | ||
value: 'SAMEORIGIN' | ||
} | ||
``` | ||
|
||
### [Permissions-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy) | ||
|
||
This header allows you to control which features and APIs can be used in the browser. It was previously named `Feature-Policy`. You can view the full list of permission options [here](https://www.w3.org/TR/permissions-policy-1/). | ||
|
||
```jsx | ||
{ | ||
key: 'Permissions-Policy', | ||
value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()' | ||
} | ||
``` | ||
|
||
### [X-Content-Type-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options) | ||
|
||
This header prevents the browser from attempting to guess the type of content if the `Content-Type` header is not explicitly set. This can prevent XSS exploits for websites that allow users to upload and share files. For example, a user trying to download an image, but having it treated as a different `Content-Type` like an executable, which could be malicious. This header also applies to downloading browser extensions. The only valid value for this header is `nosniff`. | ||
|
||
```jsx | ||
{ | ||
key: 'X-Content-Type-Options', | ||
value: 'nosniff' | ||
} | ||
``` | ||
|
||
### [Referrer-Policy](https://scotthelme.co.uk/a-new-security-header-referrer-policy/) | ||
|
||
This header controls how much information the browser includes when navigating from the current website (origin) to another. You can read about the different options [here](https://scotthelme.co.uk/a-new-security-header-referrer-policy/). | ||
|
||
```jsx | ||
{ | ||
key: 'Referrer-Policy', | ||
value: 'origin-when-cross-origin' | ||
} | ||
``` | ||
|
||
### [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) | ||
|
||
This header helps prevent cross-site scripting (XSS), clickjacking and other code injection attacks. Content Security Policy (CSP) can specify allowed origins for content including scripts, stylesheets, images, fonts, objects, media (audio, video), iframes, and more. | ||
|
||
You can read about the many different CSP options [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). | ||
|
||
```jsx | ||
{ | ||
key: 'Content-Security-Policy', | ||
value: // Your CSP Policy | ||
} | ||
``` | ||
|
||
### References | ||
|
||
- [MDN](https://developer.mozilla.org) | ||
- [Varun Naik](https://blog.vnaik.com/posts/web-attacks.html) | ||
- [Scott Helme](https://scotthelme.co.uk) | ||
leerob marked this conversation as resolved.
Show resolved
Hide resolved
leerob marked this conversation as resolved.
Show resolved
Hide resolved
|
||
- [Mozilla Observatory](https://observatory.mozilla.org/) | ||
|
||
## Related | ||
|
||
For more information, we recommend the following sections: | ||
|
||
<div class="card"> | ||
<a href="/docs/api-reference/next.config.js/headers.md"> | ||
<b>Headers:</b> | ||
<small>Add custom HTTP headers to your Next.js app.</small> | ||
</a> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hello, array closing bracket is missing here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice catch, would you like to submit a PR to fix it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@styfle Hi sure , just submitted pull request here: #26375