"I made my portfolio site audit its own security headers, live, in front of you"

Short summary

A developer built a live security-header audit section into their Astro portfolio site that fetches its own URL via HEAD request and displays each expected header as ON or missing in real time. The post details why Content-Security-Policy is split between a Cloudflare _headers file and an Astro-generated meta tag, and why combining both would break the site due to policy intersection. All DOM updates use textContent to avoid self-XSS in the security section.

• •Portfolio site fetches its own URL via HEAD and renders each security header as ON or missing live
• •CSP is split: Astro generates hash-based script-src in a meta tag at build time, Cloudflare handles other headers
• •All header values rendered via textContent to prevent self-XSS in the security section

Generated with AI, which can make mistakes.