COOP と COEP を使用して、クロスオリジン分離環境をセットアップし、SharedArrayBuffer
、performance.measureUserAgentSpecificMemory()
、精度の高い高解像度タイマーなどの強力な機能を利用できます。
更新
- 2022 年 6 月 21 日: クロスオリジン分離の場合、ワーカー スクリプトにも注意が必要です。 有効になります。いくつかの説明を追加しました。
- 2021 年 8 月 5 日: JS Self-Profiling API が、 クロスオリジン分離が必要ですが、クロスオリジン分離が 方向 削除されます。
- 2021 年 5 月 6 日: フィードバックと報告された問題に基づき、調整することを決定しました。
クロスオリジンで隔離されていないサイトにおける
SharedArrayBuffer
の使用のタイムライン 制限されます。 - 2021 年 4 月 16 日: 新しい COEP の認証情報レス機能について注記を追加しました。 モードとCOOP same-origin-allowpopups を緩和 クロスオリジンの条件 分離します
- 2021 年 3 月 5 日:
SharedArrayBuffer
の制限事項を削除しました。performance.measureUserAgentSpecificMemory()
、デバッグ機能 Chrome 89 ではこの機能が全面的に利用可能になりました今後提供予定の機能performance.now()
とperformance.timeOrigin
: できます。 - 2021 年 2 月 19 日: 機能ポリシーに関する注記を追加しました。
DevTools の
allow="cross-origin-isolated"
とデバッグ機能。 - 2020 年 10 月 15 日:
self.crossOriginIsolated
が Chrome 87 から利用可能になります。 その結果、次の場合、document.domain
は不変です。self.crossOriginIsolated
はtrue
を返します。performance.measureUserAgentSpecificMemory()
はオリジン トライアルを終了しています。 Chrome 89 ではデフォルトで有効になっています。Android Chrome の共有配列バッファは Chrome 88 以降でご利用いただけます。
一部のウェブ API では、Spectre のようなサイドチャネル攻撃のリスクが高まります。宛先 そのリスクを軽減するために、ブラウザにはオプトイン型の隔離環境が用意されています。 分離されていますクロスオリジン分離状態では、ウェブページは 次のような特権機能を使用できる
API | 説明 |
---|---|
SharedArrayBuffer
|
WebAssembly スレッドでは必須です。この機能は Android から利用できます。 Chrome 88。現在、デフォルトで PC 版が有効になっており、 <ph type="x-smartling-placeholder"></ph>のヘルプ サイト分離。ただし、クロスオリジン分離状態が必要になります。 および<ph type="x-smartling-placeholder"></ph> デフォルトで無効になります。 |
performance.measureUserAgentSpecificMemory()
|
Chrome 89 以降で利用できます。 |
<ph type="x-smartling-placeholder"></ph>
performance.now() 、performance.timeOrigin
|
現在、多くのブラウザでご利用いただけますが、解像度は以下に制限されています。 100 マイクロ秒以上。クロスオリジン分離を使用すると 5 マイクロ秒以上です。 |
また、クロスオリジン分離状態により、
document.domain
。(document.domain
を変更できると、通信を許可するときに
の抜け穴と考えられてきましたが、
同一オリジン ポリシーが適用されます)。
クロスオリジン分離状態をオプトインするには、以下を送信する必要があります。 メイン ドキュメントの HTTP ヘッダー:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
これらのヘッダーにより、ブラウザはリソースや iframe の読み込みをブロックします。 クロスオリジン ドキュメントによる読み込みがオプトインされていない ドキュメントを直接操作しないよう設定できます。また、 クロスオリジンで読み込まれるリソースにはオプトインが必要です。
ウェブページがクロスオリジン分離状態にあるかどうかは、次の方法で判断できます。
調査
self.crossOriginIsolated
。
この記事では、これらの新しいヘッダーの使用方法について説明します。フォローアップで 記事の背景と背景情報をお伝えします。
で確認できます。COOP と COEP をデプロイして、ウェブサイトのクロスオリジン分離を行う
COOP と COEP を統合する
1. 最上位のドキュメントに Cross-Origin-Opener-Policy: same-origin
ヘッダーを設定する
最上位のドキュメントで COOP: same-origin
を有効にすると、同じ
オリジン、ドキュメントから開かれたウィンドウに、それぞれ異なるブラウジング
コンテキスト グループのみです。
したがって、開いているウィンドウとウィンドウ間の相互通信には分離が強制的に適用されます。
両方のウィンドウが無効になります。
ブラウジング コンテキスト グループは、互いに参照できる一連のウィンドウです。対象
たとえば、<iframe>
を介して埋め込まれた最上位ドキュメントとその子ドキュメントなどです。
ウェブサイト(https://a.example
)でポップアップ ウィンドウ(https://b.example
)が開く場合、
オープナー ウィンドウとポップアップ ウィンドウでは同じブラウジング コンテキストが使用されるため、
window.opener
などの DOM API を介して互いにアクセスできます。
ウィンドウの開始元と閲覧先が別々のブラウジングになっているかどうかを確認できます DevTools のコンテキスト グループ。
2. リソースで CORP または CORS が有効になっていることを確認してください
ページ上のすべてのリソースが CORP または CORS HTTP で読み込まれていることを確認する 使用します。この手順は、ステップ 4(COEP を有効にする)で必要です。
リソースの性質に応じて、次のことを行う必要があります。
- リソースが同じ生成元からのみ読み込まれるようにする場合は、次のように設定します。
Cross-Origin-Resource-Policy: same-origin
ヘッダー。 - リソースが同じサイトからのみ読み込まれるが、
origin には、
Cross-Origin-Resource-Policy: same-site
ヘッダーを設定します。 - リソースが自分の管理下にあるクロスオリジンから読み込まれる場合は、
可能であれば
Cross-Origin-Resource-Policy: cross-origin
ヘッダーを使用します。 - お客様が制御できないクロスオリジン リソースの場合:
<ph type="x-smartling-placeholder">
- </ph>
- リソースが次の場合は、読み込み中の HTML タグで
crossorigin
属性を使用します。 いくつかあります。(例:<img src="***" crossorigin>
。) - リソースのオーナーに、CORS または CORP をサポートするよう依頼してください。
- リソースが次の場合は、読み込み中の HTML タグで
- iframe の場合は、上記と同じ原則に従い、
Cross-Origin-Resource-Policy: cross-origin
(またはsame-site
、same-origin
) あります)。 WebWorker
で読み込まれたスクリプトは、同一オリジンから提供する必要があります。 CORP や CORS ヘッダーは不要ですCOEP: require-corp
で配信されるドキュメントまたはワーカーの場合、クロスオリジン CORS なしで読み込まれるサブリソースには、埋め込みを有効にするようCross-Origin-Resource-Policy: cross-origin
ヘッダーを設定する必要があります。たとえば<script>
、importScripts
、<link>
、<video>
、<iframe>
など
3. COEP のレポート専用 HTTP ヘッダーを使用して埋め込みリソースを評価する
COEP を完全に有効にする前に、
Cross-Origin-Embedder-Policy-Report-Only
ヘッダーを使用して、ポリシーが
確認します埋め込みコンテンツをブロックせずにレポートを受け取ることができます。
最上位ドキュメントを含むすべてのドキュメントに再帰的に適用します。 使用できますレポート専用 HTTP ヘッダーの詳細については、以下をご覧ください。 レポートを使用して問題を監視する API。
4. COEP を有効にする
すべてが問題なく動作し、すべてのリソースを
正常に読み込まれました。Cross-Origin-Embedder-Policy-Report-Only
を切り替えます
すべてのヘッダーで同じ値を持つ Cross-Origin-Embedder-Policy
ヘッダーを
ドキュメント(iframe やワーカー スクリプトによって埋め込まれているドキュメントも含む)
self.crossOriginIsolated
で分離が成功したかどうかを判断する
self.crossOriginIsolated
プロパティは、ウェブページが URL 内にある場合、true
を返します。
クロスオリジン分離状態を維持し、すべてのリソースとウィンドウが
同じブラウジング コンテキスト グループにフィルタを適用できます。この API を使用すると、
ブラウザ コンテキスト グループを分離し、
performance.measureUserAgentSpecificMemory()
などのパワフルな機能。
Chrome DevTools を使用して問題をデバッグする
画像など、画面に表示されるリソースについては、
リクエストがブロックされ、ページが
表示されます。ただし、サービス アカウントを
スクリプトやスタイルなどの視覚的な影響が大きい場合、COEP の問題が
見過ごされてしまいます。その場合は、DevTools の [Network] パネルを使用します。条件
COEP に問題がある場合、
Status の (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)
選択します。
![[ネットワーク] パネルの [ステータス] 列に表示される COEP の問題。](https://web.developers.google.cn/static/articles/coop-coep/image/coep-issues-the-status-c-9f8040461053.jpg?authuser=2&hl=ja)
エントリをクリックすると、詳細が表示されます。
![[Network] パネルでネットワーク リソースをクリックすると、[Headers] タブに COEP の問題の詳細が表示されます。](https://web.developers.google.cn/static/articles/coop-coep/image/details-the-coep-issue-a-7483b46211d45.jpg?authuser=2&hl=ja)
また、 [Application] パネル。[フレーム] に移動します。セクションに移動し 「上部」を開くリソース構造の内訳を確認できます。
<ph type="x-smartling-placeholder"></ph>
SharedArrayBuffer
の可用性など、iframe のステータスを確認できます。
その他
![Chrome DevTools iframe インスペクタ](https://web.developers.google.cn/static/articles/coop-coep/image/chrome-devtools-iframe-in-7b22ff613fbeb.png?authuser=2&hl=ja)
<ph type="x-smartling-placeholder"></ph> クロスオリジンかどうかなど、ポップアップ ウィンドウのステータスを確認することもできます。 できます。
![Chrome DevTools のポップアップ ウィンドウ インスペクタ](https://web.developers.google.cn/static/articles/coop-coep/image/chrome-devtools-popup-win-191023386b4a8.png?authuser=2&hl=ja)
Reporting API を使用して問題を監視する
Reporting API というメカニズムを使用して、 検出するためです。Reporting API を設定すると、 ユーザーCOEP がリソースの読み込みをブロックするたびにブラウザがレポートを送信できる ポップアップウィンドウを隔離しますChrome では、Reporting API をサポートしてきました。 バージョン 69 にアップグレードする必要があります。
Reporting API を設定する方法と、受信するサーバーを設定する方法 詳しくは、レポート API。
COEP レポートの例
COEP の例 報告 次のようなペイロードが返されます。
[{
"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://cross-origin-isolation.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"
}]
COOP レポートの例
COOP の例 report ペイロード ポップアップ ウィンドウを隔離して開くと、次のようになります。
[{
"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://cross-origin-isolation.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"
}]
異なるブラウジング コンテキスト グループが互いにアクセスしようとした場合(
「レポート専用」モードの場合、COOP はレポートも送信します。たとえば
postMessage()
が試行された場合は次のようになります。
[{
"age": 51785,
"body": {
"columnNumber": 18,
"disposition": "reporting",
"effectivePolicy": "same-origin",
"lineNumber": 83,
"property": "postMessage",
"sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
"type": "access-from-coop-page-to-openee"
},
"type": "coop",
"url": "https://cross-origin-isolation.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://cross-origin-isolation.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"
}]
まとめ
COOP と COEP の HTTP ヘッダーを組み合わせて使用し、ウェブページを特別な HTTP ヘッダーに
クロスオリジン分離状態を維持します。このコースでは
self.crossOriginIsolated
: ウェブページがクロスオリジンかどうかを判別します。
分離された状態にします。
新機能がリリースされ次第、この投稿をお知らせします。 クロスオリジン分離状態をサポートし、DevTools にさらなる改善が加えられます。 COEP や COEP の周辺地域の情報です