Use COOP and COEP to set up a cross-origin isolated environment and enable
powerful features like SharedArrayBuffer,
performance.measureUserAgentSpecificMemory() and high resolution timer with
better precision.
Published: April 13, 2020, Last updated: June 21, 2022
This document shows how to use these COOP and COEP. You can read more about why this matters in Make your website "cross-origin isolated" using COOP and COEP.
Some web APIs increase the risk of side-channel attacks like Spectre. To mitigate that risk, browsers offer an opt-in-based isolated environment called cross-origin isolated. With a cross-origin isolated state, the webpage will be able to use privileged features including:
| API | Description |
|---|---|
SharedArrayBuffer
|
Required for WebAssembly threads. This is available from Android Chrome 88. Desktop version is enabled by default with the help of Site Isolation, but will require the cross-origin isolated state and will be disabled by default in Chrome 92. |
performance.measureUserAgentSpecificMemory()
|
Available from Chrome 89. |
performance.now(), performance.timeOrigin
|
Available in many browsers, with resolution limited to 100 microseconds or higher. With cross-origin isolation, the resolution can be 5 microseconds or higher. |
The cross-origin isolated state also prevents modifications of
document.domain. (Being able to alter document.domain allows communication
between same-site documents and has been considered a loophole in the
same-origin policy.)
To opt in to a cross-origin isolated state, you need to send the following HTTP headers on the main document:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
These headers instruct the browser to block loading of resources or iframes which haven't opted into being loaded by cross-origin documents, and prevent cross-origin windows from directly interacting with your document. This also means those resources being loaded cross-origin require opt-ins.
You can determine whether a web page is in a cross-origin isolated state by
examining
self.crossOriginIsolated.
Glossary
This document uses many similarly named and abbreviated terminology. To clarify, we've curated a mini glossary:
- COEP: Cross Origin Embedder Policy
- COOP: Cross Origin Opener Policy
- CORP: Cross Origin Resource Policy
- CORS: Cross Origin Resource Sharing
- CORB: Cross Origin Read Blocking
Make your website cross-origin isolated
1. Set Cross-Origin-Opener-Policy: same-origin on the top-level document
By enabling