DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

Testing Security Headers in Firefox: CSP, HSTS, X-Frame-Options, and DevTools Debugging

#firefox #security #webdev #javascript

Security headers are server-side HTTP headers that instruct browsers on security behavior. Firefox implements all the major ones. Here's a practical guide to testing and debugging security headers in Firefox DevTools.

Checking Security Headers in Firefox

Where to see headers:

  1. F12 → Network panel
  2. Click any page request (the main document request, at the top of the list)
  3. Select "Headers" tab in the right panel
  4. Scroll to "Response Headers"

Alternatively: about:networking → HTTP shows active connections.

The Major Security Headers

Content-Security-Policy (CSP)

CSP tells the browser which sources are allowed to load scripts, styles, images, etc.

How Firefox enforces CSP:

  • Blocks resources not matching the policy
  • Reports violations to the report-uri endpoint
  • Shows violations in the browser console (yellow warnings)

Testing CSP in Firefox:
Open DevTools Console → filter to "Security" or check for "Content Security Policy" messages.

Example violation:

Content Security Policy: The page's settings blocked the loading of a resource at inline 
("script-src"). Source: onclick attribute on button
Enter fullscreen mode Exit fullscreen mode

Example strong CSP header:

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' 'nonce-{random}';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  font-src 'self';
  object-src 'none';
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self'
Enter fullscreen mode Exit fullscreen mode

Report-Only mode (for testing without breaking):

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report
Enter fullscreen mode Exit fullscreen mode

This logs violations without blocking. Use to audit CSP issues before enforcing.

Firefox CSP tester: DevTools Console shows CSP violations as they happen. Load your page and watch for yellow security warnings.

Strict-Transport-Security (HSTS)

Tells browsers to only connect via HTTPS for a period of time.

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Enter fullscreen mode Exit fullscreen mode

Firefox HSTS behavior:

  • Stores the HSTS record for max-age seconds
  • Will refuse HTTP connections to that domain during that period
  • includeSubDomains: applies to all subdomains
  • preload: opt-in to Chrome/Firefox HSTS preload list

View Firefox's HSTS database: about:support → copy-paste into search → look for HSTS entries. Or: DevTools → Security tab → View Certificate shows if HSTS is active for the current site.

Clear HSTS for testing: Firefox doesn't provide a UI to clear individual HSTS entries. Workaround: Settings → History → Clear Recent History → Active Logins (clears HSTS and saved credentials).

X-Frame-Options / frame-ancestors

Controls whether the page can be embedded in iframes.

X-Frame-Options: DENY                # Never allow framing
X-Frame-Options: SAMEORIGIN          # Only allow same-origin framing
X-Frame-Options: ALLOW-FROM https://trusted.com  # Specific origin (deprecated)
Enter fullscreen mode Exit fullscreen mode

Prefer CSP frame-ancestors (X-Frame-Options is legacy):

Content-Security-Policy: frame-ancestors 'none'
Content-Security-Policy: frame-ancestors 'self' https://trusted.com
Enter fullscreen mode Exit fullscreen mode

Firefox DevTools: If an iframe fails to load due to frame-options, the Console shows:

Load denied by X-Frame-Options: https://example.com does not permit cross-origin framing.
Enter fullscreen mode Exit fullscreen mode

X-Content-Type-Options 

X-Content-Type-Options: nosniff
Enter fullscreen mode Exit fullscreen mode

Prevents Firefox from MIME-sniffing. Without this, a server sending a script with Content-Type: text/plain might still be executed by Firefox if it looks like JavaScript.

Test: Load a JS file with incorrect Content-Type. With nosniff, Firefox will not execute it. Without it, Firefox may sniff the MIME type.

Referrer-Policy

Controls what referrer information is sent with requests:

Referrer-Policy: no-referrer                   # Never send
Referrer-Policy: no-referrer-when-downgrade    # Default: send on HTTPS, not HTTP
Referrer-Policy: same-origin                   # Send only to same origin
Referrer-Policy: strict-origin-when-cross-origin  # Recommended
Enter fullscreen mode Exit fullscreen mode

Check in Firefox: Network panel → click any outgoing request → Request Headers → look for Referer header. If the policy is working, you'll see no Referer or a stripped version.

Permissions-Policy (formerly Feature-Policy)

Controls access to browser features:

Permissions-Policy: geolocation=(), camera=(), microphone=()
Enter fullscreen mode Exit fullscreen mode

This disables those APIs entirely. () means "denied for all". (self) means allowed for same origin. (self "https://trusted.com") allows specific origins.

Firefox DevTools: When a Permissions-Policy blocks a feature, the Console shows:

Permissions policy violation: geolocation is not allowed in this document.
Enter fullscreen mode Exit fullscreen mode

Firefox Security Console Warnings

Firefox's console shows security issues automatically. Common ones:

HTTPS mixed content:

Blocked loading mixed active content "http://example.com/script.js"
Enter fullscreen mode Exit fullscreen mode

Active mixed content (scripts, XHR) is blocked by default. Passive mixed content (images) shows a warning.

SameSite cookie warnings:

Cookie "session" will be soon rejected because it has the "SameSite" attribute set to "None" or 
an invalid value, without the "secure" attribute.
Enter fullscreen mode Exit fullscreen mode

Deprecated permissions:

Request for access to Navigator.getUserMedia() failed because the document is not fully active.
Enter fullscreen mode Exit fullscreen mode

Security Tab in Network Panel

Click any HTTPS request → Security tab:

  • TLS version (TLS 1.3 is current; TLS 1.0/1.1 are deprecated)
  • Cipher suite
  • Certificate validity
  • Certificate chain
  • Key exchange algorithm

Firefox blocks:

  • TLS 1.0 and 1.1 (with error page, configurable in about:config)
  • RC4 cipher (deprecated)
  • MD5 certificates
  • SHA-1 certificates (most are blocked)
  • Certificates more than 398 days old (Firefox 68+)

Testing with Firefox's Security Features

Simulate CSP enforcement:
Use Firefox's Network panel → Block URL Pattern to block known sources, then verify your CSP's report-only mode catches them.

Override HTTPS-Only for testing:
Temporarily disable HTTPS-Only for a specific site: Click lock icon → Broken lock warning → Disable HTTPS-Only for this site.

Clear security exceptions:
Settings → Privacy → Certificates → View Certificates → Servers tab → remove custom exceptions.

Security Headers: Quick Reference

Header Purpose Recommended Value
Content-Security-Policy Control resource loading Strict policy, no unsafe-eval, use nonces
Strict-Transport-Security Force HTTPS max-age=31536000; includeSubDomains
X-Content-Type-Options Prevent MIME sniffing nosniff
X-Frame-Options Clickjacking protection Use CSP frame-ancestors instead
Referrer-Policy Control referrer info strict-origin-when-cross-origin
Permissions-Policy Restrict browser APIs Deny unused features

All of these are verifiable in Firefox DevTools Network panel. Firefox is particularly good for security header testing because its console warnings are detailed and actionable.

Top comments (0)