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 API de autoperfilado de JS.

Apr 13, 2020
Updated September 1, 2020

It appears in:
Safe and secure

Algunas API Web aumentan el riesgo de ataques de channel lateral como Spectre. Para mitigar ese riesgo, los browsers ofrecen un entorno aislado basado en opt-in llamado aislado de origen cruzado. Con un estado aislado de origen cruzado, la página web podrá utilizar funciones privilegiadas que incluyen:

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).

Para optar por un estado aislado de origen cruzado, debe enviar los siguientes headers HTTP en el documento principal:

 require-corp
same-origin

Estos encabezados le indican al browser que bloquee la carga de recursos o iframes que no hayan optado por ser cargados por documentos de origen cruzado y eviten que las ventanas de origen cruzado interactúen directamente con su documento. Esto también significa que los recursos que se cargan en origen cruzado requieren suscripciones.

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 label HTML de carga si el recurso se sirve con 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 encabezado para examinar si la política realmente funciona. Recibirás informes sin bloquear el contents incrustado. Aplique esto de forma recursiva a todos los documentos. Para obtener información sobre el encabezado HTTP solo para informes, consulte Observar problemas con la API de informes.

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:
     
   • Si puede configurar su server, también puede agregar el token usando un 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 propiedad especifica las URL de uno o más puntos finales de informes. El punto final debe aceptar CORS si está alojado en un origen diferente. El navegador enviará informes con un type of content from 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.