ShipGuardScan a site

Content-Security-Policy for Vibe-Coded Apps

Updated 2026-10-17

CSP tells the browser which sources may run scripts, load styles, or receive requests. It is your safety net when XSS or a compromised third-party script slips through.

Start here

List your real dependencies (Supabase URL, Stripe, analytics) and allow only those.

default-src 'self';
script-src 'self' https://js.stripe.com;
connect-src 'self' https://<ref>.supabase.co wss://<ref>.supabase.co https://api.stripe.com;
img-src 'self' data: https:;
frame-src https://js.stripe.com https://checkout.stripe.com;
frame-ancestors 'none'; base-uri 'self'; form-action 'self'

Roll out safely

Ship as Content-Security-Policy-Report-Only, watch the console and reports for a few days, then switch to enforcing. Use nonces for framework inline scripts instead of 'unsafe-inline' where your framework supports it.

Checklist

  • CSP header on HTML responses
  • No wildcard script-src
  • 'unsafe-inline' replaced by nonces where possible
  • frame-ancestors set
  • Report-only phase completed

Copy-paste fix prompt

Generate a Content-Security-Policy for this app by listing every external origin it loads scripts, styles, images, fonts and API calls from. Add it as Report-Only first, with frame-ancestors 'none' and base-uri 'self'.

FAQ

Is a CSP with 'unsafe-inline' useless?

It still restricts external script origins and framing, but it does not stop most XSS. Nonces or hashes are the real fix.

Does CSP protect my API?

No. CSP is enforced by browsers on pages; API authorization must be enforced on the server.

Check your deployed app in ~25 seconds

Free passive scan: leaked keys, Supabase exposure, public config files and headers.

Run a free scan

Related