Helmet - bommezijn/Dating-Shreks GitHub Wiki

This topic was worked on by uxtothemax.

What is Helmet?

Helmet is a collection of 11 middleware functions that set security-related HTTP response headers. With this module you can set up security measures for your website. I will walk you through all these functions and show you how you can check their status.

Installing

To use Helmet, you'll need to install the module with the following code:

$ npm install --save helmet

You can also install individual modules without installing Helmet. See Helmet JS Docs for the needed lines of code.

Using in code

To use Helmet in your code, create a seperate file named helmet.js or add the following code directly into your index.js:

const express = require('express');
const helmet = require('helmet');

const app = express();

app.use(helmet());

Or, if you already use express:

const helmet = require('helmet');

app.use(helmet());

Default modules

Helmet consists of 11 different modules and 7 of them are included by default.

All default functions are implemented in our project, unless stated otherwise.

dnsPrefetchControl

The X-DNS-Prefetch-Control header disables prefetching of DNS.

When visiting a URL, the browser resolves the domain to the IP address. This process is called DNS. Browsers are able to prefetch an IP address in the background before the user clicks on a link, which improves performance. The downside is it can appear as if a user is visiting something they aren't visiting, thus violating the privacy of the user.

Browsers prefetch DNS by default and is disabled using this module:

app.use(helmet.dnsPrefetchControl());

frameguard

The X-Frame-Options header can prevent clickjacking attacks. These are attacks that trick the user into clicking something they don't want to click by putting invisible iframes over the actual content.

For example:

helmet-frameguard-example

You want to see cute puppies, but accidentally click on the invisible facepamphlet button.

Prevent anyone from putting a page in an iframe with the following code:

app.use(frameguard({ action: 'deny' }));

hidePoweredBy

The Hide Powered-By middleware will remove the X-Powered-By header. For example, our website is powered by Express and that technology always includes itself in the header. If a hacker knows vulnerabilities in Express or Node, they can target your website.

With the following code, the header is removed:

app.use(helmet.hidePoweredBy());

hsts

The Strict-Transport-Security HTTP header sets a timeframe in which the browser will stick to the secure HTTPS and never visit the insecure HTTP version. This header is not applicable to our app, but otherwise useful nonetheless.

The browser will only visit the site over HTTPS within the next month with the following code:

const thirtyDaysInSeconds = 259200;

app.use(helmet.hsts({
  maxAge: thirtyyDaysInSeconds;
}));

ieNoOpen

The X-Download-Options header will prevent the browser from executing malicious HTML downloads. The module is made for old versions of Internet Explorer. These versions will, by default, allow you to open HTML files, even if they're untrusted.

The following line of code is needed to set the download options to noopen:

app.use(helmet.ieNoOpen());

noSniff

Setting the X-Content-Type-Options header to nosniff prevents browsers from sniffing MIME files. A broswer can determine by a MIME type what kind of file it's looking at. Browsers can look at the contents of a file, 'MIME sniffing', before it executes it. This means a file can still be executed, even if a server has sent a wrong content type.

MIME sniffing is vulnarable for attacks. For example, a user could upload a .jpg file with the contents of an HTML page. The browser would run the HTML page, which could contain malicious JavaScript.

To set the header to nosniff add the following code:

app.use(helmet.noSniff());

xssFilter

The X-XSS-Protection header protects you from a certain kind of Cross-site scripting (XSS) attack, namely one where the hacker can execute their JavaScript by putting a query string in the HTML. It's a quick and basic protection, but it does not save you from XSS attacks. The header sets the XSS protection to 1; mode=block, which tells browsers to detect and block reflected XSS, with the following code:

app.use(helmet.xssFilter());

Extra modules

The 4 remaining modules are not included by default, but you can still use these. See Helmet JS Docs for the needed code.

Non-default functions are not implemented in our app, unless stated otherwise.

contentSecurityPolicy

The Content-Security-Policy can protect your website against malicious injection of e.g. JavaScript, CSS and plugins.

expectCt

The Expect-CT HTTP header tells browsers to expect Certificate Transparancy. Certificate Transparancy is a project by Google which fixes a few flaws in the SSL certificate system (the main cryptographic system for HTTPS connections). It is useful for websites where a user fills in personal data, like our dating app.

permittedCrossDomainPolicies

The X-Permitted-Cross-Domain-Policies header sets your preferences about Adobe Flash and Acrobat loading content from your domain, or even from others websites. These attacks can cause extra bandwidth usage or, occasionally, unexpected data disclosure.

referrerPolicy

The Referrer-Policy HTTP header lets you control how Browsers set the Referer header. It has similarities with DNS prefetch control, because it likewise had to do with linking to other websites. For example: if you navigate from dating-shreks.com/movies to the IMDB page of a concerning movie, IMDB servers will know dating-shreks.com is the referer. This also violates the privacy of the user.

I have used this module in our app, because we use an IMDB API and we want to shield our users from giving IMDB servers their referer.

See the following code to set the website to no-referrer:

app.use(referrerPolicy({ policy: 'no-referrer' }));

Used modules

To check your headers, follow these steps:

  1. Run your server.
  2. Go to your webpage.
  3. Go to developer tools (press F12).
  4. Click on the network tab.
  5. Refresh your page (press F5).
  6. Select a file: this opens a window with your headers (see the images below).

I've used these modules for our dating app:

helmet-headers-network

This includes the hidePoweredBy module, but its function is to hide this header. When the header is visible, it looks like this (see last line):

helmet-headers-network-hide-powered-by

Sources

Docs - Helmet. (n.d.). Retrieved June 15, 2020, from https://helmetjs.github.io/docs/

Dylan Israel. (2019, October 15). Information Security with HelmetJS with FreeCodeCamp | Dylan Israel. Retrieved June 17, 2020, from https://www.youtube.com/watch?v=rYVW4tIVII0

Expressjs.com. (n.d.). Security Best Practices for Express in Production. Retrieved June 15, 2020, from https://expressjs.com/en/advanced/best-practice-security.html#use-helmet

FreeCodeCamp.org. (n.d.). freeCodeCamp.org. Retrieved June 17, 2020, from https://www.freecodecamp.org/learn/information-security-and-quality-assurance/information-security-with-helmetjs

PowerCert Animated Videos. (2018, December 13). SSL, TLS, HTTP, HTTPS Explained [Video file]. In YouTube. Retrieved from https://www.youtube.com/watch?v=hExRDVZHhig

Svelte Master. (2019, October 12). Sapper - Add security with Helmet! [Video file]. In YouTube. Retrieved from https://www.youtube.com/watch?v=ghT6pMJ8aP4

user2683. (2011, September 20). “Referer” or “referrer.” Retrieved June 16, 2020, from https://english.stackexchange.com/questions/42630/referer-or-referrer

X-DNS-Prefetch-Control. (2019, October 16). Retrieved June 17, 2020, from https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control