可组合性是Web的一个非常强大的能力，你可以轻松地加载不同来源的资源来增强网页的功能，例如：字体、图片、视频等这些服务非常强大和方便，但这样的策略也会增加信息泄露的风险，攻击者可以通过一定的手段泄露你的用户信息。浏览器在防止这些攻击方面也做得很好。同源策略我们已经很熟悉了，它用来限制不同源站点的资源访问。具体可以戳浏览器的同源策略，这里就不介绍了。但是，同源策略也有一些例外。任何网站都可以不受限制地加载以下资源：跨域iframe图片、脚本等嵌入资源使用DOM打开跨域弹窗不同ContextGroup下分离，不同ContextGroup下的资源不能互相访问.浏览器上下文组是一组共享相同上下文的选项卡、窗口或iframe。例如，如果一个网站（https://a.example）打开一个弹出窗口（https://b.example），打开窗口和弹出窗口共享相同的浏览上下文，它们可以通过DOMAPI相互访问，例如作为窗口.opener。Spectre漏洞这些安全策略长期以来一直在保护网站上的隐私数据，直到Spectre漏洞出现。Spectre是在CPU中发现的漏洞。利用Spectre，攻击者可以在统一浏览器中读取任意ContextGroup下的资源。尤其是在使用一些需要与计算机硬件交互的API时：SharedArrayBuffer(WebAssemblyThreads需要)performance.measureMemory()JSSelf-ProfilingAPI为此，浏览器一度禁用了SharedArrayBuffer等高危API。跨域隔离为了使用这些强大的功能，保证我们的网站资源更加安全，我们需要为浏览器创建一个跨域隔离环境。下面会提到很多专有术语。我们先列出所有跨域相关的术语，以防后面混淆：OriginResourceSharing:CrossOriginResourceSharingCORB:CrossOriginReadBlocking:CrossOriginReadBlocking我们可以通过COOP和COEP创建一个隔离的环境。Cross-Origin-Embedder-Policy:require-corpCross-Origin-Opener-Policy:same-origin我们来看看这两个Hedaer的含义以及如何配置。COOP:Cross-OriginResourcePolicyCOOP:Cross-OriginOpenerPolicy，对应的HTTPHeader为Cross-Origin-Opener-Policy。通过将COOP设置为Cross-Origin-Opener-Policy:same-origin，从该网站打开的不同来源的窗口将隔离在不同的浏览器ContextGroup中，从而为资源创建一个隔离环境。例如，如果具有COOP的网站打开一个新的跨域弹出页面，则其window.opener属性将为null。除了同源之外，COOP还有另外两个不同的值：Cross-Origin-Opener-Policy:same-origin-allow-popups具有same-origin-allow-popups的顶级页面将保留对某些弹出窗口的引用，这些弹出窗口要么没有设置COOP，要么他们通过将COOP设置为unsafe-none来选择退出隔离。Cross-Origin-Opener-Policy:unsafe-noneunsafe-none是默认设置，允许当前页面和弹出页面共享ContextGroup。CORP、CORS要启用跨域隔离，首先需要确保明确允许加载所有跨域资源。有两种方法可以做到这一点，一种是CORP，另一种是CORS。我们在日常生活中解决跨域问题时经常会用到CORS（Cross-OriginResourceSharing）。我们对此已经非常熟悉了。再来看看CORP:Cross-Origin-Resource-Policy:same-site标记同站点的资源只能从同站点加载。Cross-Origin-Resource-Policy:same-origin标记为same-origin的资源只能从同源加载。Cross-Origin-Resource-Policy：标记为cross-origin的跨域资源，任何网站都可以加载。注意，如果是一些普通的CDN资源，比如图片、字体、视频等，一定要设置为cross-origin，否则可能无法正常加载资源。对于自己无法控制的跨域资源，可以手动在html标签中添加crossorigin属性。COEP:CrossOriginEmbedderPolicyCOOP:Cross-OriginEmbedderPolicy，对应的HTTPHeader为Cross-Origin-Embedder-Policy。开启Cross-Origin-Embedder-Policy:require-corp，你可以让你的站点只加载明确标记为可共享的跨域资源，也就是我们刚才提到的配置，或者同域的资源。例如，如果没有设置Cross-Origin-Resource-Policy，上面的图片资源将被阻止加载。在完全启用COEP之前，您可以使用Cross-Origin-Embedder-Policy-Report-Only检查策略是否正常工作。如果有不符合规范的资源，不会禁止加载，但会上报到你的服务器日志中。测试跨域隔离是否正常当你的COOP和COEP配置完成后，你的站点现在应该处于跨域隔离状态，可以通过self.crossOriginIsolated来判断隔离状态是否正常。if(self.crossOriginIsolated){//跨域隔离成功}好了，现在你可以愉快的使用sharedArrayBuffer、performance.measureMemory或者JSSelf-ProfilingAPI等强大的API了~
