From b36c0f54db53e0341ba1534ad333c39ca08499a0 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Sun, 6 Jun 2021 16:35:21 -0500 Subject: [PATCH 1/7] Add docs on adding HTTP security headers. --- docs/advanced-features/security-headers.md | 129 +++++++++++++++++++ docs/api-reference/next.config.js/headers.md | 11 ++ 2 files changed, 140 insertions(+) create mode 100644 docs/advanced-features/security-headers.md diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md new file mode 100644 index 0000000000000..f7b55fd73035a --- /dev/null +++ b/docs/advanced-features/security-headers.md @@ -0,0 +1,129 @@ +--- +description: Improve the security of your Next.js application by add HTTP response headers. +--- + +# Security Headers + +To improve the security of your application, you can use `headers` 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. + +```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 these protections are not as necessary when sites implement a strong `Content-Security-Policy` disabling the use of inline JavaScript (`'unsafe-inline'`), they can still provide protections for older web browsers that don't yet 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 with navigations away from their pages. 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. 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 +} +``` + +Thank you to MDN and [these](https://blog.vnaik.com/posts/web-attacks.html) [resources](https://scotthelme.co.uk/) for helping with the content of this document. + +## Related + +For more information, we recommend the following sections: + +
+ + Headers: + Add custom HTTP headers to your Next.js app. + +
diff --git a/docs/api-reference/next.config.js/headers.md b/docs/api-reference/next.config.js/headers.md index 69bc627a84aef..e467d7363af11 100644 --- a/docs/api-reference/next.config.js/headers.md +++ b/docs/api-reference/next.config.js/headers.md @@ -373,3 +373,14 @@ module.exports = { ### Cache-Control Cache-Control headers set in next.config.js will be overwritten in production to ensure that static assets can be cached effectively. If you need to revalidate the cache of a page that has been [statically generated](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), you can do so by setting `revalidate` in the page's [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) function. + +## Related + +For more information, we recommend the following sections: + +
+ + Security Headers: + Improve the security of your Next.js application by add HTTP response headers. + +
From 967d909537693cc43c2f92deb53d732ebd10501e Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Sun, 6 Jun 2021 16:36:16 -0500 Subject: [PATCH 2/7] Add to manifest. --- docs/manifest.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/manifest.json b/docs/manifest.json index ceefa4ceca61c..49b95291cbd60 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -204,6 +204,10 @@ { "title": "Internationalized Routing", "path": "/docs/advanced-features/i18n-routing.md" + }, + { + "title": "Security Headers", + "path": "/docs/advanced-features/security-headers.md" } ] }, From ea8cdd5be53f35160418f28c890ab93054d07b93 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Sun, 6 Jun 2021 16:43:33 -0500 Subject: [PATCH 3/7] Slight typo. --- docs/advanced-features/security-headers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md index f7b55fd73035a..8cf89105c33c2 100644 --- a/docs/advanced-features/security-headers.md +++ b/docs/advanced-features/security-headers.md @@ -1,5 +1,5 @@ --- -description: Improve the security of your Next.js application by add HTTP response headers. +description: Improve the security of your Next.js application by adding HTTP response headers. --- # Security Headers From 6bcaca5d209d796eb34ad72c2d9f2b9e9b5c7df2 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Mon, 7 Jun 2021 14:05:49 -0500 Subject: [PATCH 4/7] Update docs/advanced-features/security-headers.md --- docs/advanced-features/security-headers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md index 8cf89105c33c2..9044756e363d6 100644 --- a/docs/advanced-features/security-headers.md +++ b/docs/advanced-features/security-headers.md @@ -49,7 +49,7 @@ This header informs browsers it should only be accessed using HTTPS, instead of ### [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 these protections are not as necessary when sites implement a strong `Content-Security-Policy` disabling the use of inline JavaScript (`'unsafe-inline'`), they can still provide protections for older web browsers that don't yet support CSP. +This header stops pages from loading when they detect reflected cross-site scripting (XSS) attacks. Although these protections are not as necessary when sites implement a strong [`Content-Security-Policy`](#content-security-policy) disabling the use of inline JavaScript (`'unsafe-inline'`), they can still provide protections for older web browsers that don't yet support CSP. ```jsx { From 35367dc8372ac9a8b17b65b76ae2da8bfae6eb55 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Mon, 7 Jun 2021 14:05:58 -0500 Subject: [PATCH 5/7] Update docs/advanced-features/security-headers.md --- docs/advanced-features/security-headers.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md index 9044756e363d6..9bf51374bf0d5 100644 --- a/docs/advanced-features/security-headers.md +++ b/docs/advanced-features/security-headers.md @@ -115,7 +115,11 @@ You can read about the many different CSP options [here](https://developer.mozil } ``` -Thank you to MDN and [these](https://blog.vnaik.com/posts/web-attacks.html) [resources](https://scotthelme.co.uk/) for helping with the content of this document. +### References + +- [MDN](https://developer.mozilla.org) +- [Varun Naik](https://blog.vnaik.com/posts/web-attacks.html) +- [Scott Helme](https://scotthelme.co.uk) ## Related From 73d14d97e01541c7535a47937e16e52c18fd1989 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Fri, 18 Jun 2021 09:12:24 -0500 Subject: [PATCH 6/7] Update docs/advanced-features/security-headers.md --- docs/advanced-features/security-headers.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md index 9bf51374bf0d5..9ac6487bc385a 100644 --- a/docs/advanced-features/security-headers.md +++ b/docs/advanced-features/security-headers.md @@ -120,6 +120,7 @@ You can read about the many different CSP options [here](https://developer.mozil - [MDN](https://developer.mozilla.org) - [Varun Naik](https://blog.vnaik.com/posts/web-attacks.html) - [Scott Helme](https://scotthelme.co.uk) +- [Mozilla Observatory](https://observatory.mozilla.org/) ## Related From 2557d3d72b327d05a3acfffd647377f157da959f Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Fri, 18 Jun 2021 09:53:20 -0500 Subject: [PATCH 7/7] Apply suggestions from code review Co-authored-by: Steven --- docs/advanced-features/security-headers.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/advanced-features/security-headers.md b/docs/advanced-features/security-headers.md index 9ac6487bc385a..0fc6a1f91a4cb 100644 --- a/docs/advanced-features/security-headers.md +++ b/docs/advanced-features/security-headers.md @@ -4,7 +4,7 @@ description: Improve the security of your Next.js application by adding HTTP res # Security Headers -To improve the security of your application, you can use `headers` in `next.config.js` to apply HTTP response headers to all routes in your application. +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 @@ -40,6 +40,8 @@ This header controls DNS prefetching, allowing browsers to proactively perform d 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. +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', @@ -49,7 +51,7 @@ This header informs browsers it should only be accessed using HTTPS, instead of ### [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 these protections are not as necessary when sites implement a strong [`Content-Security-Policy`](#content-security-policy) disabling the use of inline JavaScript (`'unsafe-inline'`), they can still provide protections for older web browsers that don't yet support CSP. +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 { @@ -82,7 +84,7 @@ This header allows you to control which features and APIs can be used in the bro ### [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`. +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 { @@ -93,7 +95,7 @@ This header prevents the browser from attempting to guess the type of content if ### [Referrer-Policy](https://scotthelme.co.uk/a-new-security-header-referrer-policy/) -This header controls how much information the browser includes with navigations away from their pages. You can read about the different options [here](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 { @@ -104,7 +106,7 @@ This header controls how much information the browser includes with navigations ### [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. CSP can specify allowed origins for content including scripts, stylesheets, images, fonts, objects, media (audio, video), iframes, and more. +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).