Cross-origin isolation

Cross-origin isolation is a state a page gets when it sends two headers, COOP and COEP. The browser then lets the page use powerful features, such as SharedArrayBuffer.

Concept

Also called crossOriginIsolated

Updated

On this page

How it works

A page is cross-origin isolated when its response has Cross-Origin-Opener-Policy: same-origin. It also needs Cross-Origin-Embedder-Policy set to require-corp or credentialless. The cross-origin-isolated feature of Permissions Policy must not be blocked. Its default allowlist is self.

With COOP same-origin, the page gets its own group of windows. Windows from other origins cannot join it. COEP blocks cross-origin resources that do not agree to load. A resource agrees with CORS or with a Cross-Origin-Resource-Policy header. Under credentialless, the browser loads such resources without cookies.

What it unlocks

  • SharedArrayBuffer. The page can make one and send it with postMessage.
  • performance.now() with better precision.
  • performance.measureUserAgentSpecificMemory().

Iframes on an isolated page must also send COEP. Under require-corp, a cross-origin iframe also needs a Cross-Origin-Resource-Policy header, or the browser blocks it.

Example

HTTP response headers
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Check the result in JavaScript with self.crossOriginIsolated. It is true when the page is isolated.

How to set it

Send both headers on the top page. Each cross-origin iframe on it must agree to load there.

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

Add allow="cross-origin-isolated" only when the framed page needs the isolated features itself.

Learn more

Sources

Know before you embed.

Free, no sign-up, nothing stored. Paste a URL and get a verdict, a live preview, and the fix.