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.

  1. // next.config.js
  3. // You can choose which headers to add to the list
  4. // after learning more below.
  5. const securityHeaders = []
  7. module.exports = {
  8.   async headers() {
  9.     return [
  10.       {
  11.         // Apply these headers to all routes in your application.
  12.         source: '/:path*',
  13.         headers: securityHeaders,
  14.       },
  15.     ]
  16.   },
  17. }

Options

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 is more likely to be resolved by the time the referenced items are needed. This reduces latency when the user clicks a link.

  1. {
  2.   key: 'X-DNS-Prefetch-Control',
  3.   value: 'on'
  4. }

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.

If you’re deploying to Vercel, this header is not necessary as it’s automatically added to all deployments unless you declare headers in your next.config.js.

  1. {
  2.   key: 'Strict-Transport-Security',
  3.   value: 'max-age=63072000; includeSubDomains; preload'
  4. }

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 disabling the use of inline JavaScript ('unsafe-inline'), it can still provide protection for older web browsers that don’t support CSP.

  1. {
  2.   key: 'X-XSS-Protection',
  3.   value: '1; mode=block'
  4. }

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.

  1. {
  2.   key: 'X-Frame-Options',
  3.   value: 'SAMEORIGIN'
  4. }

Permissions-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.

  1. {
  2.   key: 'Permissions-Policy',
  3.   value: 'camera=(), microphone=(), geolocation=(), browsing-topics=()'
  4. }

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.

  1. {
  2.   key: 'X-Content-Type-Options',
  3.   value: 'nosniff'
  4. }

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.

  1. {
  2.   key: 'Referrer-Policy',
  3.   value: 'origin-when-cross-origin'
  4. }

Content-Security-Policy

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.

You can add Content Security Policy directives using a template string.

  1. // Before defining your Security Headers
  2. // add Content Security Policy directives using a template string.
  4. const ContentSecurityPolicy = `
  5.   default-src 'self';
  6.   script-src 'self';
  7.   child-src example.com;
  8.   style-src 'self' example.com;
  9.   font-src 'self';  
  10. `

When a directive uses a keyword such as self, wrap it in single quotes ''.

In the header’s value, replace the new line with an empty string.

  1. {
  2.   key: 'Content-Security-Policy',
  3.   value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim()
  4. }

References

For more information, we recommend the following sections:

HeadersAdd custom HTTP headers to your Next.js app.