High Security Header

Cross-Origin-Embedder-Policy

Learn how COEP prevents cross-origin data leakage and enables advanced web features.

SiteSecurityScore Team·9 min read·Updated Feb 20, 2026

Cross-Origin-Embedder-Policy (COEP) is a security header that prevents your website from loading cross-origin resources that don't explicitly grant permission. This policy is essential for enabling advanced web features like SharedArrayBuffer while maintaining strong security boundaries.

What is Cross-Origin-Embedder-Policy?#

Cybersecurity concept representing cross-origin isolation

Cross-Origin-Embedder-Policy (COEP) is a security header that prevents your page from loading resources from other websites unless those websites explicitly allow it. Before diving in, it helps to understand what 'cross-origin' means. Two URLs are considered 'same-origin' if they share the same protocol (http or https), domain name, and port number. For example, https://example.com and https://example.com/page are same-origin, but https://example.com and https://api.example.com are cross-origin because the domain differs. COEP ensures that when your page loads images, scripts, or other files from a different origin, the owner of those files has granted explicit permission.

COEP blocks resources from other websites that have not opted in to being shared
Combined with COOP, it enables full cross-origin isolation in the browser
Cross-origin isolation is required for advanced features like SharedArrayBuffer
The header helps prevent Spectre-style side-channel attacks on data from other sites

Why Cross-Origin Isolation?

After the Spectre vulnerability was discovered in 2018, browsers restricted access to high-resolution timers and SharedArrayBuffer because they could be used for side-channel attacks. COEP and COOP together restore access to these features by ensuring your page cannot accidentally load resources from other origins.

COEP Values Explained#

COEP offers two main values, each providing a different level of strictness for cross-origin resource loading.

require-corp: The strictest option. All cross-origin resources must include a CORP header or CORS headers that allow your origin. Resources without these headers are blocked.
credentialless: A more relaxed option. Cross-origin requests are sent without credentials (cookies, client certificates). The resource does not need CORP headers, but you lose access to authenticated resources.
unsafe-none: The default. No restrictions on cross-origin resource loading. Cross-origin isolation is not enabled.

credentialless vs require-corp

Use credentialless when you need cross-origin isolation but cannot control third-party resource headers (like images from CDNs). Use require-corp when you need maximum security and can ensure all resources include proper CORS or CORP headers.

Enabling Cross-Origin Isolation#

To achieve full cross-origin isolation, you need both COEP and COOP headers working together. You can verify isolation is active by checking self.crossOriginIsolated in JavaScript, which returns true when both headers are properly configured.

Configuration

# Both headers required for cross-origin isolation
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

# Verify in JavaScript
if (self.crossOriginIsolated) {
  // SharedArrayBuffer and high-resolution timers available
  const buffer = new SharedArrayBuffer(1024);
} else {
  console.log('Not cross-origin isolated');
}

web.dev: Cross-origin isolation guide

Implementation Guide#

Deploy COEP carefully, as it can break third-party resources that do not include CORS or CORP headers. Start by auditing your page's cross-origin resources to understand what will be affected.

Before Deploying

Enabling require-corp will break images, scripts, and other resources loaded from origins that do not set CORS or CORP headers. Audit all cross-origin resources first. Use credentialless as a less disruptive alternative if you cannot control third-party headers.

Configuration

# Apache
Header always set Cross-Origin-Embedder-Policy "require-corp"

# Nginx
add_header Cross-Origin-Embedder-Policy "require-corp" always;

# Node.js / Express
app.use((req, res, next) => {
  res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
  next();
});

# For third-party images that lack CORP, use crossorigin attribute:
# <img src="https://cdn.example.com/image.jpg" crossorigin>

Best Practices#

Follow these guidelines for a successful COEP deployment that enables cross-origin isolation without breaking your site.

Audit all cross-origin resources on your pages before enabling COEP
Use the browser console to identify which resources are blocked by COEP
Add crossorigin attributes to img, script, and link tags for cross-origin resources
Consider credentialless first if you load many third-party resources
Deploy COEP alongside COOP for full cross-origin isolation benefits
Test thoroughly in staging before enabling in production

MDN: Cross-Origin-Embedder-Policy

Implementation Examples#

Require Cross-Origin Isolation

Cross-Origin-Embedder-Policy: require-corp

Requires all cross-origin resources to explicitly grant permission

Explanation: This is the most secure option. All cross-origin resources must include the Cross-Origin-Resource-Policy header with a value that allows your site.

Credentialless Mode

Cross-Origin-Embedder-Policy: credentialless

Loads cross-origin resources without credentials

Explanation: This mode loads cross-origin resources without sending credentials, providing some isolation while being less restrictive than require-corp.