↓Skip to main content
  1. Posts/

Securing Netlify Website With Security Headers

·2 mins
Netlify HTTP Headers
Table of Contents

After setting up Netlify, you get free SSL certificate from Let’s Encrypt. It may come to you as a surprise that result of Security Headers isn’t that satisfying. Today, we are going to change that.

HTTP Response Headers #

HTTP Strict Transport Security (HSTS) #

Informs the browser to access the site only by HTTPS for one year.

Strict-Transport-Security: max-age=31536000; includeSubDomains

X-Frame-Options #

Disables loading the page in a frame on other pages.

X-Frame-Options: deny

X-XSS-Protection #

Enables Cross-site scripting (XSS) filter.

X-XSS-Protection: 1; mode=block

X-Content-Type-Options #

Prevets the browser from MIME-sniffing a response away from the declared content-type.

X-Content-Type-Options: nosniff

Content-Security-Policy #

Provides a way to define policies such as which types of files to load from which domains etc.

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self';

Referrer-Policy #

Tells browser what site you are coming from.

Referrer-Policy: no-referrer

Feature-Policy #

Goodbye Feature Policy and hello Permissions Policy!

Controls access to browser features and APIs.

Feature-Policy: accelerometer none; ambient-light-sensor none; autoplay none; camera none; encrypted-media none; fullscreen none; geolocation none; gyroscope none; magnetometer none; microphone none; midi none; payment none; picture-in-picture none; speaker none; usb none; vibrate none; vr none;

Netlify #

We bundle the headers together, format them and add them to netlify.toml.

[[headers]]
    for = "/*"
    [headers.values]
        X-Frame-Options = "deny"
        X-XSS-Protection = "1; mode=block"
        X-Content-Type-Options = "nosniff"
        Referrer-Policy = "no-referrer"
        Strict-Transport-Security = '''
            max-age=31536000;
            includeSubDomains
        '''
        Content-Security-Policy = '''
            default-src 'self';
            style-src 'self' 'unsafe-inline';
            img-src 'self'
        '''
        Permissions-Policy = '''
            accelerometer=(none),
            ambient-light-sensor=(none),
            autoplay=(none),
            camera=(none),
            encrypted-media=(none),
            fullscreen=(none),
            geolocation=(none),
            gyroscope=(none),
            magnetometer=(none),
            microphone=(none),
            midi=(none),
            payment=(none),
            picture-in-picture=(none),
            speaker=(none),
            usb=(none),
            vibrate=(none),
            vr=(none)
        '''

Now we finally get our desired A mark.

Resources: #

↑