サードパーティがサービスを提供しているクロスオリジン リソースに、適切な CORP ヘッダーが含まれていないことがよくあります。認証情報なしでリクエストできる場合は、そのようにマークを付けることでクロスオリジン分離を有効にできます。
新しいクロスオリジン エンベディング ポリシー(COEP)値がリリースされました
credentialless
: ブラウザがクロスオリジン リソースを読み込むことを許可します。
クロスオリジン リソース ポリシー(CORP)を使用せずに、
認証情報(Cookie など)を収集します。これによりデベロッパーは
分離が容易になります
クロスオリジン分離が必要な理由
一部のウェブ API は、次のようなサイドチャネル攻撃のリスクを高めます。
Spectre。宛先
そのリスクを軽減するために、ブラウザにはオプトイン型の隔離環境が用意されています。
クロスオリジン分離。クロスオリジン
隔離された状態に維持すると、ウェブページは特権を
SharedArrayBuffer
performance.measureUserAgentSpecificMemory()
分解能の高い高精度タイマー
他のプロバイダがオプトインしていない限り、オリジンを分離できます。
クロスオリジン分離を有効にするには、ウェブページで次の 2 つの HTTP ヘッダーを送信する必要があります。
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
クロスオリジン分離状態では、すべてのクロスオリジン リソースを提供する必要がある
Cross-Origin-Resource-Policy
ヘッダーを設定して読み込みます。
クロスオリジン分離を有効にする際の課題
一方、クロスオリジン分離はウェブページのセキュリティを向上させ、 強力な機能の有効化、デプロイは 難しい。Google の すべてのクロスオリジンで CORS または CORP を有効にすることが 説明します。これらのヘッダーのないリソースは、 クロスオリジン分離ページを作成します
これらのクロスオリジン リソースは通常、サードパーティによってサービスを受け、 必要なヘッダーを追加するのは簡単ではありません。
しかし、そのリソースを読み込めるほど安全であることがわかっている場合はどうでしょうか。実際、 リスクにさらされているリソースとは、認証情報を使用してリクエストされたリソースのことです。 読み込めない機密情報が含まれている可能性があります。 あります。つまり、認証情報なしでリクエストできるリソースは一般公開される 安全に読み込むことができます
credentialless
が救助活動中
このような場合に役立つのが COEP: credentialless
です。credentialless
は新しい値です
を使用します。Cross-Origin-Embedder-Policy
require-corp
と同様に、
クロスオリジン分離を有効にする。ただし、CORP:cross-origin
ヘッダーなしに送信されるため、代わりにクロスオリジン リクエストの
できます。
別の方法として、クロスオリジン分離を有効にすることもできます。 次の 2 つのヘッダーで構成されます。
Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Opener-Policy: same-origin
つまり、リクエストされたクロスオリジン サーバーは、 要求元は、常にそのレスポンスだけが意図したものであると 公開情報が含まれています。
これはブラウザのサードパーティ Cookie の段階的廃止を計画しています。
デモ
このデモでは、さまざまなヘッダー オプションを試すことができます。 https://cross-origin-isolation.glitch.me
よくある質問
credentialless
環境で認定リクエストを送信できますか?
その代わり、リクエストのモードを変更して CORS チェックを要求します。
表示されます。<audio>
、<img>
、<link>
、<script>
などの HTML タグの場合、
<video>
の場合は、明示的に crossorigin="use-credentials"
を付加して、
認証情報付きのリクエストを送信します。
たとえば、https://www.example.com
上のドキュメントに
Cross-Origin-Embedder-Policy: credentialless
ヘッダー、<img
src="https://images.example.com/avatar.png" crossorigin="use-credentials">
は
リクエストを送信できます。
fetch()
API の場合は、request.mode = 'cors'
を使用できます。
COEP: credentialless
を指定した場合、COEP: require-corp
は私のウェブサイトでどのように役立ちますか?
COEP: require-corp
では、リクエスト モードを手動で切り替える必要はありません
クロスオリジン サブリソースに Cookie が必要な場合は CORS。
credentialless
環境で、特別なヘッダーのないクロスオリジンの iframe も読み込めますか?
いいえ。credentialless
環境でクロスオリジンの iframe を読み込む場合は、require-corp
と同じ条件が必要です。iframe ドキュメントは、次の 2 つのヘッダーを使用して配信する必要があります。
Cross-Origin-Embedder-Policy: credentialless
(またはrequire-corp
)Cross-Origin-Resource-Policy: cross-origin
幸い、iframe に crossorigin="anonymous"
を指定することで、これらのヘッダーなしでクロスオリジンの iframe を読み込むことを許可することについては、現在検討中です。
これにより、クロスオリジンの iframe は、ヘッダーなしでも読み込むことができます。
認証情報が必要です。
この機能は他のブラウザにも導入されますか?
- Firefox でのトラッキングに関する問題
- Webkit に関する位置リクエスト: シグナルなし
- W3C TAG の位置リクエスト: 保留中
今後の予定
これに関連するその他の課題を軽減するために、今後 2 つの更新が予定されています。 クロスオリジン分離:
以下の理由で SharedArrayBuffer の変更を延長するための Chrome オリジン トライアルに登録した人 いつ停止されるのか疑問に思うかもしれません当初は、 Chrome 96 で終了することが発表されましたが Chrome 106 に延期されます。
リソース
- ウェブサイトを「クロスオリジン分離」する(COOP と COEP を使用)
- 「クロスオリジン分離」が必要な理由パワフルな機能のために
- クロスオリジン分離を有効にするためのガイド
- SharedArrayBuffer の更新(Android Chrome 88 とパソコン版 Chrome 92)
写真撮影: Martin Adams オン スプラッシュを解除