CORS(Cross-Origin Resource Sharing)がわからない

OWASPでCross-Domain Misconfigurationの警告が出たのですが、対策がよくわからなかったので調べました。

CORS（オリジン間リソース共有）とは

HTTPヘッダーを利用して、あるオリジンで動いているアプリケーションに、別のオリジンからのアクセス権を与えることをブラウザに指示するための仕組み。

オリジンとは

URL のスキーム (プロトコル)、ホスト (ドメイン)、ポートによって定義される。

スキーム：https
ホスト：e2info.co.jp
ポート：443

以下は同一オリジン
https://www.e2info.co.jp/
https://www.e2info.co.jp/works.html

以下は異なるオリジン（スキームが異なる）
http://www.e2info.co.jp/
https://www.e2info.co.jp/

こちらも異なるオリジン（ホストが異なる）
https://www.e2info.co.jp/
https://blog.e2info.co.jp/

CORSで制限されるアクセス方法

XMLHttpRequest
Fetch API
ウェブフォント(CSSの@font-faceで別ドメインのフォントを利用する)
WebGLテクスチャ
drawImage() を使用してキャンバスに描画される画像やビデオフレーム
画像から生成する CSS シェイプ

※ CORS を使用したリクエストとはより

仕様

別のオリジンのリソースを呼び出したい場合、HTTPリクエストヘッダにOriginを含めて送信する

GET /path/to/api HTTP/1.1
Origin: https://www.e2info.co.jp/

レスポンス

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.e2info.co.jp

この場合、https://www.e2info.co.jp からのアクセスは許可されていることになり、ブラウザは外部リソースを読み込むことが可能になります。

つまり

管理するアプリケーション内のリソースファイルが外部からXMLHttpRequestなどで呼び出される場合、許可していないオリジンからの呼び出しを防ぐために、Access-Control-Allow-Originを正しく返却するような対応が必要となります。

CORS設定

アプリケーションで制御、ミドルウェアで制御、ロードバランサで制御等方法はいくつかありますが、今回はApache2.4で設定してみました。

指定できるCORS関連のヘッダーは以下のサイトに記載されています。
HTTP ヘッダー – オリジン間リソース共有 (CORS)

上記サイトより。.htaccessもしくはコンフィグファイルでの設定方法


        Header set Access-Control-Allow-Origin "https://my.CLIENT.domain"

参考サイト

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS https://developer.mozilla.org/ja/docs/Glossary/Origin https://html.spec.whatwg.org/multipage/origin.html#origin