Web 资源
可组合性是 Web 的非常强大的一项能力，你可以轻而易举的加载来自不同来源的资源来增强网页的功能，例如：font、image、video 等等。
这些服务非常强大，也很方便，但是这样的策略同样会加大信息泄漏的风险，攻击者可以利用某些手段泄漏你的用户信息。
浏览器在阻止这些攻击上做的也很好。同源策略我们已经很熟悉了，它用于限制不同源的站点的资源访问。详细可以戳浏览器的同源策略，这里不再过多介绍。
但是同源策略也有一些例外，任何网站都可以不受限制的加载下面的资源：
嵌入跨域
iframeimage、script等资源使用 DOM 打开跨域弹出窗口
对于这些资源，浏览器可以将各个站点的跨域资源分隔在不同的 Context Group 下，不同的 Context Group 下资源无法相互访问。
浏览器 Context Group 是一组共享相同上下文的 tab、window或iframe。例如，如果网站（https://a.example）打开弹出窗口（https://b.example），则打开器窗口和弹出窗口共享相同的浏览上下文，并且它们可以通过 DOM API相互访问，例如 window.opener。
Spectre 漏洞
长久以来，这些安全策略一直保护着网站的隐私数据，直到 Spectre 漏洞出现。
Spectre 是一个在 CPU 中被发现的漏洞，利用 Spectre ，攻击者可以读取到在统一浏览器下任意 Context Group 下的资源。
特别是在使用一些需要和计算机硬件进行交互的 API 时：
SharedArrayBuffer (required for WebAssembly Threads)performance.measureMemory()JS Self-Profiling API
为此，浏览器一度禁用了 SharedArrayBuffer 等高风险的 API。
跨域隔离
为了能够使用这些强大的功能，并且保证我们的网站资源更加安全，我们需要为浏览器创建一个跨域隔离环境。
以下では、多くの専有用語について説明します。まず、混乱を避けるために、クロスドメイン関連の用語をすべてリストします。
COEP: Cross Origin Embedder Policy：クロスソース組み込みプログラム戦略COOP: Cross Origin Opener Policy：クロスソースオープナーポリシーCORP: Cross Origin Resource Policy：クロスオリジンリソース戦略CORS: Cross Origin Resource Sharing：クロスオリジンリソースシェアリングCORB: Cross Origin Read Blocking：クロスオリジン読み取りブロッキング
COOP、COEP隔離された環境を作成できます。
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
ここでは、これらの2つのHedaer意味と、その構成方法について説明します。
COOP：クロスオリジンリソースポリシー
COOP：クロス者のオープンソースポリシー、対応するHTTP Header市をCross-Origin-Opener-Policy。
COOP設定Cross-Origin-Opener-Policy: same-originすることにより、異なるウィンドウの他のソースから分離され、異なるブラウザーContext Groupでサイトを開き、分離された環境リソースを作成します。
たとえばCOOP、新しいページを開くサイトでクロスドメインがポップアップする場合、そのwindow.openerプロパティはになりますnull。
に加えてsame-origin、COOP2つの異なる値があります。
Cross-Origin-Opener-Policy: same-origin-allow-popups
ではsame-origin-allow-popupsこれらのポップアップにはいくつかの参照を保持するページポップアップウィンドウの上部のいずれかに提供されていないCOOP、またはによってCOOP設定unsafe-noneアイソレーションを選択するアウト。
Cross-Origin-Opener-Policy: unsafe-none
unsafe-noneこれはデフォルト設定で、現在のページとポップアップページを共有できますContext Group。
CORP、CORS
クロスドメイン分離を有効にするには、すべてのクロスドメインリソースが明示的にロードを許可されていることを確認する必要もあります。これを実現するには2つの方法があります。1つはCORP、もう1つはですCORS。
CORS（クロスドメインのリソース共有）私たちは、クロスドメインの問題を毎日解決するときによく使用します。これについてはすでによく知っているので、見てみましょうCORP。
Cross-Origin-Resource-Policy: same-site
same-siteリソースのマークは、同じサイトからのみロードできます。
Cross-Origin-Resource-Policy: same-origin
same-originリソースのマークは、同じソースからのみロードできます。
Cross-Origin-Resource-Policy: cross-origin
cross-originリソースのマーキングは、どのWebサイトからでもロードできます。
のようないくつかの一般的なCDNリソースなどをimage、font、video設定する必要があるcross-origin場合は、リソースを適切にロードできない可能性があることに注意してください。
制御できないクロスドメインリソースの場合は、htmlタグ
crossorigin属性を手動で追加できます。
COEP：Cross Origin Embedder Policy
COOP：クロスソース組み込みプログラムポリシー、対応するHTTP HeaderShi 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){
// 跨域隔离成功
}
さて、これでharedArrayBuffer、performance.measureMemoryまたはJS Self-Profiling API〜の強力なAPI を使用して楽しむことができます
参照
https://web.dev/why-coop-coep/
https://web.dev/coop-coep/
いいですね、見て、作者をサポートするために転送してください❤️