HTTP Headers Checker
Inspect HTTP response headers, security headers, and connection timing for any URL.
HTTP Headers Checker fetches a URL you provide and reports its response headers, security-header coverage, and connection timing. This is a network tool: the browser issues a real outbound GET (mode: 'cors', redirect: 'follow') to the target URL itself — no first-party proxy is involved, so the request is subject to that site's CORS policy. Many sites block cross-origin reads, and the tool explains that with an actionable error rather than failing silently.
Results show a color-coded status badge, a Timing card (DNS / Connect / TLS / TTFB / Total in ms from the Performance API), a shielded "Security Headers (n)" panel covering a nine-header allowlist (HSTS, CSP, X-Frame-Options, and friends), and "All Headers (n)" for the rest. Copy emits key: value lines; Clear resets. Redirects are followed, and the redirectChain note reflects response.redirected.
How it works
checkHeaders in lib/httpHeaders.ts normalizes the URL (prepends https:// if the scheme is missing), then fetch(url, { method: 'GET', mode: 'cors', redirect: 'follow' }). On failure it retries a HEAD with mode: 'no-cors' purely to capture timing entries, then throws the CORS explanation: "Unable to fetch headers for this URL (CORS restriction). Try a URL you control or one that allows cross-origin requests. Total time: {n}ms".
Response headers are collected into a record and split by isSecurityHeader against a fixed lowercased allowlist: strict-transport-security, content-security-policy, x-frame-options, x-content-type-options, x-xss-protection, referrer-policy, permissions-policy, cross-origin-opener-policy, cross-origin-resource-policy. Timing comes from performance.getEntriesByName(url) NavigationTiming fields (domainLookup, connect, secureConnectionStart, responseStart/requestStart, responseEnd) with zero fallbacks plus a measured total. State lives in httpHeadersSlice.
How to use
- Step "Input" — paste a URL into "URL to Check" (placeholder "https://example.com"; scheme optional — https:// is added if absent).
- Click "Check" (button shows "Checking..."; toast "Headers fetched!" on success).
- Read the status badge (2xx green, ≥400 red, else yellow) or "N/A", plus the final URL.
- Review "Timing": DNS, Connect, TLS, TTFB, Total — each in milliseconds.
- Scan "Security Headers (n)" — the nine allowlisted security headers isolated under a green shield.
- Scan "All Headers (n)" for the rest (server, content-type, cache-control, …).
- Copy all as key: value lines (toast "Headers copied!"); "Clear" resets (toast "Cleared!").
Tips
- CORS is the main limitation — many sites block cross-origin GET; the error message suggests trying a URL you control or one that allows cross-origin requests.
- Security header detection is a fixed allowlist in SECURITY_HEADERS (lowercased compare) — headers outside the nine land in All Headers.
- Timing values come from the browser Performance API and may show zeros if navigation entries are unavailable for that URL.
- Redirects are followed (redirect: 'follow'); response.redirected notes whether a redirect occurred.
- The outbound request goes from your browser directly to the target host — that host sees your IP; no first-party server proxies it.
HTTP Headers Checker FAQ
Why "CORS restriction"?
The cross-origin fetch failed; the code falls back to a no-cors HEAD only for timing, then throws the explanatory error with total time.
Which headers count as security headers?
The nine in SECURITY_HEADERS: HSTS, CSP, X-Frame-Options, X-Content-Type-Options, X-XSS-Protection, Referrer-Policy, Permissions-Policy, COOP, and CORP.
Are timing numbers always accurate?
They come from performance.getEntriesByName NavigationTiming fields — zeros appear when the API lacks entries for that URL.
Does it follow redirects?
Yes — fetch uses redirect: 'follow', and the result notes redirectChain when response.redirected is true.
Where does the request go?
Directly from your browser to the URL you entered (mode: 'cors'); there is no first-party proxy, which is why the target's CORS policy matters.
Credits
- Fetch API — GET with no-cors HEAD fallback in checkHeaders (lib/httpHeaders.ts) — outbound request to the target URL
- Navigation Timing / Performance API — DNS/Connect/TLS/TTFB timing extraction in getTiming