How to add Permissions-Policy on Lovable / static hosting
Last updated · Reviewed by a CISSP-certified security practitioner
To add Permissions-Policy on Lovable / static hosting, set the header in src/server.ts (TanStack Start) or your edge proxy with the value camera=(), microphone=(), geolocation=(), payment=(), usb…. Turns off browser features (camera, mic, geolocation) you don't use. Publish, then curl -I your live domain. Then confirm it with curl -I or a free FixSecurityHeaders scan.
What does Permissions-Policy do?
Permissions-Policy disables powerful browser APIs for your page and any embedded iframes unless you explicitly allow them.
Risk if missing: Injected or third‑party scripts could request camera, microphone, geolocation or payment APIs.
What is the Lovable / static hosting configuration?
Add this to 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("Permissions-Policy", "camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=()");
return out;
}How do I add it step by step?
- Open src/server.ts (TanStack Start) or your edge proxy.
- Paste the Permissions-Policy configuration shown below.
- Publish, then curl -I your live domain.
- Run curl -I https://yourdomain.com and look for the permissions-policy line.
- Scan your site on FixSecurityHeaders to confirm the grade improved.
How do I verify it worked?
curl -sI https://yourdomain.com | grep -i "permissions-policy"
# expected:
# permissions-policy: camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=()Check your site now
Free scan, instant grade, exact fixes for your stack.
What are the common mistakes?
- Allow features you actually use, e.g. payment=(self) for Payment Request checkouts.
- 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 | Permissions-Policy |
|---|---|
| Recommended value | camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=() |
| Stack | Lovable / static hosting |
| Where | src/server.ts (TanStack Start) or your edge proxy |
| Compliance | OWASP ASVS V14.4, SOC 2 CC6.8 |
FAQ
What value should I use for Permissions-Policy?
A safe default is camera=(), microphone=(), geolocation=(), payment=(), usb=(), interest-cohort=(). Allow features you actually use, e.g. payment=(self) for Payment Request checkouts.
Why isn't Permissions-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 Permissions-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 Permissions-Policy?
OWASP ASVS V14.4, SOC 2 CC6.8.
Related guides
- Permissions-Policy explained
- Permissions-Policy on Nginx
- Permissions-Policy on Apache
- Permissions-Policy on IIS
- Permissions-Policy on Cloudflare
- Strict-Transport-Security on Lovable / static hosting
- Content-Security-Policy on Lovable / static hosting
- X-Content-Type-Options on Lovable / static hosting
- X-Frame-Options on Lovable / static hosting