Back to blog
SecurityJanuary 1, 2024· 4 min read

HTTP Headers: The Hidden Controls of Every Website

A practical Fusebox guide to http headers.

HTTP Headers: The Hidden Controls of Every Website

Published: January 2024
Reading time: 8 minutes

HTTP headers are like shipping labels for web traffic. They control caching, security, authentication, and more. Here's what developers need to know.

What Are HTTP Headers?

Every HTTP request and response carries headers:

Request headers (browser → server):

GET /api/users HTTP/1.1
Host: example.com
Authorization: Bearer abc123...
Accept: application/json
User-Agent: Mozilla/5.0...

Response headers (server → browser):

HTTP/1.1 200 OK
Content-Type: application/json
Cache-Control: max-age=3600
Set-Cookie: session=xyz789...
X-Frame-Options: DENY

These invisible instructions control everything.

Essential Headers for Developers

1. Content-Type - What You're Sending

Content-Type: text/html; charset=UTF-8
Content-Type: application/json
Content-Type: image/png
Content-Type: multipart/form-data

Why it matters:

  • Wrong type = browser misinterprets
  • Missing charset = encoding issues
  • Affects how data is parsed

2. Cache-Control - Speed vs Freshness

# Cache for 1 year (static assets)
Cache-Control: public, max-age=31536000

# Never cache (user data)
Cache-Control: no-store

# Check if still valid
Cache-Control: no-cache

# Cache but revalidate
Cache-Control: private, must-revalidate

Impact: Proper caching = faster sites

3. Authorization - Who You Are

# Bearer token (OAuth, JWT)
Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

# Basic auth (username:password base64)
Authorization: Basic dXNlcjpwYXNz

# API key
X-API-Key: your-api-key-here

Security note: Always use HTTPS with auth headers

4. CORS Headers - Who Can Access

# Allow specific origin
Access-Control-Allow-Origin: https://example.com

# Allow any origin (careful!)
Access-Control-Allow-Origin: *

# Allow credentials
Access-Control-Allow-Credentials: true

# Allowed methods
Access-Control-Allow-Methods: GET, POST, PUT, DELETE

Common issue: API works in Postman but not browser = CORS

Security Headers That Matter

1. Strict-Transport-Security (HSTS)

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

Effect: Forces HTTPS for 1 year Benefit: Prevents downgrade attacks

2. X-Frame-Options

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

Effect: Prevents iframe embedding Benefit: Stops clickjacking

3. Content-Security-Policy (CSP)

Content-Security-Policy: default-src 'self'; 
  script-src 'self' cdnjs.cloudflare.com;
  style-src 'self' 'unsafe-inline';

Effect: Controls resource loading Benefit: Prevents XSS attacks

4. X-Content-Type-Options

X-Content-Type-Options: nosniff

Effect: Prevents MIME type sniffing Benefit: Stops type confusion attacks

Real-World Scenarios

Scenario 1: API Authentication

Request:

GET /api/user/profile
Authorization: Bearer eyJhbGc...
Accept: application/json

Response:

200 OK
Content-Type: application/json
Cache-Control: private, max-age=0
X-RateLimit-Remaining: 99

What happened:

  • JWT token authenticated user
  • Response won't be cached
  • 99 API calls remaining

Scenario 2: Static Asset Optimization

Request:

GET /static/app.js
If-None-Match: "33a64df551"

Response:

304 Not Modified
Cache-Control: public, max-age=31536000
ETag: "33a64df551"

Optimization:

  • Browser had cached version
  • Server says "use your cache"
  • Zero bytes transferred

Scenario 3: File Upload

Request:

POST /upload
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary
Content-Length: 2485963

Response:

201 Created
Location: /files/document-123.pdf
X-Upload-Size-Limit: 10485760

Details:

  • Multipart for file upload
  • Server created resource
  • 10MB size limit indicated

Performance Headers

1. Compression

# Request
Accept-Encoding: gzip, deflate, br

# Response
Content-Encoding: gzip

Result: 70-90% smaller transfers

2. Keep-Alive

Connection: keep-alive
Keep-Alive: timeout=5, max=1000

Result: Reuse connections, faster requests

3. Early Hints

HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload; as=style
Link: </script.js>; rel=preload; as=script

Result: Browser starts loading before HTML

4. Server Push (HTTP/2)

Link: </app.css>; rel=preload; as=style; nopush

Note: Often disabled, can hurt performance

Debugging with Headers

1. Why is my API call failing?

Check these headers:

# Wrong content type?
Content-Type: text/plain (expected application/json)

# Missing auth?
Authorization: [missing]

# CORS blocked?
Access-Control-Allow-Origin: [missing or wrong]

2. Why isn't caching working?

Look for:

# Forced revalidation
Cache-Control: no-cache

# User-specific content
Cache-Control: private

# Already expired
Expires: Thu, 01 Jan 1970 00:00:00 GMT

3. Why is the site slow?

Check:

# No compression
Content-Encoding: [missing]

# No keep-alive
Connection: close

# Large payload
Content-Length: 5242880 (5MB!)

Custom Headers

Common Patterns

API Versioning:

X-API-Version: 2.0
Accept: application/vnd.api+json;version=2

Request ID Tracking:

X-Request-ID: 550e8400-e29b-41d4-a716-446655440000

Rate Limiting:

X-RateLimit-Limit: 100
X-RateLimit-Remaining: 45
X-RateLimit-Reset: 1672531200

Feature Flags:

X-Feature-Flags: dark-mode,new-dashboard

Header Best Practices

1. Security First

# Always include
Strict-Transport-Security: max-age=31536000
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

# For APIs
Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Credentials: true

2. Performance Optimization

# Static assets (1 year)
Cache-Control: public, max-age=31536000, immutable

# Dynamic content
Cache-Control: private, max-age=3600, must-revalidate

# API responses
Cache-Control: no-store
Content-Type: application/json

3. Debugging Headers

# Development only
X-Debug-Time: 0.125s
X-SQL-Queries: 5
X-Cache-Status: MISS
X-Server-ID: web-01

Quick Reference

Cache Durations

  • Static assets: max-age=31536000 (1 year)
  • CSS/JS: max-age=86400 (1 day)
  • HTML: max-age=3600 (1 hour)
  • API: no-store or max-age=0

Security Headers Checklist

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

CORS Debugging

  1. Check Origin header in request
  2. Verify Access-Control-Allow-Origin
  3. For credentials, check Allow-Credentials
  4. For custom headers, check Allow-Headers

Tools for Header Analysis

Browser DevTools

  1. Network tab
  2. Click any request
  3. Headers tab
  4. See all headers

Command Line

# See response headers
curl -I https://example.com

# See request and response
curl -v https://example.com

# Custom headers
curl -H "Authorization: Bearer token" https://api.example.com

Online Tools

  • SecurityHeaders.io (security audit)
  • WebPageTest (performance)
  • Postman (API testing)

The Bottom Line

HTTP headers are your website's control panel. They determine:

  • Security: Who can access what
  • Performance: How fast pages load
  • Functionality: How APIs work
  • Debugging: What went wrong

Master headers, master the web.

Analyze HTTP headers instantly: Fusebox shows all request and response headers while you browse. Security, performance, and API insights at a glance. $29 one-time purchase.