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

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

Material の Icons (アイコン)を導入する手順

2020年8月:Material design icons 側に変更があり、手順が変わってしまったようです。 目次1. はじめに2. Icons の導入手順2-1. Google Web Fonts …

no image

Webサイトのスタイルガイド作成

参考 Webデザインのスタイルガイドの作り方 | UX MILK

Web

Webページを検証する各種サービス

Webページを検証する各種サービスを紹介します。

Web

閲覧しているウェブページで利用されている HTTP のバージョンを確認する方法

ウェブブラウザで ウェブサイトを閲覧している際、HTTP のどのバージョンが使われているのか確かめる方法を紹介します。 目次Chrome の場合FirefoxEdge Chrome の場合 (1) ウ …

Web

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。