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

window.opener を使って元ウィンドウの情報が取得できるかどうかの実験

ウェブブラウザでウェブページを表示している場合、ブラウザのウィンドウを表す window というオブジェクトが存在しており、JavaScript から利用することができます。 window.opene …

Amazon ページ右端のカート内商品リストを非表示にする方法

Amazon ページ右端のカート内商品リストを非表示にする方法について説明します。

Web

AMP for WordPress プラグインを利用した AMP対応をやめる方法

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順 では、AMP for WordPress プラグインの利用方法について説明しましたが、今回のその逆 …

Web

Firefox で複数のプロファイルを使い分ける方法

目次1. Firefox のプロファイルについて2. プロファイルによって管理できるもの3. プロファイルの場所プロファイルの場所の確認方法4. プロファイルマネージャープロファイルマネージャーの起動 …

プライバシー

「Web閲覧履歴をもとにした広告配信」についての調査結果

上の記事で興味深いアンケートが行われていました。 「Web閲覧履歴などをもとにカスタマイズされた広告が配信されていると認識している人」がそのような広告に対してどう思っているかについて聞いたところ、以下 …