Cross Origin なんちゃらの備忘

なんだかいろいろな Cross Origin 〜があるので備忘録としてまとめました

基本は https://developer.mozilla.org から独断と偏見でかいつまんで持ってきています
間違いがあったらすみません
（日本語訳は DeepL 翻訳を修正しています）

COEP: Cross Origin Embedder Policy

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy

このレスポンスヘッダーは、ドキュメントに明示的に許可を与えていないクロスオリジンのリソースを、ドキュメントが読み込むことを防ぎます。

• Cross-Origin-Embedder-Policy: unsafe-none
  デフォルト値です。この値を使用すると、CORSプロトコルやCross-Origin-Resource-Policyヘッダーで明示的に許可しなくても、クロスオリジンのリソースを取得することができます。
• Cross-Origin-Embedder-Policy: require-corp
  クロスオリジンのリソースを取得するには、CORSプロトコルまたはCross-Origin-Resource-Policyヘッダーによるサーバーの明示的な許可が必要になります。

require-corp を使用して COEP を有効にし、クロスオリジンのリソースを読み込む必要がある場合は、CORS をサポートする必要があり、COEP によるブロックを回避するために、リソースを別のオリジンから読み込み可能であると明示的にマークする必要があります。たとえば、サードパーティのサイトからのこの画像にcrossorigin属性を使用することができます。
<img src="https://thirdparty.com/img.png" crossorigin>

COOP: Cross Origin Opener Policy

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy

このレスポンスヘッダーを使用すると、トップレベルのドキュメントがクロスオリジンのドキュメントとブラウジングコンテキストグループを共有しないようにすることができます。

Opener と Openee の COOP ポリシーによって window.opener が取得できるかどうかが変わってきます。
以下 3 つの値があります。

• Cross-Origin-Opener-Policy: unsafe-none
  デフォルト値です
• Cross-Origin-Opener-Policy: same-origin-allow-popups
• Cross-Origin-Opener-Policy: same-origin

こちらの表を見ていただいたほうがわかりやすいので値の詳細は省きます。

CORP: Cross Origin Resource Policy

日本語ドキュメントあり
https://developer.mozilla.org/ja/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cross-Origin-Resource-Policy

ブラウザには Same-origin policy が存在します。
CORP は既定で Same-origin policy を超えた保護の追加レイヤーです。CORP は、既定でクロスオリジンの読み込みを保護するメカニズムである、 クロスオリジンリソースブロッキング (CORB)を補完します。

ウェブアプリケーションはこの HTTP レスポンスヘッダーを渡すことによって、ブラウザーが指定されたリソースへの no-cors のクロスオリジン/クロスサイトのリクエストをブロックするという要望を伝えます。

• Cross-Origin-Resource-Policy: same-site
  同じ Site からのリクエストのみリソースを読み込めます。
• Cross-Origin-Resource-Policy: same-origin
  同じ origin (すなわち、スキーマ + ホスト + ポート) からのリクエストのみリソースを読み込めます。
• Cross-Origin-Resource-Policy: cross-origin
  いかなる origin からのリクエストでもリソースを読み込めます

CORS: Cross Origin Resource Sharing

日本語ドキュメントあり
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

単純リクエストとプリフライトリクエストの例は上記に記載されているので、詳細はそちらをご参照ください。

単純リクエストの場合

（おそらく前述した no-cors リクエストと同じ）
クライアント（FetchAPI など）が発行するリクエストの Origin ヘッダーと、リクエスト受取先であるウェブアプリケーションが返すレスポンスの Access-Control-Allow-Origin により、そのリソースの読み取りが許可されるかどうかが決まります。

• Origin
  呼び出しがどこから来たかを表すリクエストヘッダー。
• Access-Control-Allow-Origin
  リソースへのアクセスを許可するオリジンをブラウザーに伝えるレスポンスヘッダー。

プリフライトリクエストの場合

ブラウザがプリフライトリクエストが必要なリクエストと判断した場合、以下のヘッダーを持つプリフライトリクエストが送信されます。

Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

• Access-Control-Request-Method
  実際のリクエストで使用するリクエストメソッドをサーバーに通知するヘッダー。
• Access-Control-Request-Headers
  実際のリクエストで使用するリクエストヘッダー（カスタムヘッダー含む）をサーバーに通知します。

上記のプリフライトリクエストに対しサーバは以下のレスポンスヘッダを返します。

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

• Access-Control-Allow-Methods
  当該リソースへの問い合わせで実行可能なリクエストメソッドを伝えます。
• Access-Control-Allow-Headers
  プリフライトリクエストで送信された Access-Control-Request-Headers のリクエストヘッダーが実際のリクエストで使用されるヘッダーであることを承認しています。
• Access-Control-Max-Age
  プリフライトリクエストを再び送らなくてもいいように、プリフライトのレスポンスをキャッシュしてよい時間を秒数で与えます。

資格情報を含むリクエスト

HTTP クッキーなどの「資格情報を含む」リクエストの場合、Access-Control-Allow-Credentials: trueをレスポンスに含めなければ、レスポンスは無視されウェブコンテンツで使用できません。
また、Access-Control-Allow-Origin はオリジン指定をする必要があります。

CORB: Cross Origin Read Blocking

https://www.chromium.org/Home/chromium-security/corb-for-developers
https://fetch.spec.whatwg.org/#corb

疑わしいクロスオリジンリソースの取得を特定し、Web ページに到達する前にブロックする、Web プラットフォームのセキュリティ機能です。
例えば、<script> タグや <img> タグから要求されたクロスオリジンのtext/htmlレスポンスをブロックし、代わりに空のレスポンスで置き換えます。