Cross-Origin Embedder Policy — COEP Blocking Resources and SharedArrayBuffer
About Cross-Origin Embedder Policy
Fix Cross-Origin-Embedder-Policy (COEP) errors blocking images, scripts, and iframes while enabling SharedArrayBuffer and cross-origin isolation. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: COEP requires all cross-origin resources to explicitly opt-in via CORS or CORP headers. Enabling COEP (require-corp) is required for cross-origin isolation and SharedArrayBuffer access. Resources without proper CORS/CORP headers are blocked, breaking images, scripts, and iframes from third parties. Cross-origin isolation requires both COEP: require-corp and COOP: same-origin headers. SharedArrayBuffer is needed for WebAssembly threads and high-resolution timers. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: Third-party resources (images, ads, analytics scripts) not sending CORS or CORP headers. Enabling COEP without auditing all cross-origin resources loaded by the page. iframe content not setting Cross-Origin-Resource-Policy header. CDN serving resources without Access-Control-Allow-Origin header. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Audit all cross-origin resources on your page using Chrome DevTools Network tab filtered by 'blocked:mixed-content'. For resources you control: add Cross-Origin-Resource-Policy: cross-origin header. For resources you do not control: use crossorigin attribute on img/script tags and verify the server sends CORS headers. Use COEP: credentialless (instead of require-corp) for a less restrictive policy that still enables isolation. Test cross-origin isolation: check self.crossOriginIsolated in the browser console. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our HTTP Status Codes collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
Why do I need cross-origin isolation?
Cross-origin isolation enables SharedArrayBuffer (required for WebAssembly threads) and high-resolution timers. It was restricted after Spectre/Meltdown vulnerabilities to prevent side-channel attacks.
Overview
Fix Cross-Origin-Embedder-Policy (COEP) errors blocking images, scripts, and iframes while enabling SharedArrayBuffer and cross-origin isolation.
Key Details
- COEP requires all cross-origin resources to explicitly opt-in via CORS or CORP headers
- Enabling COEP (require-corp) is required for cross-origin isolation and SharedArrayBuffer access
- Resources without proper CORS/CORP headers are blocked, breaking images, scripts, and iframes from third parties
- Cross-origin isolation requires both COEP: require-corp and COOP: same-origin headers
- SharedArrayBuffer is needed for WebAssembly threads and high-resolution timers
Common Causes
- Third-party resources (images, ads, analytics scripts) not sending CORS or CORP headers
- Enabling COEP without auditing all cross-origin resources loaded by the page
- iframe content not setting Cross-Origin-Resource-Policy header
- CDN serving resources without Access-Control-Allow-Origin header
Steps
- 1Audit all cross-origin resources on your page using Chrome DevTools Network tab filtered by 'blocked:mixed-content'
- 2For resources you control: add Cross-Origin-Resource-Policy: cross-origin header
- 3For resources you do not control: use crossorigin attribute on img/script tags and verify the server sends CORS headers
- 4Use COEP: credentialless (instead of require-corp) for a less restrictive policy that still enables isolation
- 5Test cross-origin isolation: check self.crossOriginIsolated in the browser console