Improve your Mozilla Observatory score

Using Mozilla's Observatory to improve the security of your website or application.

What is Observatory by Mozilla?

Mozilla Observatory is a tool for teaching developers, system administrators, and security professionals how to configure their sites safely and securely. Like many other testing tools, it gives you a grade from A+ to F and informs you how to improve your score.

As a competitive man, I’m striving to achieve A+ on all my sites, and below are a few tips I’ve picked up along the way.

The below examples are for sites hosted on Netlify or running nginx.

X-Content-Type-Options

X-Content-Type-Options is an HTML header that tells it not to load JS and CSS unless the server indicates the correct MIME type. This ensures that the browser can correctly identify XSS attacks. This is a fix to your config that simply prevents browsers from incorrectly detecting non-scripts as scripts.

# Netlify
X-Content-Type-Options: nosniff

# nginx
add_header X-Content-Type-Options nosniff;

X-Frame-Options

X-Frame-Options is an HTTP header that controls whether or not your site may be shown within an iFrame. This header effects both iFrames of your own website, on your website, and when third parties put your site in an iFrame. Whilst this header has been superseded by a Content Security Policy option, it is still used by many browsers.

The recommended approach for X-Frame-Options is to use the directive “DENY”, as this disallows any attempt to iFrame your website.

# Netlify
X-Frame-Options: DENY

# nginx
add_header X-Frame-Options DENY;

X-XSS-Protection

X-XSS-Protection is an HTTP header that prevents a website from loading when the browser detects an XSS attack. Once again, this is something that the Content Security Policy will protect against in modern browsers, but for legacy purposes, it should still be sent.

# Netlify
X-XSS-Protection: 1; mode=block

# nginx
add_header X-XSS-Protection "1; mode=block";

Content Security Policy

Content Security Policy (CSP) is an HTTP header that allows detailed control over what resources, and what type of resource can be loaded on a website.

There are plenty of other blogs that cover this in some detail.

I use and recommend Report URi’s CSP Builder to generate my initial CSP, then tweak and edit the policy on a staging server.

One underutilised feature is the Content-Security-Policy-Report-Only option. This marks the CSP header in report only mode. This way you can view the CSP errors in your Dev Tools console whilst testing, without ruining your visitor’s experience.

### A good starting point ###

# Netlify
Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self';

# nginx
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; img-src 'self'; style-src 'self'";