Web resources
Composability is a very powerful capability of the Web. You can easily load resources from different sources to enhance the functions of web pages, such as: font、image、videoetc.
These services are very powerful and convenient, but such a strategy will also increase the risk of information leakage. Attackers can use certain means to leak your user information.
Browsers are also very good at preventing these attacks. We are already familiar with the same-origin policy, which is used to restrict resource access to sites from different sources. You can poke the browser's same-origin policy in detail, and I won't introduce too much here.
However, there are some exceptions to the same-origin policy. Any website can load the following resources without restriction:
Embed cross-domain
iframeimage、scriptOther resourcesUse DOM to open cross-domain pop-up windows
For these resources, the browser can be cross-domain resource sites each separated on different Context Groupunder different Context Groupunder resources can not visit each other.
Browser Context Groupis a group share the same context tab, window or iframe. For example, if the site ( https://a.example) to open the pop-up window ( https://b.example), open the windows and pop-up windows share the same browsing context, and they can DOM APIvisit each other, for example window.opener.
Spectre vulnerability
For a long time, these security strategy has been to protect the privacy of data the site until the Spectreloopholes.
SpectreIt is one of the CPUdiscovered vulnerabilities, exploit Spectre, an attacker can read under the unified browser any Context Groupresources under.
In particular, the need to use some computer hardware and interact APIwhen:
SharedArrayBuffer (required for WebAssembly Threads)performance.measureMemory()JS Self-Profiling API
For this reason, the browser was disabled in SharedArrayBufferhigh-risk API.
Cross-domain isolation
In order to be able to use these powerful functions, and to ensure that our website resources are more secure, we need to create a cross-domain isolation environment for the browser.
A lot of proprietary terms will be mentioned below. Let’s first list all cross-domain related terms to prevent confusion later:
COEP: Cross Origin Embedder Policy: Cross-source embedded program strategyCOOP: Cross Origin Opener Policy: Cross-source opener policyCORP: Cross Origin Resource Policy: Cross-origin resource strategyCORS: Cross Origin Resource Sharing: Cross-origin resource sharingCORB: Cross Origin Read Blocking: Cross-origin read blocking
We can COOP、COEPcreate an isolated environment.
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Here we look at these two Hedaermeanings, and how to configure it.
COOP：Cross Origin Resource Policy
COOP: Cross-person open source policy, corresponding HTTP HeaderShi Cross-Origin-Opener-Policy.
By COOPsetting Cross-Origin-Opener-Policy: same-origin, will be isolated from other sources of different windows open the site in different browsers Context Group, isolated environmental resources so created.
For example, if with COOPthe site to open a new page pops up cross-domain, its window.openerproperty will be null.
In addition to same-origin, COOPthere are two other different values:
Cross-Origin-Opener-Policy: same-origin-allow-popups
With same-origin-allow-popupsthe top of the page pop-up window will retain some reference to these pop-ups are either not provided COOP, or by COOPsetting unsafe-noneout to choose isolation.
Cross-Origin-Opener-Policy: unsafe-none
unsafe-noneIt is the default setting, allowing sharing of the current page and pop-up page Context Group.
CORP 、 CORS
To enable cross-domain isolation, you also need to make sure that all cross-domain resources are explicitly allowed to load. There are two ways to achieve this, one is CORP, the other is CORS.
CORS(Cross-domain resource sharing) We often use it when we solve cross-domain problems daily. We are already very familiar with this, let's take a look CORP:
Cross-Origin-Resource-Policy: same-site
Mark same-siteof resources can only be loaded from the same site.
Cross-Origin-Resource-Policy: same-origin
Mark same-originof resources can only be loaded from the same source.
Cross-Origin-Resource-Policy: cross-origin
Marking cross-originthe resource can be loaded from any website.
Note that if some common CDNresources, for example image、font、video, and so on, must be set cross-origin, otherwise it could lead to resources can not be properly loaded.
For cross-domain resource you can not control, you can manually add in html tag
crossoriginattributes.
COEP：Cross Origin Embedder Policy
COOP: Cross-source embedded program policies, corresponding HTTP HeaderShi Cross-Origin-Embedder -Policy.
Enable Cross-Origin-Embedder-Policy: require-corp, you can make your site load only cross-domain resources that are clearly marked as sharable, which is the configuration we just mentioned above, or same-domain resources.
For example, the above picture if no resources Cross-Origin-Resource-Policywill be blocked loaded.
In the fully enabled COEPbefore, you can use Cross-Origin-Embedder-Policy-Report-Onlywhether to run properly checking policy. If there are non-compliant resources, they will not be prohibited from loading, but will be reported to your server log.
Test whether cross-domain isolation is normal
When you COOP、COEPafter all configuration is complete, your site should now be in a cross-domain isolation, you can use self.crossOriginIsolatedto determine whether the isolated state is normal.
if(self.crossOriginIsolated){
// 跨域隔离成功
}
Well, you can now enjoyable to use haredArrayBuffer, performance.measureMemoryor JS Self-Profiling APIthe powerful API of ~
reference
https://web.dev/why-coop-coep/
https://web.dev/coop-coep/
Like, watch, forward to support the author❤️