How to Configure SSL, HSTS, and Security Headers

Category: Security & SSL (Weight: 20 points) • Severity: Critical Blocker

Why Security Headers Matter

Modern web browsers protect your visitors against Cross-Site Scripting (XSS), clickjacking, and protocol downgrade attacks using HTTP response headers. Without Strict-Transport-Security (HSTS), attackers on shared Wi-Fi networks can intercept unencrypted HTTP redirects. Missing X-Frame-Options leaves your checkout or login forms vulnerable to invisible UI redress iframe attacks.

Platform-Specific Solutions

Cloudflare Edge Deployment (Recommended for all platforms)

Log in to your Cloudflare dashboard and select your active zone.
Go to SSL/TLS > Edge Certificates.
Enable Always Use HTTPS and set Minimum TLS Version to TLS 1.2 or TLS 1.3.
Under HTTP Strict Transport Security (HSTS), click Change HSTS settings. Check Enable HSTS, set Max-Age to at least 6 months (15,768,000 seconds), and enable Include subdomains and Preload.
Navigate to Rules > Transform Rules > Modify Response Header to inject X-Content-Type-Options: nosniff and X-Frame-Options: SAMEORIGIN with zero code changes.

Next.js Configuration (next.config.js)

Add security headers directly in your Next.js application configuration:

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=31536000; includeSubDomains; preload',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'X-Frame-Options',
            value: 'SAMEORIGIN',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
          {
            key: 'Permissions-Policy',
            value: 'camera=(), microphone=(), geolocation=()',
          },
        ],
      },
    ];
  },
};

Nginx Server Block Configuration

Paste these directives inside your SSL server configuration block in /etc/nginx/sites-available/yoursite.conf:

server {
    listen 443 ssl http2;
    server_name example.com www.example.com;

    # SSL Certificates (Let's Encrypt / Certbot)
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    # HSTS and Hardening Headers
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
}

Test syntax with sudo nginx -t and reload with sudo systemctl reload nginx.

WordPress via .htaccess or Security Plugins

If running Apache or LiteSpeed, append the following lines to your .htaccess file before the WordPress rewrite block:

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

Alternatively, activate the free “Headers Security Advanced & HSTS WP” or “Really Simple SSL Pro” plugin to toggle headers with one click.