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

HTML文書の文字エンコーディングに UTF-8 を使うことが公式に明文化されました

HTML文書は文字エンコーディングUTF-8でなければなりません – 水底の血 という記事で知ったのですが、「HTML文書の文字エンコーディングは UTF-8 でなければならない」という意 …

ICTリテラシー

無料レンタルサーバーとDokuWiki で作る自分用情報サイト

本サイトに パソコン内に自分専用の情報データベースをつくる というページがあります。詳細はリンク先を見て頂くとして、本ページではこれに関連して、「自分専用の情報サイトを作る」ためのオススメの方法につい …

Chrome

Chrome のアドレスバーから任意のサイトの検索機能を使用する方法

目次1. Chrome の検索エンジン管理機能2. 任意サイトの検索機能を Chrome に追加して使用する1. アルクのサイトで検索したときの URL を調査する2. 検索エンジンとして追加する3. …

Web

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

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

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …