How to add Content-Security-Policy on Lovable / static hosting

Last updated November 11, 2026 · Reviewed by a CISSP-certified security practitioner

To add Content-Security-Policy on Lovable / static hosting, set the header in src/server.ts (TanStack Start) or your edge proxy with the value default-src 'self'; script-src 'self'; style-src 'self'; …. Controls which scripts, styles and frames a page may load. Publish, then curl -I your live domain. Then confirm it with curl -I or a free FixSecurityHeaders scan.

What does Content-Security-Policy do?

CSP is an allow-list for where your page may load scripts, styles, images, frames and connections from. It is the strongest defence against cross-site scripting.

Risk if missing: Without a CSP, any injected script (XSS, a compromised third‑party tag, a Magecart skimmer) runs with full access to your users' sessions and payment forms.

What is the Lovable / static hosting configuration?

Add this to src/server.ts (TanStack Start) or your edge proxy:

src/server.ts (TanStack Start) or your edge proxy

// src/server.ts — wrap the response before returning it
function withSecurityHeaders(res: Response): Response {
  const out = new Response(res.body, res);
  const h = out.headers;
  h.set("Content-Security-Policy", "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests");
  return out;
}

How do I add it step by step?

Open src/server.ts (TanStack Start) or your edge proxy.
Paste the Content-Security-Policy configuration shown below.
Publish, then curl -I your live domain.
Run curl -I https://yourdomain.com and look for the content-security-policy line.
Scan your site on FixSecurityHeaders to confirm the grade improved.

How do I verify it worked?

terminal

curl -sI https://yourdomain.com | grep -i "content-security-policy"
# expected:
# content-security-policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests

Check your site now

Free scan, instant grade, exact fixes for your stack.

What are the common mistakes?

Deploy as Content-Security-Policy-Report-Only first and watch reports before enforcing.
'unsafe-inline' and 'unsafe-eval' in script-src remove most of the XSS protection. Use nonces or hashes.
Analytics, chat widgets and payment iframes need their hosts added explicitly.
Only one CSP header should be sent; multiple policies are intersected, which often blocks more than expected.
Pure static hosts that don't allow custom headers can be fronted by Cloudflare to add them.
Skip frame-blocking headers on preview URLs that are shown inside editors.

Quick reference

Header	`Content-Security-Policy`
Recommended value	`default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests`
Stack	Lovable / static hosting
Where	src/server.ts (TanStack Start) or your edge proxy
Compliance	PCI DSS 4.0 6.4.3, PCI DSS 4.0 11.6.1, OWASP ASVS V14.4.3, SOC 2 CC6.8, NIST 800-171 3.13.1

FAQ

What value should I use for Content-Security-Policy?

A safe default is default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests. Deploy as Content-Security-Policy-Report-Only first and watch reports before enforcing.

Why isn't Content-Security-Policy showing up on Lovable / static hosting?

Pure static hosts that don't allow custom headers can be fronted by Cloudflare to add them. Also clear any CDN or page cache, and check you edited the config that actually serves your domain.

Does Content-Security-Policy affect SEO or performance?

No measurable performance cost — it's a few bytes per response. It doesn't affect rankings directly, but a misconfigured policy can break page resources, so test before enforcing.

Which compliance frameworks reference Content-Security-Policy?

PCI DSS 4.0 6.4.3, PCI DSS 4.0 11.6.1, OWASP ASVS V14.4.3, SOC 2 CC6.8, NIST 800-171 3.13.1.