This is one of the aspects that is often neglected in web applications and the implementation of security headers. It's a simple and yet very powerful way to add a lock on your web applications.

Security headers - loved by security teams and hated by developers - tell users of your web application what to expect and what it can do. The question is how can you make sure your application has the right headers?

I build static sites using Gatsby, and I've found that many sites built this way don't have security headers. For me, part of the commissioning checklist is to ensure that the application provides me and my company, and of course the user, with maximum security. A good way to achieve this is to define security headers on your site.

Let's first take a tour to see what the security-headers are, then we'll see concretely how to apply them, and finally how to test our application. This tour is not meant to be exhaustive, but will hopefully give you the basics to get you started.

Why use security headers?

We use security headers to inform the browser about the expectations of our application. This covers things like :

Defining a list of external data sources and scripts we intend to use (ChatBot, Google Analytics)
How our request can be presented (Iframe, script, image)
The characteristics of the device with which our application interacts. (Geolocation, microphone...)
These headers help protect our application, our data and our users from attacks. Most of the headers in this article deal with cross-site scripting (XSS). XSS is the term used when injecting harmful code into an application.

A classic in any web application project is to use the services of a third party to perform penetration testing or "pentesting" on your application. One of the first things that will be tested is the security header. This goes hand in hand with OWASP's "Top 10". So there is a project dedicated to OWASP security headers.

But why is it important if you generate a static site, if you create your site with Gatsby and Prismic for example? It depends on what your site (or application) does. As you add external services for customer reviews, contact forms, e-commerce integration, etc. these other added features can expose you, your customers and your organization. To be frank, even if you don't add external services, there is a risk. This risk is easily reduced by using a few basic security headers.

How do I install security headers in Gatsby?

When we think about static site generators like Gatsby, we consider the separation of the data source and decide that they are secure because there is no access to the source data. We actually add forms and connect other services to create a more complete application. For example, we add FormStack or Snipcart to our application to add contact forms or e-commerce functionalities.

Several options are available with static sites, and some of them depend on where you host your application.

Via the meta http-equiv and the gatsby-plugin-csp plugin
From the content-security-policy point of view, you can add the gatsby-plugin-csp plugin. This plugin allows you to configure the common parts of the CSP header, but can also automatically add inline component hashes as you build your application.

As an example, here is the gatsby-plugin-csp configuration (in gatsby-config.js) I was experimenting for my site.

    {
       resolve: `gatsby-plugin-csp`,
       options: {
         mergeScriptHashes: false,
         mergeStyleHashes: false,
         directives: {
           'script-src': `'self' 'unsafe-inline' `,
           'style-src': "'self' 'unsafe-inline'",
           'font-src': `'self' data: db.onlinewebfonts.com`,
         },
       },
    },

More info on my article how to secure a web app ?