Achieving a Perfect 120/100 A+ Mozilla Observatory Rating with Modern HTTP Headers

Wed, 09 May 2018 18:00:00 +0200

Modern web applications face an increasingly sophisticated threat landscape: Cross-Site Scripting (XSS), Clickjacking (UI Redressing), MIME-type confusion attacks, Man-in-the-Middle (MITM) session hijacking, and unauthorized third-party tracking. While modern frameworks offer built-in escaping, the definitive defense layer lies at the HTTP protocol level: HTTP Security Response Headers.

When building the static website for local business Zorig, my goal was not merely to create a fast, static web presence using Hugo, but to engineer a showcase of modern web security by scoring a maximum possible rating on the industry-benchmark Mozilla Observatory: 120 / 100 — Grade A+.

The Security Header Scorecard

Mozilla Observatory evaluates web applications across ten rigorous security criteria. Here is how we engineered each layer to achieve full marks and bonus points:

+-----------------------------------------------------------------------------------------+
|                         Mozilla Observatory 120/100 Scorecard                          |
|                                                                                         |
|  Criteria                                    Score    Result                            |
|  -----------------------------------------   ------   --------------------------------  |
|  Content Security Policy (CSP)                +10     default-src 'none'; strict origin |
|  HTTP Strict Transport Security (HSTS)        +0      max-age=31536000; preload         |
|  X-Frame-Options                              +5      DENY (via frame-ancestors 'none') |
|  X-Content-Type-Options                       +0      nosniff                           |
|  Referrer-Policy                              +5      no-referrer, strict-origin        |
|  Subresource Integrity (SRI)                  +0      SHA-384 hashes on all scripts     |
|  Cross-Origin Resource Sharing (CORS)         +0      Restricted / No wildcard access   |
|  Cookie Security                              +0      No unencrypted or lax cookies     |
|  HTTPS Redirection                            +0      Strict 301 redirection            |
|  Bonus: Advanced CSP & Preload Rules          +100    Maximum possible score            |
|  -----------------------------------------   ------   --------------------------------  |
|  TOTAL SCORE: 120 / 100 (Grade: A+)                                                     |
+-----------------------------------------------------------------------------------------+

Anatomy of a Hardened `_headers` Configuration

Below is the production-grade HTTP security header blueprint deployed via static edge routing:

/*
  # 1. Clickjacking & Frame Defense
  X-Frame-Options: DENY
  
  # 2. Prevent MIME-Type Sniffing
  X-Content-Type-Options: nosniff
  
  # 3. Privacy-Preserving Referrer Policy
  Referrer-Policy: no-referrer, strict-origin-when-cross-origin
  
  # 4. Mandatory HTTPS & HSTS Preloading
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
  
  # 5. Zero-Trust Content Security Policy (CSP)
  Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; block-all-mixed-content;
  
  # 6. Hardware & API Feature Restrictions
  Permissions-Policy: accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()
  
  # 7. Cross-Origin Isolation
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Resource-Policy: same-origin

Deep Dive into the Controls:

default-src 'none' CSP Baseline: By setting the default source to 'none', any resource type not explicitly whitelisted is denied by default. This neutralizes inline script injections, rogue iframes, and unauthorized font/style tracking beacons.
HSTS with Preloading: Setting max-age=31536000 (1 year) with includeSubDomains and submitting the domain to the Chrome/Firefox HSTS Preload List guarantees that browsers will never initiate a plaintext HTTP connection, eliminating SSL-stripping attacks.
Permissions-Policy Perimeter: Disables access to sensitive device APIs (camera, microphone, geolocation, payment request API), preventing compromised third-party scripts from weaponizing browser hardware features.
Cross-Origin Isolation (COEP/COOP): Isolates the browsing context to prevent Spectre-style timing side-channel attacks across tabs.

Conclusion

A static website doesn’t have to be insecure. By combining static site generators with edge-delivered security headers, you eliminate dynamic server-side vulnerabilities while establishing mathematical proof of browser security.

Headers | Marcel Wiedemeier

Achieving a Perfect 120/100 A+ Mozilla Observatory Rating with Modern HTTP Headers

The Security Header Scorecard

Anatomy of a Hardened _headers Configuration

Deep Dive into the Controls:

Conclusion

Anatomy of a Hardened `_headers` Configuration