HTTP Headers Explained: Security, Caching, and Performance

HTTP headers are the backbone of web communication, controlling everything from security policies to caching behavior. Understanding how to properly configure headers is essential for building secure, performant web applications.

What are HTTP Headers?

HTTP headers are key-value pairs sent between client and server with every HTTP request and response. They carry metadata about the request/response, including:

• Content type and encoding
• Authentication credentials
• Caching directives
• Security policies
• Connection management

Request vs Response Headers

Security Headers

Content-Security-Policy (CSP)

Controls which resources the browser can load. Essential for preventing XSS attacks.

Content-Security-Policy: default-src 'self';
    script-src 'self' https://trusted-cdn.com;
    style-src 'self' 'unsafe-inline';
    img-src 'self' data: https:;
    connect-src 'self' https://api.example.com;

Strict-Transport-Security (HSTS)

Forces browsers to use HTTPS only.

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

X-Content-Type-Options

Prevents MIME type sniffing.

X-Content-Type-Options: nosniff

X-Frame-Options

Protects against clickjacking attacks.

X-Frame-Options: DENY
# or
X-Frame-Options: SAMEORIGIN

Referrer-Policy

Controls how much referrer information is sent.

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

Permissions-Policy

Controls browser features and APIs.

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

Caching Headers

Cache-Control

The primary mechanism for controlling caching behavior.

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

# Cache but revalidate
Cache-Control: no-cache

# Never cache
Cache-Control: no-store

# Private (browser only)
Cache-Control: private, max-age=3600

ETag and Last-Modified

Enable conditional requests to save bandwidth.

# Response
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT

# Subsequent request
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
If-Modified-Since: Wed, 21 Oct 2024 07:28:00 GMT

Caching Strategy Table

CORS Headers

Cross-Origin Resource Sharing headers control which domains can access your API.

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

# Allow any origin (use with caution)
Access-Control-Allow-Origin: *

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

# Allow specific headers
Access-Control-Allow-Headers: Content-Type, Authorization

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

# Preflight cache duration
Access-Control-Max-Age: 86400

Performance Headers

Content-Encoding

Compression reduces transfer size significantly.

Content-Encoding: gzip
Content-Encoding: br  # Brotli (better compression)

Connection and Keep-Alive

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

Resource Hints

Link: <https://cdn.example.com>; rel=preconnect
Link: </styles/main.css>; rel=preload; as=style
Link: </next-page.html>; rel=prefetch

Using Our HTTP Headers Checker

Our HTTP Headers Checker analyzes any URL and shows:

1. All response headers received
2. Security header audit with recommendations
3. Caching configuration analysis
4. CORS policy review
5. Compression status

Implementation Examples

Nginx

# Security headers
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header Content-Security-Policy "default-src 'self'" always;

# Caching for static files
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Apache (.htaccess)

<IfModule mod_headers.c>
    Header always set X-Frame-Options "SAMEORIGIN"
    Header always set X-Content-Type-Options "nosniff"
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"
    Header always set Content-Security-Policy "default-src 'self'"
</IfModule>

# Cache static assets
<FilesMatch "\.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$">
    Header set Cache-Control "max-age=31536000, public, immutable"
</FilesMatch>

Node.js/Express

const helmet = require('helmet');

// Basic security headers
app.use(helmet());

// Custom CSP
app.use(helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "https://trusted-cdn.com"],
        styleSrc: ["'self'", "'unsafe-inline'"],
    }
}));

Conclusion

Proper HTTP header configuration is crucial for web security and performance. Use our HTTP Headers Checker to audit your current setup and identify improvements. Remember that security headers should be implemented as defense in depth - each one adds another layer of protection.