Next.js Security Headers

Next.js security headers help protect your application from common web vulnerabilities by enforcing security policies at the HTTP level. By configuring these headers, you enhance your app's security and ensure safer interactions for your users.

In this article, we’ll learn about security headers, their roles in website security, examples of security headers, and how to implement them in Next.js.

What are HTTP Headers?

HTTP headers are used to pass additional information or metadata using HTTP requests or responses. These headers are case-insensitive, in key-value pair format, and separated by a colon.

What are Security Headers?

Security Headers are a set of rules used to communicate between the user and the websites. Security headers are HTTP headers used to enhance the security of web applications by controlling various aspects of how browsers handle content. They help protect against a range of web security threats, including cross-site scripting (XSS), clickjacking, and data injection attacks.

Steps to Create Next.js Application

Step 1: To create a new NextJs App run the below command in your terminal:

npx create-next-app app_name

Step 2: After creating your project folder (i.e. GFG ), move to it by using the following command:

cd app_name

Project Structure:

Check the Default Header:

You can check the headers at your end by doing the following steps:

• Step 1: Create the Next app
• Step 2: Host the website on localhost
• Step 3: Goto inspect
• Step 4: Goto network
• Step 5: Click on localhost

These are all default security headers. Security headers are not even mentioned in this response header and this does not mention security headers like Content-Security-Policy, X-Frame, HSTS, Permission-Policy, etc. If these policies are not mentioned, the security of the website can be damaged by threats like XSS, Code injection, and Clickjacking.

Examples of Security Headers: In the below section, we are going to see some examples, and along with that implementation of the same.

Implementing Different Security Headers

1. Content-Security-Policy header

CSP headers are used to protect websites from malicious attacks. CSP allows you to set a policy that which domain can execute scripts and which one cannot. Using CSP we can define what content sources are allowed to load on a page. 

Syntax:

Content-Security-Policy: default-src <set_origin>

You can Set Origins as:

1. self: Only your own domain will be kept as the requested domain.
2. none: Won't allow any domain.
3. *: Will allow all domains.
4. URL: URL of the domain which you want to allow. 

Example: Write the code in the belonging files:

• File Name: next.config.js

Step to run the application: Run your Next app using the following command: 

npm run dev

Output:

2. X-Frame-Options header

X-Frame-Options allow thwarting our own content which can be used in the invisible frames by attackers. Many sites use this security header to avoid Clickjacking attacks. This option actually allows whether or not a browser should be allowed to render a page in <frame>, <iframe>, <embed>, or <object>.

Syntax:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

• DENY: It is the most secure option. Basically, it stops the site from being rendered in <frame>.
• SAMEORIGIN: It does allow the use of a frame. i.e the page can only be embedded in a frame with the exact origin.

Example: In the following code, we are going to set the X-Frame-Option which is going to be in the Key-Value pair. In value, we can set Deny or Sameorigin. We are going to keep Denying it which stops the site from being rendered in <frame>.

• File Name: next.config.js

Output:

3. Permission-policy header

It is also known as Feature policy. Permission policy helps you to define which browser API to use and which not. For example, if your site doesn't need a camera and microphone, you can simply disable them to protect your website from attackers.

Syntax:

Permissions-Policy: camera=(); battery=(self); geolocation=(); microphone=('https://a-domain.com/')

• Camera: Camera () is empty, which means that we deny the camera's use.
• Battery: Battery status will be allowed to our own domain only.
• Geolocation: geolocation() is empty, which means that we deny the location's use.
• microphone: Allowed for the origin stated only.

Example: In the following code, we are going to set the Permission-policy which is going to be in the Key-Value pair. In value, we can set the camera, battery, geolocation, and microphone to simply disable them to protect your website from attackers. We can set the origin for values also for eg. microphone=('https://abc_domain.com')" which allowed for stated origin only.

Output:

4. Referrer policy header

When we click on a link that moves from one domain to another domain. Then the main domain is considered as the referrer. Using the Referrer Policy we can control the information(information about where the user came from) sent by the referrer domain to another domain.  

Syntax:

Referrer-Policy: origin-when-cross-origin
Referrer-Policy: strict-origin-when-cross-origin

• origin-when-cross-origin: Sends the path, origin, and query string with a same-origin request.
• strict-origin-when-cross-origin: Only the origin is sent in the Referrer header of cross-origin requests which is securer.

Example: In the following code, we are going to set the Referrer policy which is going to be in the Key-Value pair. In value, we can set origin-when-cross-origin orstrict-origin-when-cross-origin. We are going to set strict-origin-when-cross-origin which is secure.

Output: