Web

HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

投稿日:2021年5月25日 更新日:

1. はじめに

以下の HTTP Response Headers に関するメモです。

  • COEP (Cross Origin Embedder Policy)
  • COOP (Cross Origin Opener Policy)
  • CORP (Cross Origin Resource Policy)
  • CORS (Cross Origin Resource Sharing)

どれもセキュリティに関連しています。

2. ポイント

一覧表

ヘッダー 設定するところ 対象リソース 説明
COEP
(Cross Origin Embedder Policy)
リソースを読み込む側
  • クロスオリジンからは、CORS or CORP なしのリソースは読み込めないようにする。
  • Web Worker となるファイルに対しては、同一オリジンであっても COEP の出力を強制する(検証中)。
COOP
(Cross Origin Opener Policy)
読み込まれるリソース側
  • ページ(ポップアップウィンドウとして開かれる側)
  • window.opener へのアクセス制限を掛ける。
CORP
(Cross Origin Resource Policy)
読み込まれるリソース側
  • 画像, CSS, JSなど
  • cross-origin なページから、読み込まれないようにする。
  • CORSより指定が簡単。
  • リソースのサーブを止めるわけではない。
CORS(Cross Origin Resource Sharing) 読み込まれるリソース側
  • XHRによってアクセスされるページ
  • フォント
  • cross-origin なページから、読み込まれないようにする。
  • このヘッダーは以前からあった。
  • CORPより細かい制限が掛けられる。

ポイント1

COEP は、クロスオリジンなリソース側にCORP or CORS の設定を強制する。

例えば、以下の HTTP Response Header がセットされたリソースファイルは、クロスオリジンでは読み込めない。

Cross-Origin-Resource-Policy: same-origin
How COEP works
(引用元:Security headers quick reference

ポイント2

以下の2つのヘッダーをセットすることで、cross-origin isolated な Webページにすることができる。

Cross-Origin-Embedder-Policy: require-corp 
Cross-Origin-Opener-Policy: same-origin

cross-origin isolated な Webページにすることで、以下が利用可能になる。

  • SharedArrayBuffer
  • performance.measureUserAgentSpecificMemory()
  • JS Self Profiling API

※ COEP と COOP とは、機能的に直接関係しているわけではない。

ポイント3

cross-origin 環境の場合、COOP を使わなくても window.opener への参照は利用できない(実験した)。cross-origin へのアクセスはブロックされ、SecurityError が発生する。但し、postMessage() は利用できる。

一方、cross-origin 環境で COOPに same-origin を指定すると、アクセスがブロックされるのではなく、window.opener が null になるようだ。なので postMessage() も利用できない。

3. 注意

間違っている箇所があるかもしれません。その場合は訂正します。

4. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web

本サイトに、ココナラで出品してるサービスのウィジェットを表示しました

ココナラで出品してるサービスのウィジェットを、本サイトに表示しました。

Web

CORPヘッダーを使って、自分のサイトの画像を他のサイトから直リンクさせない方法

自分のサイトの画像を他のサイトから直リンクさせない方法について説明します。

HTML

HTML におけるコメントの書き方

HTML におけるコメントの書き方について説明します。 目次1. コメントとは?2. HTML におけるコメントの記述テキストの制限3. 仕様書 1. コメントとは? まず、「コメント」というのは、「 …

Web

.htaccess ファイルにはWebアクセスできないようになっている

.htaccess ファイルにはWebアクセスできないようになっているという話です。

Web

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法

Service Worker を使ってオフラインでも閲覧できるウェブページを作る方法について説明します。