Developer builds portfolio page that audits its own HTTP security headers in real time
A developer has built a portfolio site that automatically checks its own HTTP security headers each time a visitor loads the page, using a same-origin fetch HEAD request to read and display whether each expected header is present or missing. The site is built with Astro, deployed as a fully static site on Cloudflare, and the expected headers are passed in from the component rather than hardcoded into the script. A key complication arose because the Content-Security-Policy is split across two locations: the HTTP response header and an HTML meta tag generated by Astro at build time, since only the build process knows the SHA-256 script hashes. The developer updated the live audit card to surface both sources, avoiding a misleading half-picture on a page explicitly designed to demonstrate transparency. The site also earned an A+ on Mozilla's HTTP Observatory, with a direct link allowing visitors to re-run the scan themselves.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in