The importance of the http response headers is highly needed to protect the websites from hackers. If you poorly managed the response header, then one day the website will be compromised to the hacker.

Response headers are common to all the web applications that are created on any technology. I have already had <a href="/posts/What-are-the-different-types-of-HTTP-Security-headers">blog post</a> is related to the HTTP response headers.

<div class="highlight">
<h2>What is HTTP security headers? </h2>
The HTTP security headers are specifically about the security of the web application while doing the communication between the client and server. 
An HTTP header is a response by a web server to a browser that is trying to access a web page. 
</div>

As I said, setting the response headers in websites will be different in different technology.

I just wanted to let you know how to set the response headers in NextJS. For that you have to follow some simple steps.

For your information, we are going to make changes to the next.config.js file. If you do not have the file, please create a file with `next.config.js` name in the root of the application.

<details class="fullWidth">
<summary>next.config.js</summary>
next.config.js is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build. 
</details>

In the below code snippet, I have stored all the necessary security headers as array in a variable.

```javascript
const securityHeaders = [
 {
 key: "Permissions-Policy",
 value: "camera=(), microphone=(), geolocation=(), browsing-topics=()",
 },
 {
 key: "X-DNS-Prefetch-Control",
 value: "on",
 },
 {
 key: "X-Frame-Options",
 value: "SAMEORIGIN",
 },
 {
 key: "X-XSS-Protection",
 value: "1; mode=block",
 },
 {
 key: "Strict-Transport-Security",
 value: "max-age=63072000; includeSubDomains; preload",
 },
 {
 key: "referrer-policy",
 value: "origin-when-cross-origin",
 },
 {
 key: "x-content-type-options",
 value: "nosniff",
 },
];
```

Create an async function "headers" on next.config.js export array. The function name `headers` is reserved for http response headers feature.

The code is given below for your reference.

```javascript
module.exports = {
 async headers() {
 return [
 {
 // Apply these headers to all routes in your application.
 source: "/posts/:slug",
 headers: securityHeaders,
 },
 {
 // Apply these headers to all routes in your application.
 source: "/(.*)",
 headers: securityHeaders,
 },
 ];
 },
};
```

The function return should be an array, containing object should in the following format

```javascript
[
 {
 source:"url",
 headers:<headers>
 }
]
```

Once you exported the function, then the securityHeaders will be attached to the URL response.

The importance of the http response headers are highly needed to protect the websites from hackers. If you poorly managed the response header then one day the website will be compromise to the hacker.

How to set the http response headers in NextJS websites

How to protect the websites from **http security headers vulnerabilities. ?**

Is that term new for you? I think the answer would be partially Yes or No.

Let's check what does it means and how it works with your website.

<div class="highlight">

## What are HTTP security headers?

The HTTP security headers are specifically about the security of the web application while doing the communication between the client and server.

An HTTP header is a response by a web server to a browser that is trying to access a web page.

</div>

HTTP Headers are a great booster for web security with easy implementation. Proper HTTP response headers can help prevent security vulnerabilities like Cross-Site Scripting, Clickjacking, Information disclosure and more.

By hashing the default values of the headers will help to boost the security. because the default value will be accurate, then that is enough for hackers to leak the information about the website.

## What are the types of HTTP headers

<div class="list-number">

- Content-Security-Policy - Content Security Policy is an effective measure to protect your site from XSS attacks. By whitelisting sources of approved content, you can prevent the browser from loading malicious assets.

 ### Syntax: -

 <details>

 <summary>Content-Security-Policy</summary>

 Content-Security-Policy: script-src 'self'

 </details>

- Access-control-allow-origin - This is a very lax CORS policy. Such a policy should only be used on a public CDN.

 ### Syntax: -

 <details>

 <summary>Access-control-allow-origin</summary>

 Access-Control-Allow-Origin: *

 Access-Control-Allow-Origin: &lt;Domain name&gt;

 Access-Control-Allow-Origin: null

 

 </details>

- Permissions-policy - Permissions Policy is a new header that allows a site to control which features and APIs can be used in the browser.

 ### Syntax: -

 <details>

 <summary>Permissions-policy</summary>

 camera=(), microphone=(), geolocation=(), browsing-topics=()

 </details>

- Referrer-policy - Referrer Policy is a new header that allows a site to control how much information the browser includes with navigations away from a document and should be set by all sites.

 ### Syntax: -

 <details>

 <summary>Referrer-policy</summary>

 origin-when-cross-origin

 </details>

- Server - Server value has been changed. Typically, you will see values like "Microsoft-IIS/8.0" or "nginx 1.7.2".

 ### Syntax: -

 <details>

 <summary>Server</summary>

 Can be any custom value, by default it will be actual server name, but to mitigate the vulnerability we should use custom values 

 E.g.: - My server

 </details>

- Strict-transport-security - HTTP Strict Transport Security is an excellent feature to support on your site and strengthens your implementation of TLS by getting the User Agent to enforce the use of HTTPS.

 ### Syntax: -

 <details>

 <summary>Strict-transport-security</summary>

 max-age=63072000; includeSubDomains; preload

 </details>

- X-content-type-options - X-Content-Type-Options stops a browser from trying to MIME-sniff the content type and forces it to stick with the declared content-type. The only valid value for this header is "X-Content-Type-Options: nosniff".

 ### Syntax: -

 <details>

 <summary>X-content-type-options</summary>

 nosniff

 </details>

- X-frame-options - X-Frame-Options tells the browser whether you want to allow your site to be framed or not. By preventing a browser from framing your site you can defend against attacks like clickjacking.

 ### Syntax: -

 <details>

 <summary>X-frame-options</summary>

 SAMEORIGIN

 </details>

- X-xss-protection - X-XSS-Protection sets the configuration for the XSS Auditor built into older browsers. The recommended value was "X-XSS-Protection: 1; mode=block" but you should now look at Content Security Policy instead.

 ### Syntax: -

 <details>

 <summary>X-xss-protection</summary>

 1; mode=block

 </details>

</div>

## Where will be the fix to mitigate the issues?

The fix can be made on the server side. The fixes will vary depending on the technology you use to develop the application.

E.g:- .htaccess, IIS level, web.config, DNS and some of them can be fixed in page directives.

## How to test the website HTTP headers?

There are lot of services available in online, in that one of useful tool is <a target="_blank" rel="nofollow" href="https://securityheaders.com">Securityheaders.com</a>

An HTTP header is a response by a web server to a browser that is trying to access a web page.

More Stories related to 'security-headers'

Also read the similar topics