ハマログ

株式会社イーツー・インフォの社員ブログ

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
ApacheCOLSconfigHeaderhtaccessHTTPHTTPSMozillaResponseSecurityXSSセキュリティ

  kaneko tomo   2020年3月8日


関連記事

Google Cloud Monitoringでウェブサイトの死活監視設定

GCPで、Google Cloudの機能を利用してウェブサイトのURLの正常稼働…

Dockerについてあれこれ

最近Dockerでローカル環境を構築したりしてるので、ここまでに調べた事・気づい…

Amazon EventBridgeスケジューラーの実行ログを確認する

Amazon EventBridge スケジューラでEC2インスタンスの自動停止…


← 前の投稿

次の投稿 →