COEP を使用して CORP ヘッダーなしでクロスオリジン リソースを読み込む: 認証情報なし

サードパーティがサービスを提供しているクロスオリジン リソースに、適切な CORP ヘッダーが含まれていないことがよくあります。認証情報なしでリクエストできる場合は、そのようにマークを付けることでクロスオリジン分離を有効にできます。

Eiji Kitamura

新しいクロスオリジン エンベディング ポリシー（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-Policyrequire-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 は、ヘッダーなしでも読み込むことができます。 認証情報が必要です。

この機能は他のブラウザにも導入されますか？

今後の予定

これに関連するその他の課題を軽減するために、今後 2 つの更新が予定されています。 クロスオリジン分離:

以下の理由で SharedArrayBuffer の変更を延長するための Chrome オリジン トライアルに登録した人 いつ停止されるのか疑問に思うかもしれません当初は、 Chrome 96 で終了することが発表されましたが Chrome 106 に延期されます。

リソース

写真撮影: Martin Adams オン スプラッシュを解除