Skip to content
FixSecurityHeadersScan a site

How to add Cross-Origin-Embedder-Policy on Lovable / static hosting

Last updated · Reviewed by a CISSP-certified security practitioner

To add Cross-Origin-Embedder-Policy on Lovable / static hosting, set the header in src/server.ts (TanStack Start) or your edge proxy with the value require-corp. Requires embedded resources to opt in (enables cross-origin isolation). Publish, then curl -I your live domain. Then confirm it with curl -I or a free FixSecurityHeaders scan.

What does Cross-Origin-Embedder-Policy do?

COEP makes the page refuse cross-origin resources that haven't opted in via CORP or CORS. Combined with COOP it enables cross-origin isolation.

Risk if missing: Informational: mainly needed for SharedArrayBuffer and high-precision timers.

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("Cross-Origin-Embedder-Policy", "require-corp");
  return out;
}

How do I add it step by step?

  1. Open src/server.ts (TanStack Start) or your edge proxy.
  2. Paste the Cross-Origin-Embedder-Policy configuration shown below.
  3. Publish, then curl -I your live domain.
  4. Run curl -I https://yourdomain.com and look for the cross-origin-embedder-policy line.
  5. Scan your site on FixSecurityHeaders to confirm the grade improved.

How do I verify it worked?

terminal
curl -sI https://yourdomain.com | grep -i "cross-origin-embedder-policy"
# expected:
# cross-origin-embedder-policy: require-corp

Check your site now

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

What are the common mistakes?

  • Easily breaks third‑party images, fonts and embeds. Consider credentialless, and only deploy if you need isolation.
  • 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

HeaderCross-Origin-Embedder-Policy
Recommended valuerequire-corp
StackLovable / static hosting
Wheresrc/server.ts (TanStack Start) or your edge proxy
ComplianceOWASP ASVS V14.4

FAQ

What value should I use for Cross-Origin-Embedder-Policy?

A safe default is require-corp. Easily breaks third‑party images, fonts and embeds. Consider credentialless, and only deploy if you need isolation.

Why isn't Cross-Origin-Embedder-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 Cross-Origin-Embedder-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 Cross-Origin-Embedder-Policy?

OWASP ASVS V14.4.

Related guides