Security headers and HSTS: a checklist for SEO teams

1Run the security snippet 30 seconds

Open DevTools (F12), go to the Console and paste:

Copy// Checks this page's security headers, then mixed content, HTTP links and insecure forms
const res = await fetch(location.href, { cache: 'no-store' });
const h = name => res.headers.get(name) || '';
const https = location.protocol === 'https:';
const csp = h('content-security-policy');
const xcto = h('x-content-type-options');
const row = (header, ok, sent, problem = 'MISSING') => ({ header, sent: sent || '(not sent)', result: ok ? 'ok' : sent ? problem : 'MISSING' });
console.table([
  row('HTTPS', https, location.protocol, 'NOT HTTPS'),
  ...(https ? [row('Strict-Transport-Security', !!h('strict-transport-security'), h('strict-transport-security'))] : []),
  row('Content-Security-Policy', !!csp, csp.slice(0, 80)),
  row('X-Content-Type-Options', xcto.toLowerCase() === 'nosniff', xcto, 'should be nosniff'),
  row('X-Frame-Options or frame-ancestors', !!h('x-frame-options') || /frame-ancestors/i.test(csp),
    h('x-frame-options') || (/frame-ancestors/i.test(csp) ? 'CSP frame-ancestors' : '')),
  row('Referrer-Policy', !!h('referrer-policy'), h('referrer-policy')),
]);
const site = location.hostname.replace(/^www\./, '');
const isHttp = url => /^http:\/\//i.test(url);
const srcsetUrls = el => (el.getAttribute('srcset') || '').split(',').map(s => s.trim().split(/\s+/)[0]).filter(Boolean)
  .map(u => { try { return new URL(u, document.baseURI).href; } catch { return ''; } });
const mixed = https ? [...new Set([
  ...[...document.querySelectorAll('script[src], link[rel~="stylesheet" i][href], img[src], iframe[src], video[src], audio[src], source[src], embed[src]')]
    .map(el => el.src || el.href),
  ...[...document.querySelectorAll('img[srcset], source[srcset]')].flatMap(srcsetUrls),
  ...[...document.querySelectorAll('object[data]')].map(el => el.data),
])].filter(isHttp) : [];
const httpLinks = https ? [...document.querySelectorAll('a[href]')]
  .filter(a => a.protocol === 'http:' && a.hostname.replace(/^www\./, '') === site).map(a => a.href) : [];
// getAttribute, because form.action returns a child element if a field is named "action"
const actionOf = f => { try { return new URL(f.getAttribute('action') || location.href, document.baseURI).href; } catch { return ''; } };
const forms = [...document.forms]
  .filter(f => (https && isHttp(actionOf(f))) || (!https && f.querySelector('input[type="password" i]')))
  .map(actionOf);
console.log('Mixed content:', mixed.length ? mixed : 'none');
console.log('Links to the HTTP version of this site:', httpLinks.length ? httpLinks : 'none');
console.log('Forms that send data unencrypted:', forms.length ? forms : 'none');

It lists each header with what the server sent, then any mixed content, links to the HTTP version of the site, and forms that send data unencrypted.

It reads the headers of the page as your browser gets it. A CDN can send different headers to different visitors, so check a couple of page types. A Content-Security-Policy-Report-Only header doesn't count as a policy here, because it doesn't block anything. It only sends reports if it has a report-to or report-uri directive; otherwise watch the Console.

2Read the headers in DevTools 1 minute

1. Open DevTools, go to the Network tab and reload.
2. Click the first request (the page itself) and open Headers.
3. Look under Response Headers for the five names above.

The Console also prints a warning for each piece of mixed content the browser blocked or upgraded.

3Test the HTTP version 1 minute

Type the site's address with http:// in a private window. It should land on the https:// version in a single redirect. Once HSTS is cached, DevTools shows a "307 Internal Redirect" instead of the server's answer: curl -I http://example.com in a terminal shows the real one.