Don't Be The Next Victim! This Library Will Keep You Safe!
Published: 2024-06-21 16:45:35

Helmet.js is a powerful middleware for Express.js that helps secure your web applications by setting various security-related HTTP response headers. This guide will provide a detailed overview of Helmet's capabilities, its default settings, and how to customize its behavior to meet your specific security requirements.

**Getting Started**

Here's a simple example of using Helmet in your Express.js application:

```javascript
import express from "express";
import helmet from "helmet";

const app = express();

// Use Helmet!
app.use(helmet());

app.get("/", (req, res) => {
  res.send("Hello world!");
});

app.listen(8000);
```

**Default Headers**

By default, Helmet sets the following headers:

* **Content-Security-Policy:**  Mitigates XSS attacks by defining a whitelist of allowed resources (scripts, images, stylesheets).
* **Cross-Origin-Opener-Policy:**  Helps process-isolate your web page.
* **Cross-Origin-Resource-Policy:**  Blocks others from loading your resources cross-origin.
* **Origin-Agent-Cluster:**  Changes process isolation to be origin-based.
* **Referrer-Policy:**  Controls the Referer header, which can be used to track user behavior.
* **Strict-Transport-Security:**  Tells browsers to prefer HTTPS over HTTP.
* **X-Content-Type-Options:**  Avoids MIME sniffing attacks.
* **X-DNS-Prefetch-Control:**  Controls DNS prefetching.
* **X-Download-Options:**  Forces downloads to be saved (Internet Explorer only).
* **X-Frame-Options:**  Legacy header that mitigates clickjacking attacks.
* **X-Permitted-Cross-Domain-Policies:**  Controls cross-domain behavior for Adobe products.
* **X-Powered-By:**  Info about the web server. Removed by Helmet because it could be used in simple attacks.
* **X-XSS-Protection:**  Legacy header that tries to mitigate XSS attacks, but Helmet disables it by default as it can cause issues.

**Configuring Headers**

Each header can be customized. For example, here's how you configure the Content-Security-Policy header:

```javascript
// This sets custom options for the
// Content-Security-Policy header.
app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        "script-src": ["'self'", "example.com"],
      },
    },
  })
);
```

**Disabling Headers**

You can also disable specific headers. For example, here's how to disable the Content-Security-Policy and X-Download-Options headers:

```javascript
// This disables the Content-Security-Policy
// and X-Download-Options headers.
app.use(
  helmet({
    contentSecurityPolicy: false,
    xDownloadOptions: false,
  })
);
```

**Detailed Header Configuration**

Let's delve into the configuration options for each header:

**Content-Security-Policy**

* **Directives:** A nested object containing directives for the Content-Security-Policy header. Each key represents a directive name in camel case (e.g., `defaultSrc`) or kebab case (e.g., `default-src`). Each value is an array (or iterable) of strings or functions for that directive.
* **Use Defaults:**  A boolean value (defaults to `true`) that determines whether to use the default directives.
* **Report Only:**  A boolean value (defaults to `false`) that sets the `Content-Security-Policy-Report-Only` header instead of the standard `Content-Security-Policy` header. This allows you to test your CSP configuration without blocking resources.

**Cross-Origin-Embedder-Policy**

* **Policy:**  A string representing the policy. Options include:
    * `require-corp`:  Requires the embedder to have the same origin as the embedded content.
    * `credentialless`:  Allows embedding only if the embedder is not sending credentials.

**Cross-Origin-Opener-Policy**

* **Policy:**  A string representing the policy. Options include:
    * `same-origin`:  Allows embedding only if the embedder has the same origin as the embedded content.
    * `same-origin-allow-popups`:  Allows embedding only if the embedder has the same origin as the embedded content and allows popups.

**Cross-Origin-Resource-Policy**

* **Policy:** A string representing the policy. Options include:
    * `same-origin`:  Blocks cross-origin requests.
    * `same-site`:  Allows requests only from the same site.

**Origin-Agent-Cluster**

This header takes no options and is set by default.

**Referrer-Policy**

* **Policy:**  A string or array of strings representing the policy. Options include:
    * `no-referrer`:  Sends no Referer header.
    * `origin`:  Sends the origin of the request.
    * `unsafe-url`:  Sends the full URL.

**Strict-Transport-Security**

* **Max Age:**  The number of seconds browsers should remember to prefer HTTPS.
* **Include Subdomains:**  A boolean value (defaults to `true`) that dictates whether to include the `includeSubDomains` directive, extending the policy to subdomains.
* **Preload:**  A boolean value (defaults to `false`) that adds the `preload` directive, expressing intent to add your HSTS policy to browsers.

**X-Content-Type-Options**

This header takes no options and is set by default.

**X-DNS-Prefetch-Control**

* **Allow:**  A boolean value (defaults to `false`) that dictates whether to enable DNS prefetching.

**X-Download-Options**

This header takes no options and is set by default.

**X-Frame-Options**

* **Action:**  A string that specifies which directive to use: `DENY` or `SAMEORIGIN`.

**X-Permitted-Cross-Domain-Policies**

* **Permitted Policies:**  A string that must be "none", "master-only", "by-content-type", or "all".

**X-Powered-By**

This header is removed by default.

**X-XSS-Protection**

This header is disabled by default.

**Standalone Middleware**

Helmet provides standalone middleware for each header, allowing you to use them individually. For example:

```javascript
app.use(helmet.contentSecurityPolicy());
```

## Helmet.js Reference

**Official Documentation:**

* **Helmet.js GitHub Repository:** [https://helmetjs.github.io/](https://helmetjs.github.io/) - The primary source for documentation, examples, and API reference.

**Additional Resources:**

* **MDN Web Docs:**  [https://developer.mozilla.org/en-US/](https://developer.mozilla.org/en-US/) - Provides detailed information on each supported HTTP header.
* **OWASP:**  [https://owasp.org/](https://owasp.org/) - Offers comprehensive security guidance and best practices.
* **CSP Evaluator:**  [https://csp-evaluator.withgoogle.com/](https://csp-evaluator.withgoogle.com/) - A tool for validating and testing Content-Security-Policy configurations.

**Conclusion**

Helmet.js is an essential tool for securing your Express.js applications. By setting security-related HTTP response headers, it helps protect your website from common attacks. Remember to carefully configure Helmet to meet your specific security needs and to keep your application up-to-date with the latest security patches.



**Follow me in [X/Twitter](https://twitter.com/ashsajal1)**