Web

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

投稿日:

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 なしのリソースは読み込めないようにする。
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 なページから、読み込まれないようにする。
  • このヘッダーは以前からあった。

ポイント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

AMP に関する情報

AMP 本来の目的からずれているように見える。この機能は必要?

Web

Icons8 の Free Icons を使う手順

Icons8 の Free Icons Icons8 というサイトでは、いろいろな種類の無料素材が提供されています。 今回、そのうちの1つである「アイコン(Free Icons)」を使う手順についての …

Web

フォントサイズに関するCSSクラス名にはどんな名前があるのか調べてみました

目次はじめにCSS Fonts Module Level 3FontawesomeBootstrap (v4)まとめ参考 はじめに フォントサイズを表す CSSクラス名として、どんな名前を使うのがよい …

Chrome

Chrome で複数のユーザーを使い分ける方法

目次1. Chrome のユーザー(プロフィール)について2. ユーザー(プロフィールお)毎に管理できるもの3. ユーザーのデータ(プロフィール)がある場所4. ユーザーの管理ユーザー管理ユーザー名と …

Glitch

Glitch プロジェクトの .git ディレクトリ・サイズを小さくしました

Glitch プロジェクトの .git ディレクトリ・サイズを小さくしました。そのときの作業内容を紹介します。