What problem does it solve? Marketing sites that load third-party analytics and tracking scripts (GA4, Reddit Pixel, Ahrefs) are exposed to XSS and code-injection risks unless a Content Security Policy restricts which origins can execute scripts, load images, and open connections. Manually writing a correct CSP for a static Firebase-hosted site is error-prone, especially around inline scripts and the nonce-versus-hash tradeoff. ## Core Features & Use Cases - Service-aware policy assembly: Audits the project for GA4, Reddit Pixel, Ahrefs Web Analytics, Firebase, and Google Fonts, then extends each CSP directive only for the services actually present. - Inline script handling: Moves inline <script> blocks into public/ files where possible and computes SHA-256 hashes for any that must remain inline. - Safe rollout workflow: Deploys first in Content-Security-Policy-Report-Only mode on dev, then switches to enforcing mode and verifies the live header with curl. - Next.js track: For server-rendered Next.js on Firebase App Hosting, generates per-request nonces in middleware.ts with 'strict-dynamic' instead of static hashes. - Use Case: After adding GA4 and a Reddit Pixel to a Vite marketing site, run this skill to produce a firebase.json CSP header that allows exactly those origins, test it in report-only mode on the dev deployment, then enforce it in production. ## Quick Start Ask the AI to add a Content Security Policy to the Firebase hosting configuration for this site, covering whichever analytics and tracking services the project currently uses.
