Make your website "cross-origin isolated" using COOP and COEP

Use COOP and COEP to set up an isolated cross-origin environment and enable powerful features such as SharedArrayBuffer, performance.measureMemory ()and the JS self-profiling API.

Apr 13, 2020
Updated September 1, 2020

It appears in:
Safe and secure

Some web APIs increase the risk of side channel attacks like Specter. To mitigate that risk, browsers offer an opt-in-based sandbox called cross-origin sandbox. With an isolated cross-origin status, the web page will be able to use privileged features including:

The isolated cross-origin state also prevents modifications of
document.domain. (Power to alter document.domain allows communication between documents on the same site and has been considered a loophole in the same origin policy).

To opt for an isolated cross-origin state, you must send the following HTTP headers in the main document:

 require-corp
 same-origin

These headers instruct the browser to block the loading of resources or iframes that have not chosen to be loaded by cross-origin documents and prevent cross-origin windows from interacting directly with your document. This also means that resources that are cross-loaded require subscriptions.

You can determine if a web page is in an isolated cross-origin state by examining
self.crossOriginIsolated. (This works in Firefox but has not been implemented in Chrome yet.)

This article shows how to use these new headings. In a follow-up article, I'll provide more background and context.

Implement COOP and COEP to isolate the cross-origin of your website

Integra COOP and COEP

When you enable COOP on a top-level document, windows with the same origin and windows opened from the document will have a separate browse context group unless they are in the same origin with the same COOP settings. Therefore, insulation is applied to open windows.

