Frontend Beauty
ESC

Type to search the knowledge base.

Cross-Origin Embedder Policy

COEP require-corp / credentialless: cross-origin isolation, SharedArrayBuffer, and embedding requirements.

advanced3 min read
  • browser
  • coep
  • coop
  • cross-origin-isolation
  • security

Cross-Origin Embedder Policy (COEP) controls whether a document can load cross-origin resources that do not explicitly grant permission. Together with COOP, it enables cross-origin isolation — required for powerful APIs like SharedArrayBuffer after Spectre mitigations.

Docs: MDN COEP, web.dev COOP/COEP, MDN cross-origin isolation.

Why isolation exists

Spectre-class attacks made unrestricted high-resolution timers + shared memory dangerous across origins in the same process. Browsers gated SharedArrayBuffer (and related) on cross-origin isolated contexts:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Check in page:

console.log(crossOriginIsolated); // true when isolation is active

COEP values

Value Meaning
unsafe-none (default) No special embedding restrictions from COEP
require-corp Every subresource must be same-origin or explicitly allow via CORP/CORS
credentialless Cross-origin no-cors requests omit credentials; softer migration path

require-corp in practice

Cross-origin images, scripts, and frames need either:

  1. CORS mode + ACAO, or
  2. Cross-Origin-Resource-Policy header from the resource owner:
Cross-Origin-Resource-Policy: cross-origin

Without that, the resource is blocked under COEP require-corp. This breaks third-party widgets, analytics, and random CDNs until they send CORP/CORS.

<!-- cross-origin image must cooperate under COEP require-corp -->
<img src="https://cdn.example.com/pic.jpg" crossorigin="anonymous" />

CDN must respond with ACAO (for CORS) and/or CORP.

Migration pain (real product)

Turning on COEP is a dependency graph problem: every embed and asset vendor must play along. Order of operations:

  1. Inventory third parties.
  2. Prefer credentialless if it meets your API needs.
  3. Add CORP on first-party static assets.
  4. Enable COOP+COEP on a canary.
  5. Verify crossOriginIsolated === true and SAB if needed.

COEP vs CSP vs CORS

  • CORS — can JS read the response?
  • COEP — may the document embed the resource under isolation rules?
  • CSP — allowlists for script/style/etc. as XSS defense.

They stack; fixing one does not replace the others.

Interview out-loud

“COEP require-corp forces embeds to opt in via CORP or CORS so the page can be cross-origin isolated with COOP. That unlocks SharedArrayBuffer. The cost is every third-party asset must cooperate — credentialless eases some migrations.”

SharedArrayBuffer checklist

  1. Confirm you actually need SAB (audio worklets, WASM threads, codecs).
  2. Set COOP same-origin + COEP require-corp or credentialless.
  3. Audit every cross-origin image, script, worker, and frame.
  4. Add Cross-Origin-Resource-Policy: cross-origin on first-party static assets.
  5. Assert crossOriginIsolated in a boot smoke test.

If SAB is a nice-to-have, the isolation migration cost may not be worth it yet.

Further depth

Teams often under-invest in this topic until an incident or CWV regression. Schedule a one-hour drill: reproduce the failure mode in DevTools, list the top three mitigations for your stack, and file tickets with owners. Revisit after the next major feature that touches networking, rendering, auth, or third parties — those are the moments regressions land. Keep primary documentation links in the runbook so on-call is not searching chat history at 2am.

Concrete artifacts to leave behind: a short architecture note, a CI assertion or header snapshot, and a dashboard panel (lab or field) that would have caught the last bug. Teaching the rest of the team the mental model matters as much as the one-line fix.

Further reading

Related guides