Implementing Secure Headers Using Mozilla Observatory

March 8, 2025

As developers, we often talk about performance, accessibility, and SEO. But security headers are just as critical — especially if your site handles user data, embeds third-party scripts, or is built for production. In this post, I’ll walk you through what secure headers are, how Mozilla Observatory grades them, and how to implement them effectively.

---

What Is Mozilla HTTP Observatory?

Mozilla HTTP Observatory is a free tool developed by Mozilla to evaluate a website’s security configuration — specifically how well it implements security headers.

It scans for missing or misconfigured HTTP headers that protect against common vulnerabilities like cross-site scripting (XSS), clickjacking, and code injection.

---

What Are Security Headers?

Security headers are HTTP response headers your server sends to the browser to enforce certain behaviors and restrict others. Think of them as rules for how your site should be handled by browsers.

Common headers include:

• Content-Security-Policy
• Strict-Transport-Security
• X-Content-Type-Options
• X-Frame-Options
• Referrer-Policy
• Permissions-Policy

---

Mozilla Observatory Grades

The tool gives your site a grade from F to A+ based on:

• Which headers are implemented
• Whether values are correctly set
• SSL configuration (if scanned via external tools like SSL Labs)

A default WordPress or Shopify site often scores an F or D — not because they’re unsafe, but because they lack server-level config.

---

Implementing Security Headers

Let’s go through each key header Mozilla checks for, and how to implement it properly.

---

1. Strict-Transport-Security (HSTS)

Forces HTTPS-only access.

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

How to set:
Apache (in .htaccess):

<IfModule mod_headers.c>
  Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
</IfModule>

Nginx:

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

---

2. Content-Security-Policy (CSP)

Controls what content the browser is allowed to load. This is your most powerful defense against XSS.

Example (strict but safe default):

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; object-src 'none';

Tailor it to your stack. For example, if you use Google Fonts or Wistia:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' *.google.com *.wistia.com 'unsafe-inline';
  style-src 'self' 'unsafe-inline' *.googleapis.com;
  frame-src *.wistia.com;

---

3. X-Frame-Options

Prevents your site from being embedded in iframes (avoids clickjacking).

X-Frame-Options: SAMEORIGIN

Apache:

Header always set X-Frame-Options "SAMEORIGIN"

Nginx:

add_header X-Frame-Options "SAMEORIGIN";

---

4. X-Content-Type-Options

Stops MIME type sniffing.

X-Content-Type-Options: nosniff

---

5. Referrer-Policy

Controls what information the browser shares via the Referer header.

Recommended setting:

Referrer-Policy: strict-origin-when-cross-origin

---

6. Permissions-Policy (formerly Feature-Policy)

Restricts browser features like camera, geolocation, etc.

Example:

Permissions-Policy: geolocation=(), camera=(), microphone=()

---

7. Set All Headers Together

If you’re using Apache, your .htaccess could look like:

<IfModule mod_headers.c>
  Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set X-Content-Type-Options "nosniff"
  Header always set Referrer-Policy "strict-origin-when-cross-origin"
  Header always set Permissions-Policy "geolocation=(), camera=(), microphone=()"
  Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; object-src 'none';"
</IfModule>

---

Testing Your Headers

Once headers are live, test them using:

• Mozilla Observatory
• SecurityHeaders.com
• Browser DevTools > Network tab > Response headers

---

Bonus: Securing WordPress or Webflow Sites

WordPress: Use a plugin like HTTP Headers or edit via .htaccess (if hosted on Apache).

Webflow: Use Cloudflare or your hosting provider’s dashboard to inject headers, since Webflow doesn’t expose server config directly.

---

Conclusion

Implementing security headers is one of the simplest, highest-leverage steps you can take to harden your site. Mozilla Observatory is a great tool to keep you honest — but what really matters is why these headers exist: to keep your users safe.

Start small. Get to a B. Then iterate toward an A+.