A navigation context group is a group of tabs, windows, or iframes that share the same context. For example, if a website (https://a.example) opens a pop-up window (https://b.example), the opening window and the pop-up window share the same browsing context and have access to each other via DOM API like
window.opener.

As of Chrome 83, dedicated DevTools support is not yet available for COOP. However, you can examine window.opener === null from the open window, or
openedWindow.closed === true from the opening window to determine if they are in separate browsing context groups.

2. Make sure the resources have CORP or CORS enabled

Make sure all resources on the page are loaded with HTTP CORP or CORS headers. This step is required for step four, which enables COEP.

This is what you should do depending on the nature of the resource:

• If the resource is expected to load only from the same origin, select the Cross-Origin-Resource-Policy: same-origin header.
• If the resource is expected to load only from the same site but of cross origin, select the Cross-Origin-Resource-Policy: same-site header.
• If the resource is loaded from cross origin (s) under your control, select the
  Cross-Origin-Resource-Policy: cross-origin header if possible.
• For cross-origin resources that you have no control over:
  • Use the crossorigin attribute in the payload HTML tag if the resource is served with CORS.
  • Ask the resource owner to support CORS or CORP.
• For iframes, use CORP and COEP headers as follows:
  Cross-Origin-Resource-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp.

Before fully enabling COEP, you can do a test using the
Cross-Origin-Embedder-Policy-Report-Only header to examine if the policy actually works. You will receive reports without blocking the embedded content. Apply this recursively to all documents. For information about the HTTP header for reports only, see Observe problems with the reporting API.

4. Enable COEP

Once you have confirmed that everything works and that all resources can be loaded correctly, apply the Cross-Origin-Embedder-Policy: require-corp HTTP header to all documents, including those that are embedded using iframes.

Determine if isolation was successful with self.crossOriginIsolated

the self.crossOriginIsolated property returns true when the web page is in a cross-origin isolated state and all resources and windows are isolated within the same navigation context group. You can use this API to determine if you have successfully isolated the navigation context group and gained access to powerful features such as performance.measureMemory ().

Debug issues with Chrome DevTools

For resources that are rendered on screen, such as images, it is fairly easy to spot COEP issues because the request will hang and the page will indicate that an image is missing. However, for assets that do not necessarily have a visual impact, such as scripts or styles, COEP issues may go unnoticed. For those, use the DevTools Network panel. If there is a problem with COEP, you should see
(blocked: NotSameOriginAfterDefaultedToSameOriginByCoep) at Condition
column.

You can then click on the entry to see more details.

Observe problems with the reporting API

the Report API it is another mechanism through which you can detect various problems. You can configure the Reporting API to instruct your users' browser to send a report whenever COEP blocks a resource from loading or COOP isolates a pop-up window. Chrome has supported the
Report-To

header since version 69 for a variety of uses, including COEP and COOP.

1. Enable 2 flags in chrome://flags 2. Register an original test

Enable 2 flags in chrome://flags

• Cross-Origin Opening Policy Reports (#cross-origin-opener-policy-reporting)
• Access reports to the cross-origin opening policy (#cross-origin-opener-policy-access-reporting)

Register a proof of origin

Origin testing allows you to test new features and provide feedback on their usability, practicality, and effectiveness to the web standards community. For more information, see the Origin testing guide for web developers. To enroll in this or any other proof of origin, visit the registration page.

1. Request a token by your origin.
2. Add the token to your pages. There are two ways to do it:
   • Add a origin-trial tag to the header of each page. For example, this might look like this:
     
   • If you can configure your server, you can also add the token using a Origin-Trial HTTP header. The resulting response header should look like this:
     Origin-Trial: TOKEN_GOES_HERE

Caution:
To use the COOP reporting API, the token must be served as an HTTP header instead of a label.

To specify where the browser should send reports, add the Report-To HTTP header to any document that is delivered with a COEP or COOP HTTP header. the
Report-To The header also supports some additional parameters to configure the reports. For example:

 {group: 'coep_report', max_age: 86400, endpoints: [{url: 'https://first-party-test.glitch.me/report'}]}, {group: 'coop_report', max_age: 86400, endpoints : [{url: 'https://first-party-test.glitch.me/report'}]}

The parameter object has three properties:

group

the group property names your various reporting endpoints. Use these names to target a subset of your reports. For example, in the
Cross-Origin-Embedder-Policy and Cross-Origin-Opener-Policy directives, you can specify the relevant endpoint by providing the group name to report-to =. For example:

 require-corp; report-to = "coep_report"
 same-origin; report-to = "coop_report"

When the browser encounters this, it will cross-reference the report-to value with group property in the Report-To header to find the end point. This example of cross references coep_report and coop_report to find the end point https://first-party-test.glitch.me/report.

If you'd rather receive reports without blocking any embedded content or isolating a popup, add -Report-Only to the respective headings: i.e. Cross-Origin-Embedder-Policy-Report-Only and
Cross-Origin-Opener-Policy-Report-Only. For example:

 require-corp; report-to = "coep_report"
 same-origin; report-to = "coop_report"

By doing this, when the browser detects cross-origin resources that do not have CORP or CORS, it sends a report using the Reporting API without blocking those resources due to COEP.

Similarly, when the browser opens a cross-origin popup, it sends a report without actually isolating the window due to COOP. It also reports when different navigation context groups try to access each other, but only in "report only" mode.

max_age

the max_age The property specifies the time in seconds after which unsent reports will be deleted. The browser does not send the reports immediately. Instead, it broadcasts them out of band as long as there are no other higher priority tasks. the max_age prevents the browser from sending reports that are too out of date to be useful. For example, max_age: 86400 means that no more than twenty-four hour reports will be sent.

endpoints

the endpoints property specifies the URLs of one or more reporting endpoints. The endpoint must accept CORS if it is hosted on a different source. The browser will send reports with a content type of application / reports + json.

An example of the COEP report payload when a cross-origin resource crashes looks like this:

[ {
 "age" : 25101 ,
 "body" : {
 "blocked-url" : "https://third-party-test.glitch.me/check.svg?" ,
 "blockedURL" : "https://third-party-test.glitch.me/check.svg?" ,
 "destination" : "image" ,
 "disposition" : "enforce" ,
 "type" : "corp"
 } ,
 "type" : "coep" ,
 "url" : "https://first-party-test.glitch.me/?coep=require-corp&coop=same-origin&" ,
 "user_agent" : "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 87.0.4249.0 Safari / 537.36"
 } ]

An example COOP report payload when an isolated popup is opened looks like this:

[ {
 "age" : 7 ,
 "body" : {
 "disposition" : "enforce" ,
 "effectivePolicy" : "same-origin" ,
 "nextResponseURL" : "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&" ,
 "type" : "navigation-from-response"
 } ,
 "type" : "coop" ,
 "url" : "https://first-party-test.glitch.me/coop?coop=same-origin&" ,
 "user_agent" : "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 87.0.4246.0 Safari / 537.36"
 } ]

When different navigation context groups try to access each other (only in "report only" mode), COOP also sends a report. For example, a report when
postMessage () you try it would look like this:

[ {
 "age" : 51785 ,
 "body" : {
 "columnNumber" : 18 ,
 "disposition" : "reporting" ,
 "effectivePolicy" : "same-origin" ,
 "lineNumber" : 83 ,
 "property" : "postMessage" ,
 "sourceFile" : "https://first-party-test.glitch.me/popup.js" ,
 "type" : "access-from-coop-page-to-openee"
 } ,
 "type" : "coop" ,
 "url" : "https://first-party-test.glitch.me/coop?report-only&coop=same-origin&" ,
 "user_agent" : "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 87.0.4246.0 Safari / 537.36"
 } ,
 {
 "age" : 51785 ,
 "body" : {
 "disposition" : "reporting" ,
 "effectivePolicy" : "same-origin" ,
 "property" : "postMessage" ,
 "type" : "access-to-coop-page-from-openee"
 } ,
 "type" : "coop" ,
 "url" : "https://first-party-test.glitch.me/coop?report-only&coop=same-origin&" ,
 "user_agent" : "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 87.0.4246.0 Safari / 537.36"
 } ]

conclusion

Use a combination of HTTP COOP and COEP headers to opt for a web page in a special cross-origin isolated state. You will be able to examine
self.crossOriginIsolated to determine if a web page is in an isolated cross-origin state.

In future versions of Chrome, this cross-origin isolated state will prevent
altering
document.domain

and it will give you access to powerful features like:

We will keep this post updated as new features are made available for this cross-origin isolated state and further enhancements are made to DevTools around COOP and COEP.