Web resources


Composability is one of the most powerful features of the Web. You can easily load resources from different sources to enhance your Web page, such as font, image, video, etc.

These services are powerful and convenient, but such a strategy also increases the risk of information leakage, and attackers can use certain tactics to expose your user information.


Browsers also do a good job of preventing these attacks. The same-origin policy is already familiar, used to restrict resource access to sites of different sources. The details of the same origin policy that can be stamped on the browser are not covered here.

However, there are some exceptions to the same origin policy. Any website can load the following resources without restriction:

  • Embedded cross-domainiframe
  • The image, the scriptResources such as
  • Use DOM to open cross-domain pop-ups

For these resources, the browser can separate cross-domain resources of each site into different Context groups. Resources in different Context groups cannot access each other.

A browser Context Group is a set 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 opener window and the pop-up window share the same browsing context, and they can access each other through the DOM API, such as window.opener.

Spectre loopholes

These security policies have long protected private data on websites, until the Spectre bug.


Spectre is a vulnerability discovered in the CPU that allows an attacker to read resources in any Context Group in the Unified browser.

Especially when using apis that require interaction with computer hardware:

  • SharedArrayBuffer (required for WebAssembly Threads)
  • performance.measureMemory()
  • JS Self-Profiling API

For a time, browsers disabled high-risk apis such as SharedArrayBuffer.

Cross domain isolation

To be able to use these powerful features, and to keep our website resources more secure, we need to create a cross-domain isolation environment for the browser.


There are many terms to be covered below, so let’s list all the cross-domain related terms to avoid confusion:

  • COEP: Cross Origin Embedder Policy: Embed application policies across sources
  • COOP: Cross Origin Opener Policy: Cross-source open policy
  • CORP: Cross Origin Resource Policy: Cross-source resource policy
  • CORS: Cross Origin Resource Sharing: Cross-source resource sharing
  • CORB: Cross Origin Read Blocking: Cross-source read blocking

We can create isolated environments through COOP and COEP.

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Copy the code

Let’s take a look at what these two Hedaers mean and how to configure them.

COOP: Cross Origin Resource Policy

COOP: indicates a cross-source open Policy. The corresponding HTTP Header is a cross-origin-opener Policy.


By setting COOP to cross-origin-opener -Policy: same-origin, Windows from different sources opened from the site are isolated in different browser Context groups, thus creating an isolated environment for resources.


For example, if a website with COOP opens a new cross-domain pop-up page, its window.opener property will be null.

In addition to same-origin and COOP, there are two other different values:

Cross-Origin-Opener-Policy: same-origin-allow-popups
Copy the code

Top-level pages with same-origin-allow-popups retain references to pop-up Windows that either have no COOP set or opt out of isolation by setting COOP to unsafe-None.

Cross-Origin-Opener-Policy: unsafe-none
Copy the code

Unsafe-none is the default setting, allowing the current page and pop-up page to share Context groups.

CORP, CORS

To enable cross-domain isolation, you also need to first make it clear that all cross-domain resources are explicitly allowed to be loaded. There are two ways to do this, one is CORP and the other is CORS.


CORS(Cross-domain resource sharing) is often used by us to solve cross-domain problems. We are already familiar with this. Let’s look at CORP:

Cross-Origin-Resource-Policy: same-site
Copy the code

Resources marked same-site can only be loaded from the same site.

Cross-Origin-Resource-Policy: same-origin
Copy the code

Resources labeled SAME-Origin can only be loaded from the same source.

Cross-Origin-Resource-Policy: cross-origin
Copy the code

Resources tagged cross-Origin can be loaded by any website.


Note that cross-origin must be set for some common CDN resources, such as image, font, video, etc. Otherwise, resources may fail to be loaded normally.

For cross-domain resources that you have no control over, you can manually add the Crossorigin attribute to the HTML tag.

COEP: Cross Origin Embedder Policy

COOP: Cross-source embedder-policy. The corresponding HTTP Header is cross-origin-embedder-policy.


With cross-origin-embedder-policy enabled: require-corp, you can have your site load only cross-domain resources that are explicitly marked sharable, which is the configuration we just mentioned above, or co-domain resources.


For example, the image Resource above will be prevented from loading if cross-origin-resource-policy is not set.


Before fully enabling COEP, you can check whether the Policy can run properly by using cross-origin-embedder-policy-report-only. Resources that do not conform to the specification will not be banned from loading, but will be reported to your server log.

Tests whether cross-domain isolation is normal

Once your COOP and COEP have been configured, your site should now be in a cross-domain isolation state. You can use self.crossoriginIsolated to determine if the isolation state is normal.

if(self.crossOriginIsolated){
  // Cross-domain isolation succeeded
}
Copy the code

Ok, you can now use haredArrayBuffer, performance. MeasureMemory or JS Self – Profiling API these powerful API ~

reference

  • https://web.dev/why-coop-coep/
  • https://web.dev/coop-coep/

If there are any mistakes in this article, please correct them in the comments section. If this article has helped you, please like it and follow it.

Want to read more quality articles, can follow my Github blog, your star✨, like and follow is my continuous creation power!

I recommend you to follow my wechat public account [Code Secret Garden] and push high-quality articles every day. We can communicate and grow together.