DEV Community

Hayden
Hayden

Posted on

How to check your website's security headers in 5 minutes (and turn on the 4 that matter)

#webdev #tutorial #security #beginners

Every time someone visits your website, your server sends a few lines of instructions along with the page. They're called response headers. Some of them tell the browser how careful to be: always use the secure connection, don't let other sites wrap your page in a frame, don't guess file types.

They cost nothing. They take minutes to add. And a lot of sites, from hand-built WordPress sites to apps made with Lovable or Bolt, ship without them.

Here's how to check yours and fix the gaps.

Step 1: Look at your headers (2 minutes)

Option A: your browser. Open your site in Chrome or Firefox. Press F12 (or right-click and choose Inspect). Click the Network tab, then reload the page. Click the first row, which is your page itself. Scroll to Response Headers.

Option B: one command. If you have a terminal:

curl -sI https://yoursite.com
Enter fullscreen mode Exit fullscreen mode

The -I asks for headers only. You'll get a short list back.

Now look for these four names:

  1. strict-transport-security
  2. x-content-type-options
  3. x-frame-options (or frame-ancestors inside content-security-policy)
  4. referrer-policy

Write down which ones are missing.

Step 2: Know what each one does (1 minute)

Strict-Transport-Security (HSTS). Tells the browser: "Only ever talk to me over https." Without it, a visitor who types your address without https can land on the plain, unprotected version first. A common value:

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

Only add this once https works everywhere on your site, including subdomains you plan to cover. Browsers will remember it for the full max-age.

X-Content-Type-Options. Stops the browser from guessing what a file is. One value, always the same:

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

X-Frame-Options. Stops other sites from loading your page inside a hidden frame and tricking people into clicking things (this is called clickjacking):

X-Frame-Options: DENY
Enter fullscreen mode Exit fullscreen mode

If you embed your own pages in frames, use SAMEORIGIN instead.

Referrer-Policy. Controls how much of your page address gets passed along when someone clicks a link off your site. Useful if your URLs ever hold things like reset tokens or order numbers:

Referrer-Policy: strict-origin-when-cross-origin
Enter fullscreen mode Exit fullscreen mode

Step 3: Turn them on (2 minutes, depends on your host)

Vercel. Add a vercel.json in your project root:

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Strict-Transport-Security", "value": "max-age=31536000" },
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Netlify. Add a file named _headers to your publish folder:

/*
  Strict-Transport-Security: max-age=31536000
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  Referrer-Policy: strict-origin-when-cross-origin
Enter fullscreen mode Exit fullscreen mode

Cloudflare in front of your site. Use Rules, then Transform Rules, then "Modify Response Header," and add each one. HSTS has its own switch under SSL/TLS, then Edge Certificates.

WordPress. Many hosts have a security headers setting in their control panel. If yours doesn't, a well-known security plugin can add them. Pick one plugin, not three.

Wix, Squarespace, Shopify. You usually can't edit headers yourself. The platform sets them. Check what you have with Step 1. If something important is missing, ask their support.

Step 4: Check again

Reload with F12 open, or run the curl command again. All four should show up. Then click around your site for a minute. If something broke (usually an embedded video or a payment widget inside a frame), that's almost always X-Frame-Options. Switch it to SAMEORIGIN or allow that one page.

What about Content-Security-Policy?

CSP is the strongest header and the easiest to break your site with. It lists exactly where scripts, images and styles may load from. Start with Content-Security-Policy-Report-Only so the browser reports problems without blocking anything. Fix what it reports, then switch to the real header. Give it its own afternoon.

The honest part

Headers are seatbelts, not a lock. They won't fix a database that anyone can read or a secret key sitting in your front-end code. But they're the cheapest fix on this list, and the first thing a stranger can see.

If you'd rather not do Step 1 by hand, DeployVet runs a free outside check of your site. It looks at headers, the padlock, exposed files and broken pages, and explains what it finds in plain English: https://deployvet.com/?utm_source=devto&utm_medium=article&utm_campaign=howto

It reads what's public, the same way a stranger would. It isn't a penetration test.

Top comments (0)