Cross-Origin-Embedder-Policy

TL;DR: Controls which cross-origin resources can be embedded in your page. Use require-corp to only allow resources with explicit CORS or CORP permission, enabling cross-origin isolation for SharedArrayBuffer.

What is Cross-Origin-Embedder-Policy?

The Cross-Origin-Embedder-Policy (COEP) header tells the browser to block cross-origin resources unless those resources explicitly opt in via CORS or CORP.

It is enforced at the document level and is key to achieving cross-origin isolation.

Syntax

Cross-Origin-Embedder-Policy: unsafe-none
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Embedder-Policy: credentialless
```text

## Value Guide

- `unsafe-none`: default behavior, no extra embedding restrictions
- `require-corp`: load cross-origin resources only if they are CORS-enabled or have CORP
- `credentialless`: similar isolation behavior, but cross-origin `no-cors` requests omit credentials

## Example

```http
HTTP/1.1 200 OK
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

This combination typically yields a crossOriginIsolated environment.

Implementation

app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
  next()
})

Why Pages Break After Enabling COEP

The common failure mode is third-party assets that do not send proper CORS/CORP headers:

• fonts from a CDN without CORS headers
• scripts or WASM not opt-in for cross-origin embedding
• analytics tags loaded from origins that do not support COEP-safe delivery

Audit every embedded cross-origin asset before enforcing.

Rollout Strategy

1. Start with inventory of cross-origin scripts/fonts/media.
2. Ensure those resources return CORS or CORP headers.
3. Enable COEP in staging and test critical pages.
4. Pair with Cross-Origin-Opener-Policy for full isolation.

Related Headers

• Cross-Origin-Opener-Policy
• Cross-Origin-Resource-Policy

Enabling COEP Without Breaking Your Page

Deploying Cross-Origin-Embedder-Policy: require-corp is one of the more disruptive security header changes because it affects every cross-origin resource your page loads. Before enabling it, audit all external resources: fonts from Google Fonts, scripts from CDNs, images from third-party services, and embedded iframes.

For each cross-origin resource, you need the resource provider to add either CORS headers (Access-Control-Allow-Origin) or a Cross-Origin-Resource-Policy header. Public CDNs like jsDelivr and unpkg already support CORS. Google Fonts supports CORS when you use the crossorigin attribute on the <link> tag. However, many analytics scripts, ad networks, and embedded widgets do not support COEP-safe delivery.

The credentialless value offers a middle path. With require-corp, every cross-origin resource must explicitly opt in. With credentialless, cross-origin resources can be loaded without credentials (cookies, client certificates) even if they do not have CORS or CORP headers. This allows most third-party content to load while still enabling cross-origin isolation. The tradeoff is that cross-origin requests will not include cookies, which breaks some personalized content.

Use the Cross-Origin-Embedder-Policy-Report-Only header during rollout to identify which resources would be blocked without actually blocking them. This gives you a complete list of resources that need CORS or CORP headers before you switch to enforcement mode. Pair it with a report-to endpoint to collect violation reports from real users across different pages and geographies.